Flutter_RotateTransition实现动画旋转效果

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

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()，

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