效果GIF

ani.gif

其他都是单一的动画，主要拆解下Staggered Animation

分析

动画需要根据一个时间轴执行，下图是官方demo的一个分析图，本文实现和此图基本差不多，只是多了1个翻转动画

image.png

实现

1. 透明度渐变

Animation<double> opacity = Tween<double>(
    begin: 0.0,
    end: 1.0,
  ).animate(
    CurvedAnimation(
      parent: _controller,
      curve: Interval(        0.0,        0.1,
        curve: Curves.easeIn,
      ),
    ),
  );

1. 翻转

  Animation<double> rotate = Tween<double>(
      begin: 0.0,
      end: math.pi * 2,
    ).animate(
      CurvedAnimation(
        parent: _controller,
        curve: Interval(          0.0,          0.2,
          curve: Curves.ease,
        ),
      ),
    );

1. 位移

Animation<EdgeInsets> movement = EdgeInsetsTween(
      begin: EdgeInsets.only(top: 0.0),
      end: EdgeInsets.only(top: 100.0),
    ).animate(
      CurvedAnimation(        parent: _controller,
        curve: Interval(          0.2,          0.375,
          curve: Curves.fastOutSlowIn,
        ),
      ),
    );

1. 方形变圆

 Animation<BorderRadius> radius = BorderRadiusTween(
      begin: BorderRadius.circular(0.0),
      end: BorderRadius.circular(100.0),
    ).animate(
      CurvedAnimation(        parent: _controller,
        curve: Interval(          0.5,          0.75,
          curve: Curves.ease,
        ),
      ),
    );

1. 颜色渐变

   Animation<Color> color = ColorTween(
      begin: Colors.blue[300],
      end: Colors.blue[900],
    ).animate(
      CurvedAnimation(        parent: _controller,
        curve: Interval(          0.5,          0.75,
          curve: Curves.linear,
        ),
      ),
    );

1. 高宽渐变

 Animation<double> height = Tween<double>(
      begin: 100.0,
      end: 200.0,
    ).animate(
      CurvedAnimation(
        parent: _controller,
        curve: Interval(          0.375,          0.6,
          curve: Curves.fastOutSlowIn,
        ),
      ),
    );

  Animation<double> width = Tween<double>(
      begin: 100.0,
      end: 200.0,
    ).animate(
      CurvedAnimation(
        parent: _controller,
        curve: Interval(          0.375,          0.6,
          curve: Curves.fastOutSlowIn,
        ),
      ),
    );

1. 组合

Widget _buildAni(BuildContext context, Widget child) {    return new Container(
      padding: movement.value,
      transform: Matrix4.identity()..rotateZ(rotate.value),
      child: new Opacity(
        opacity: opacity.value,
        child: new Container(
          width: width.value,
          height: height.value,
          decoration: new BoxDecoration(
            color: color.value,
            border: new Border.all(
              color: Colors.black,
              width: 3.0,
            ),
            borderRadius: radius.value,
          ),
          child: new Center(
            child: new Text(              'staggered',
              style: new TextStyle(color: Colors.white, fontSize: 16.0),
            ),
          ),
        ),
      ),
    );
  }  @override
  Widget build(BuildContext context) {    return new Column(
      mainAxisAlignment: MainAxisAlignment.start,
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[        new Padding(
          padding:          const EdgeInsets.only(left: 10.0, top: 10.0, right: 10.0),
          child: new FlatButton(
              textColor: Colors.black,
              child: new Text('replay staggered'),
              onPressed: () {
                _startAnimation();
              }),
        ),        new AnimatedBuilder(animation: _controller, builder: _buildAni)
      ],
    );
  }

作者：老实巴交的读书人
链接：https://www.jianshu.com/p/32fee75d9e70