Flutter 38: 图解 Flutter 基本动画

Posted free-thinker

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Flutter 38: 图解 Flutter 基本动画 相关的知识,希望对你有一定的参考价值。

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

复合动画

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

  1. addStatusListener 用来监听当前动画状态,即开始或结束;
  2. addListener 用来坚挺动画过程,可获取实时 value 值;
AnimationController controller;
Animation<double> animation, sizeAnim;

@override
void 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;
@override
void 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;

@override
void 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‘);
              })));
}

技术图片


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

以上是关于Flutter 38: 图解 Flutter 基本动画 的主要内容,如果未能解决你的问题,请参考以下文章

Flutter 专题61 图解基本 Button 按钮小结 #yyds干货盘点#

Flutter 专题68 图解基本约束 Box #yyds干货盘点#

Flutter 专题66 图解基本约束 Box #yyds干货盘点#

Flutter 专题65 图解基本 TextField 文本输入框 #yyds干货盘点#

Flutter 专题75 图解基本 TabBar 标签导航栏 #yyds干货盘点#

Flutter 专题58 图解 Flutter 嵌入原生 AndroidView 小尝试 #yyds干货盘点#