Flutter

    技术2025-06-13  35

    前记:每天学习一点点,总会成为厉害的人

    Flutter_RotateTransition

    还是在写简单X音界面的时候遇到的问题,除了RotateTransiton()组件外,还有CircleAvatar()组件。

    实现的效果如下

    右下角是一个旋转的动画,就是RotateTransiton()和CircleAvatar()的结合。

    上代码:

    解释参数用途,因为需要一直刷新,选择了StatefulWidget然后混入SingleTickerProviderMixin,

    ①定义controller

    选择AnimationController()。

    ②初始化状态

    初始化_controller,vsync垂直同步,解决屏幕刷新和tearing等问题,这个是必须实现的!

    duration,控制动画从开始到结束的时间,我这里设置了6s。

    ③关于controller的用法

    这里我是这么理解的,百度了一下AnimationCotroller是一个特殊的Animation对象在屏幕刷新的每一帧,就会生成一个新的值,

    我觉得应该是为了监听Animationstatus,更方便的去执行controller的方法。

    方法描述controller.forward();开始正向运行动画controller.reset();重置动画controller.reverse();开始反向执行动画controller.dispose();停止动画

    这里在初始状态中我调用了controller.forward();开始动画。

    ④关于CircleAvatar();

    在这里我真的是踩了很大一个坑,前面使用了ClipRRect()组件去修改以图片为背景的父组件Container(),Container()外层还有个Positioned()组件,然后我一直修改Container的w和h一直没用,这里我就想吐槽一下flutter,为什么必须去修改最外层positioned()的大小才会去改变,后面我选了CirlcleAvatar()组件用起来比较方便,指定了他的bg就可以了不用包裹那么多层,然后这个radius半径也是必须要最外层组件没有设置w和h的时候才会有用(坑爹啊)。

    ⑤turns和逻辑问题。

    关于turns就是状态的运用和简单的逻辑问题来定义一个无限旋转的Animation,

    关于AnimationStatus:

    状态说明AnimationStaus.completed正向执行完动画所到的状态AnimationStatus.dismissed反向执行完动画所到的状态

    意思是调用了controller()一定会监听到AnimationStaus.completed,

    所以我在turns里面写了监听controller的状态,这里用了..addStatuslistenner(),因为不改变他的返回值所以用了两个点,

    监听状态的时候当status=AnimationStatus.completed的时候,重置_controller.reset(),然后在启动_controller.forward(),

    这样一来就实现了无限循环了,根据不同的逻辑还可以实现其他的旋转方式。

     

     

    Processed: 0.011, SQL: 9