小菜前两天学习了以下 Animation 的基本动画，接下来小菜学习以下稍微进阶版的 Animation 动画。

复合动画

小菜前两天学习的主要是基本的单一动画，当然多个动画效果集一身也是毫无问题的，小菜接下来尝试一个图片显隐性和缩放同时循环使用的 Demo；addStatusListener 用来监听当前动画状态，即开始或结束；

addListener 用来坚挺动画过程，可获取实时 value 值；AnimationController controller;

Animation animation, sizeAnim;@overridevoid initState() {  super.initState();

controller = AnimationController(

duration: const Duration(milliseconds: 2000), vsync: this);

animation = Tween(begin: 0.0, end: 1.0).animate(controller);

sizeAnim = Tween(begin: 0.0, end: 180.0).animate(controller);

animation.addStatusListener((status) {    if (status == AnimationStatus.completed) {

controller.reverse();

} else if (status == AnimationStatus.dismissed) {

controller.forward();

}

});

sizeAnim.addStatusListener((status) {    if (status == AnimationStatus.completed) {

controller.reverse();

} else if (status == AnimationStatus.dismissed) {

controller.forward();

}

});

}Widget bodyWid() {  return Center(

child: Opacity(

opacity: animation.value,

child: FlutterLogo(size: sizeAnim.value)));

}

时间段动画

既然可以监听动画过程和动画状态，整体的动画便可以灵活掌握；小菜接下来尝试一下分时间段动画，前 50% 显隐性处理，后 50% 缩放处理；AnimationController controller;

Animation animation, sizeAnim;@overridevoid initState() {  super.initState();

controller = AnimationController(duration: const Duration(milliseconds: 2000), vsync: this);

animation = Tween(

begin: 0.0,

end: 1.0,

).animate(CurvedAnimation(

parent: controller, curve: Interval(0.0, 0.5, curve: Curves.ease)));

sizeAnim = Tween(

begin: 100.0,

end: 180.0,

).animate(CurvedAnimation(

parent: controller,

curve: Interval(0.5, 1.0, curve: Curves.fastOutSlowIn)));

}Widget bodyWid() {  return Center(

child: Opacity(

opacity: animation.value,

child: FlutterLogo(size: sizeAnim.value)));

}

自定义动画

动画是灵活的，我们可以根据自己的需求自定义动画效果，小菜尝试一个圆环绕一个圆转圈；AnimationController controller;

Animation animation;@overridevoid initState() {  super.initState();

controller = AnimationController(duration: const Duration(milliseconds: 2000), vsync: this);

animation = Tween(begin: -1.0, end: 1.0).animate(controller);

}class AnimationCanvas extends CustomPainter {

Animation animation;

AnimationCanvas(this.animation);

Paint _paint = Paint()

..color = Colors.blue

..strokeWidth = 4.0

..style = PaintingStyle.stroke;  @override

void paint(Canvas canvas, Size size) {

canvas.save();

canvas.drawCircle(Offset(300, 300.0), 150.0, _paint);

canvas.restore();

canvas.save();

canvas.translate(150 * sin(pi * animation.value), 150 * cos(pi * animation.value));

canvas.drawCircle(Offset(300, 300.0), 10.0, _paint..color = Colors.red);

canvas.restore();

}  @override

bool shouldRepaint(CustomPainter oldDelegate) {    return true;

}

}

Hero 动画

Hero 动画是 Flutter 提供的飞入式动画，主要用在页面间切换时动画，且返回时动画按原路返回；使用时设置两个页面间 tag 一致即可，方便简洁；Widget bodyWid04() {  return Container(

child: Padding(

padding: EdgeInsets.all(10.0),

child: GestureDetector(

child: Row(children: [

Hero(tag: 'user_header', child: FlutterLogo(size: 50.0)),

Padding(

padding: EdgeInsets.only(left: 12.0),

child: Text('Flutter Ptoto'))

]),

onTap: () {

Navigator.pushNamed(context, 'animateRoute01');

})));

}

作者：阿策神奇