效果GIF
ani.gif
其他都是单一的动画，主要拆解下 Staggered Animation
分析
动画需要根据一个时间轴执行，下图是官方demo的一个分析图，本文实现和此图基本差不多，只是多了1个翻转动画
image.png
实现
- 透明度渐变
Animation opacity = Tween(begin: 0.0,end: 1.0,).animate(CurvedAnimation(parent: _controller,curve: Interval(0.0,0.1,curve: Curves.easeIn,),),);
- 翻转
Animation rotate = Tween(begin: 0.0,end: math.pi * 2,).animate(CurvedAnimation(parent: _controller,curve: Interval(0.0,0.2,curve: Curves.ease,),),);
- 位移
Animation 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,),),);
- 方形变圆
Animation 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,),),);
- 颜色渐变
Animation color = ColorTween(begin: Colors.blue[300],end: Colors.blue[900],).animate(CurvedAnimation(parent: _controller,curve: Interval(0.5,0.75,curve: Curves.linear,),),);
- 高宽渐变
Animation height = Tween(begin: 100.0,end: 200.0,).animate(CurvedAnimation(parent: _controller,curve: Interval(0.375,0.6,curve: Curves.fastOutSlowIn,),),);Animation width = Tween(begin: 100.0,end: 200.0,).animate(CurvedAnimation(parent: _controller,curve: Interval(0.375,0.6,curve: Curves.fastOutSlowIn,),),);
- 组合
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),),),),),);}@overrideWidget build(BuildContext context) {return new Column(mainAxisAlignment: MainAxisAlignment.start,mainAxisSize: MainAxisSize.min,children: [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)],);}