Flutter的菜鸟教程十九:动画-监视动画的过程

最新推荐文章于 2023-05-28 19:25:50 发布

duo_shine

最新推荐文章于 2023-05-28 19:25:50 发布

阅读量2k

点赞数 1

分类专栏： Flutter Flutter的菜鸟教程文章标签：

本文链接：https://blog.csdn.net/duo_shine/article/details/81261896

版权

Flutter 同时被 2 个专栏收录

27 篇文章 17 订阅

订阅专栏

Flutter的菜鸟教程

27 篇文章 91 订阅

订阅专栏

本文开始学习Flutter动画

渲染动画*
AnimatedWidget简化
监视动画的过程（根据动画的状态例如启动停止和翻转方向）
用AnimatedBuilder重构
并行动画


/**
 * 动画实例3-监视动画的过程（根据动画的状态 例如启动 停止 和翻转方向）
 */
import 'package:flutter/material.dart';
import 'package:flutter/animation.dart';

void main() {
  runApp(new LogoApp());
}

/**
 * AnimatedWidget会自动调用addlistener和setState
 */
class AnimatedLogo extends AnimatedWidget {
  @override
  Widget build(BuildContext context) {
    final Animation<double> animation = listenable;
    return new Center(
      child: new Container(
        margin: new EdgeInsets.symmetric(vertical: 10.0),
        height: animation.value,
        width: animation.value,
        child: new FlutterLogo(),
      ),
    );
  }

  AnimatedLogo({Key key, Animation<double> animation})
      : super(key: key, listenable: animation);
}

class LogoApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new _LogoAppState();
  }
}

class _LogoAppState extends State<LogoApp> with SingleTickerProviderStateMixin {
  AnimationController controller;
  Animation<double> animation;

  @override
  void initState() {
    super.initState();
    controller = new AnimationController(
        vsync: this, duration: const Duration(milliseconds: 2000));
    animation = new Tween(begin: 0.0, end: 300.0).animate(controller)
    //添加了状态监听
      ..addStatusListener((state) {
        //当动画结束时执行动画反转
        if (state == AnimationStatus.completed) {
          controller.reverse();
          //当动画在开始处停止再次从头开始执行动画
        } else if (state == AnimationStatus.dismissed) {
          controller.forward();
        }
      });
    controller.forward();
  }

  @override
  build(dynamic) {
    return new AnimatedLogo(animation: animation);
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }
}

相比较上一篇本文就多了一个状态监听,这里还是再赘述一下,
animation = new Tween(begin: 0.0, end: 300.0).animate(controller)
//添加了状态监听
..addStatusListener((state)的意思是给.animate(controller)的返回值添加监听,那么我们看下源码中
Animation animate(Animation parent) {
return new _AnimatedEvaluation(parent, this);
}

他的返回值是Animation
Animation由值<类型T>和状态组成，状态指示Animation在概念上是从开始到结束还是结束回到开始，当然Animation还允许其他对象监听其值或状态的更改,这里就通过AnimationController和Animation状态配合使动画循环执行
当然他也不止这一个状态监听,这动画的第一文中我们使用了addListener,每次动画的值发生变化时调用
还有对应的取消监听removeListener removeStatusListener
你应该主动尝试去使用他们….