Flutter 第一个动画

3D映射

最基础的动画就是移动、放大、旋转这些，而要做到这些就要使用: Matrix4 进行映射，如下：

    Container(
      color: Colors.brown,  
      width: 100,
      height: 100,
      transform: Matrix4.identity()..rotateZ(pi / 4.0),
      
    );

将容器绕Z轴旋转90度，但是很快就发现,旋转的位置不对， 以左上角的为原点进行旋转，而我们想要的是以中心点作为原点， 于是有了下面这段:

Transform(
          transform: Matrix4.identity()..rotateZ(pi / 4.0),
          alignment: Alignment.center,
          child: new Container(
            color: Colors.brown,           
            width: 100,
            height: 100,
        
        ),

在Flutter中需要使用Transform， 进行transform操作，它可以更改旋转的原点位置

第一个动画

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;

  final String title;

  _MyHomePageState(this.title);

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    // 2 秒内 , value 从 0.0 - 1.0 线性渐变
    _animationController = AnimationController(
        vsync: this, duration: Duration(milliseconds: 2000));

    // 添加监听器
    // 一定要监听数值的变化,手动设置setState, 否则无法刷新视图
    _animationController.addListener(() {
      // 当动画值发生变化时调用setState
      this.setState(() {
      });
    });

    // 执行一次
    // _animationController.forward();

   // 重复执行
    _animationController.repeat();
  }

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

  @override
  Widget build(BuildContext context) {
    // TODO: implement build

    return new Scaffold(
      appBar: new AppBar(title: new Text(title)),
      body: new Container(
        color: Colors.green,
        alignment: Alignment.center,
        child: Transform(
          transform: Matrix4.identity()..rotateZ(pi / 4.0),
          alignment: Alignment.center,
          child: new Container(
            //   color: Colors.brown,
            alignment: Alignment.center,
            width: 200 * _animationController.value, // 根据value， 计算宽度
            height: 200,
            decoration: BoxDecoration(
                border: Border.all(color: Colors.blue, width: 5),
                borderRadius: BorderRadius.all(//圆角
                    Radius.circular(30.0))),
          ),
        ),
      ),
    );
  }
}