Flutter(十五)——动画的封装与简化

前言

在上一篇的动画内容中，我们学习了基本的概念，以及动画的基本使用规则，但是，上一篇的代码真的实际项目中应用很多吗？其实不是，上一篇之所以那么介绍，只是为了让大家更了解Flutter动画的原理，其实还有更简单封装与简化的使用方式，这一篇就开始学习这些内容。

AnimatedWidget

前面动画之中，我们都是通过addListener和setState来更新UI的，然而有时候可以不用这么麻烦，通过AnimationWidget这个类就可以实现，它对addListener和setState进行了封装，隐藏了实现细节。下面，我们直接上代码来看看：

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin{
   
   
  Animation<double> animation;
  AnimationController controller;

  initState(){
   
   
    super.initState();
    controller=AnimationController(duration: const Duration(milliseconds: 2000),vsync: this);
    animation=CurvedAnimation(parent: controller,curve: Curves.bounceIn)..addStatusListener((status){
   
   
      if(status==AnimationStatus.completed){
   
   //动画在结束时停止的状态
        controller.reverse();//颠倒
      }else if(status==AnimationStatus.dismissed){
   
   //动画在开始时就停止的状态
        controller.forward();//向前
      }
    })..addListener((){