Flutter之Animation

先上例子

import 'package:flutter/material.dart';

class LoaderAnimations extends StatefulWidget {


  @override
  _LoaderAnimationsState createState() => _LoaderAnimationsState();
}

class _LoaderAnimationsState extends State<LoaderAnimations> with SingleTickerProviderStateMixin{
  //with是dart的关键字，意思是混入的意思，就是说可以将一个或者多个类的功能添加到自己的类无需继承这些类，避免多重继承导致的问题。可以在https://stackoverflow.com/questions/21682714/with-keyword-in-dart中找到答案
  //为什么是SingleTickerProviderStateMixin呢，因为初始化animationController的时候需要一个TickerProvider类型的参数Vsync参数，所以我们混入了TickerProvider的子类SingleTickerProviderStateMixin
  AnimationController animationController;//该对象管理着animation对象
  Animation<double> animation;//该对象是当前动画的状态，例如动画是否开始，停止，前进，后退。但是绘制再屏幕上的内容不知道
  // 初始化
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    // vsync在此处时忽略不必要的情况
    animationController = new AnimationController(duration: new Duration(microseconds: 200),vsync: this);
    // curve 曲线是定义动画的动作,也就说动画是非线性运动
    animation = new CurvedAnimation(parent: animationController, curve: Curves.fastOutSlowIn);
    // 添加监听器
    animation.addListener((){
      // 当动画值发生变化时调用setState
      this.setState(() {
        print('我在变');
      });
    });

    //只显示动画一次，根据调用setState的打印情况就会知道。重载就会使其激活，自己的见解，需思量
    animationController.forward();
    //重复不断的效果，调用setState的打印效果显示
    animationController.repeat();
  }

  // 销毁生命周期
  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    animationController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: new Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          new Container(
            color: Colors.red,
            height: 50.0,
            width: animation.value *100,// animation.value的值是0到1，*100是具体的大小
          ),
          new Padding(padding: const EdgeInsets.only(bottom: 5.0)),
          new Container(
            color: Colors.green,
            height: 50.0,
            width: animation.value * 50,
          ),
          new Padding(padding: const EdgeInsets.only(bottom: 5.0)),
          new Container(
            color: Colors.white,
            height: 50.0,
            width: animation.value * 10,
          )
        ],
      ),
    );
  }
}

Tween在被动画对象使用的范围之间进行插值，例如，可以定义红色到蓝色或者0-255的插值（颜色渐变的动画效果)，也可以定义从小到大或者从大到小的插值。

小技巧之一，当想使用动画无限播放，可使用添加状态监听.

animation = Tween(begin: 50.0, end: 200.0).animate(curve)
      ..addListener(() {
        setState(() {});
      })
      ..addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          controller.reverse();
        } else if (status == AnimationStatus.dismissed) {
          controller.forward();
        }
      });

技巧之二：使用动画渐变

controller = AnimationController(
        duration: const Duration(milliseconds: 3000), vsync: this);
    animation = ColorTween(begin: Colors.redAccent, end: Colors.blue).animate(
        controller)
      ..addListener(() {
        setState(() {});
      });
    controller.forward();
child: Container(
        decoration: BoxDecoration(
            color: animation.value
        ),
        margin: EdgeInsets.symmetric(vertical: 10.0),
        height: 200.0,
        width: 200.0,
      ),

Tween在被动画对象使用的范围之间进行插值，例如，可以定义红色到蓝色或者0-255的插值（颜色渐变的动画效果)，也可以定义从小到大或者从大到小的插值。
如果控制使用forward()则重新加载会调用，如果控制使用repeat()则会不断的重复曲线绘制的效果