Flutter开发之补间（Tween）动画

Flutter开发主要分两种，补间动画和基于物理的动画，下面我们试试其中之一补间动画的实现
学移动前端的朋友都知道，补间动画无非就那么几种：平移、旋转、缩放，旋转。安卓过来的朋友应该会觉得其实这些都是比较简单的课题，因为移动前端本身会提供一些动画的包给我们开发，只要我们懂得一个的使用，比如平移，其他的也就会了，所谓绚丽的动画无非也是各种动画的交互使用。

下面我们看看Flutter动画的一些补间动画：

首先理解AnimationController，动画的控制器
下面的动画的状态，开始、结束，执行，完成

/// The status of an animation
enum AnimationStatus {
  /// The animation is stopped at the beginning
  dismissed,

  /// The animation is running from beginning to end
  forward,

  /// The animation is running backwards, from end to beginning
  reverse,

  /// The animation is stopped at the end
  completed,
}

还可以进行动画的反向执行之类的，下面直接看看示例吧

class TweenAnim extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return TweenAnimA();
  }
}
class TweenAnimA extends State<TweenAnim> with SingleTickerProviderStateMixin {
  AnimationController controller;
  //doubler类型动画
  Animation<double> doubleAnimation;
  //颜色动画
  Animation<Color> colorAnimation;
  //位置动画
  Animation<Offset> offsetAnimation;
  //圆角动画
  Animation<BorderRadius> radiusAnimation;
  //装饰动画
  Animation<Decoration> decorationAnimation;
  //字体动画
  Animation<TextStyle> textStyleAnimation;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    //创建AnimationController
    controller = new AnimationController(
        vsync: this, duration: Duration(milliseconds: 2000));
    //animation第一种创建方式：
    doubleAnimation = new Tween<double>(begin: 0.0, end: 200.0).animate(controller)
      ..addListener(() {
        setState(() {});
      })
      ..addStatusListener((AnimationStatus status) {
        //执行完成后反向执行
        if (status == AnimationStatus.completed) {
          controller.reverse();
        } else if (status == AnimationStatus.dismissed) {
          //反向执行完成，正向执行
          controller.forward();
        }
      });
    //animation第二种创建方式：
    offsetAnimation = controller.drive(
        Tween<Offset>(begin: Offset(0.0, 0.0),end: Offset(400.0, 200.0))
    );
 
    colorAnimation =  ColorTween(begin: Colors.yellow,end: Colors.red).animate(controller);
    radiusAnimation = BorderRadiusTween(begin: BorderRadius.circular(0),end: BorderRadius.circular(50)).animate(controller);
    decorationAnimation = DecorationTween(begin: BoxDecoration(color: Colors.purple,borderRadius: BorderRadius.circular(0),),
        end: BoxDecoration(color: Colors.lightBlueAccent,borderRadius: BorderRadius.circular(40))).animate(controller);
    textStyleAnimation = TextStyleTween(begin: TextStyle(color: Colors.black,fontSize: 20,fontWeight: FontWeight.w100),
        end: TextStyle(color: Colors.purple,fontSize: 30,fontWeight: FontWeight.w700)).animate(controller);
    //启动动画
    controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
        appBar: AppBar(title: Text("Tween动画"),),
        body: Container(
          alignment: Alignment.center,
          child: ListView(

            children: <Widget>[
              SizedBox(
                height: 200,
                child:  Container(
                  height: doubleAnimation.value,
                  width: doubleAnimation.value,
                  child: FlutterLogo(),
                ),
              ),
              Container(
                margin: EdgeInsets.only(left: offsetAnimation.value.dx),
                width: 50,
                height: 50,
                color: Colors.green,
              ),
              Container(
                height: 50,
                width: 50,
                color: colorAnimation.value,
              ),
              SizedBox(height: 10,),
              Container(
                height: 50,
                width: 50,
                decoration: BoxDecoration(borderRadius: radiusAnimation.value,color: Colors.blue),
              ),
              Container(
                height: 60,
                width: 200,
                decoration: decorationAnimation.value,
              ),
              Container(
                height: 50,
                child: Text("Tween",style: textStyleAnimation.value,),
              ),

            ],
          ),
        )
    );
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    controller.dispose();
  }
}

一个明白，其他的就好理解了，将其他动画一起串联使用就可以做出绚丽的动画啦，这里还要注意的是动画是一个比较消耗资源的东西，所以controller最后不要忘了关掉喔。