写点什么

【Flutter 专题】37 图解 Flutter 基本动画 (二)

发布于: 刚刚
【Flutter 专题】37 图解 Flutter 基本动画 (二)

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

复合动画

      小菜前两天学习的主要是基本的单一动画,当然多个动画效果集一身也是毫无问题的,小菜接下来尝试一个图片显隐性和缩放同时循环使用的 Demo


  1. addStatusListener 用来监听当前动画状态,即开始或结束;

  2. addListener 用来坚挺动画过程,可获取实时 value 值;


AnimationController controller;Animation<double> 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<double> animation, sizeAnim;@overridevoid initState() {  super.initState();  controller = AnimationController(duration: const Duration(milliseconds: 2000), vsync: this);    animation = Tween<double>(    begin: 0.0,    end: 1.0,  ).animate(CurvedAnimation(      parent: controller, curve: Interval(0.0, 0.5, curve: Curves.ease)));  sizeAnim = Tween<double>(    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<double> 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<double> 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: <Widget>[                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');              })));}
复制代码




      小菜学习了一下稍进阶的动画,如果有问题的烦请多多指导!


来源:阿策小和尚

发布于: 刚刚阅读数: 2
用户头像

还未添加个人签名 2021.05.13 加入

Android / Flutter 小菜鸟~

评论

发布
暂无评论
【Flutter 专题】37 图解 Flutter 基本动画 (二)