今天来学习一下Flutter中的动画。我们在js+css中，已经习惯用css3中的animation，transform，transition这三个加在一起去做。
我们像前端那样，先从静态的变换中谈论。
一、变换组件
在css中如果要先让一个元素发生平移，使用的是transform：translate，那么在flutter中，已经封装起组件进行使用，只用填入平移的位置就可以。
1、平移
?
?
Transform.translate(
??offset: Offset(xValue,yValue),
??child: Text("Hello world"),
),
?
2、旋转
ransform.rotate(
//旋转角度
angle:math.pi/2 ,
child: Text("Hello world"),
)
3、缩放
Transform.scale(
??????scale: 1.5, //缩放倍数
??????child: Text("Hello world")
??)
二、动画
这个时候我们做了一个基本的布局的变换了，我们就会想，怎么样让它动起来呢？
在css中我们就是使用animation 来实现。那么在flutter里面，提供了三个东西来实现动画的效果。我们先不去看原理，直接看一份可以运行的代码。这样有个概念。
class UserLogo extends StatefulWidget {
??@override
??State<StatefulWidget> createState()=>UserLogoWidget();
}
class UserLogoWidget extends State<UserLogo> with SingleTickerProviderStateMixin{
??late AnimationController controller;
??late Animation<double> animation;
??void initState() {
????super.initState();
????// 创建动画周期为1秒的AnimationController对象
????controller = AnimationController(vsync: this, duration: const Duration(milliseconds: 3000));
????final CurvedAnimation curve = CurvedAnimation(
????????parent: controller, curve: Curves.elasticOut);
????// 创建从50到200线性变化的Animation对象
????// 普通动画需要手动监听动画状态，刷新UI
????animation = Tween(begin: 0.0, end: 30.0).animate(curve)
??????..addListener(()=>setState((){}))
??????..addStatusListener((status){
????????if(status == AnimationStatus.completed){
??????????controller.reset();
??????????controller.forward();
????????}
??????});
// 启动动画
????controller.forward();
//????controller.repeat();
??}
??@override
??Widget build(BuildContext context) {
????return RotationTransition(
??????//设置动画的旋转中心
??????alignment: Alignment.center,
??????//动画控制器
??????turns: controller,
??????//将要执行动画的子view
??????child: Image.network(context.watch<GlobalData>().user.image,width: 60,height: 60,),
????);
??}
??@override
??void dispose() {
????// 释放资源
????controller.dispose();
????super.dispose();
??}
}
可以看到这个时候头像旋转起来了。下面我们来分析一下是如何实现的，
首先我们来看build，在这里是用到了一个RotationTransition组件，分别设置了动画的旋转中心、动画的控制器、还有动画的内容布局。如果需要用到别的动画组件，可以参考这里
https://flutterchina.club/widgets/animation/
接下来，重点来了
我们在UserLogoWidget这个类里面创建了两个变量，分别是controller和animation，然后在initState中分别初始化了这两个变量。其中controller是用来管理动画的进程，启动动画、重置动画等。animation则是用来管理整个动画，比如动画播放的曲线和状态。然后我们创建了一个动画变化的曲线cure，它用来指定动画变化的曲线过程。
接下里我们来详细了解一下Flutter中对动画抽象的四个角色
1、Animation
Animation是一个抽象类，它保存着动画的和状态。Animation对象在动画执行的过程中输出的值由curve来决定，
2、Curve
Flutter中通过Curve来描述动画过程，我们把匀速动画成为线性的，非匀速的称为非线形的。
3、AnimationController
AnimationController用来控制动画，它包含动画的启动forward()、停止stop()、反向播放reverse();AnimationController会在动画的每一帧生成一个值。
4、Tween
Tween生成不同范围或数据类型的值，它用来定义从输入范围到输出范围到映射。也就是变化范围。要使用Tween对象，需要调用其animate()方法，然后传入一个控制器对象。例如，以下代码在500毫秒内生成从0到255的整数值
animation = Tween(begin: 0.0, end: 30.0).animate(curve)