前记:每天学习一点点,总会成为厉害的人
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(),
这样一来就实现了无限循环了,根据不同的逻辑还可以实现其他的旋转方式。