文章目录




​AnimatedWidget 动画使用流程 :​

① 创建 AnimatedWidget 动画组件

② 创建动画控制器

③ 创建动画

④ 动画运行






◯、AnimatedWidget 组件引入


在上一篇博客 ​​【Flutter】Animation 动画 ( Flutter 动画基本流程 | 创建动画控制器 | 创建动画 | 设置值监听器 | 设置状态监听器 | 布局中使用动画值 | 动画运行 )​​ 中 , 使用动画时 , 需要给动画添加值监听器 , 每当动画值更新后 , 都会回调该监听器 , 在监听器的回调方法中 , 需要调用 setState 方法 , 将该动画值设置给组件 ;

上面的操作很繁琐 , 需要注册监听器 , 获取动画值 , 然后将动画值设置给组件 ;

使用 AnimatedWidget 组件 , 可以直接实现上述操作 ;



AnimatedWidget 组件 可以极大简化 Flutter 中动画的使用 , 不使用 AnimatedWidget 的话 , 需要手动添加监听器 , 并在监听器中手动调用 setState 更新动画 ;






一、创建 AnimatedWidget 动画组件


AnimatedWidget 动画组件中封装了 Animation 动画对象 , 可以自动计算出动画值 , 并自动刷新封装在该 AnimatedWidget 动画组件中的布局组件 ;

创建 AnimatedWidget 动画组件时 , 传入 Animation 对象 ;



​" AnimatedWidget 动画组件 " 代码示例 :​ 在组件刷新时 , 每次刷新都要调用该组件的 build 方法 , 这里使用 Text 组件显示动画的状态和值 , 并绘制动画作用的组件 Container , Container 组件的宽高就是动画值 , 随着动画值改变 , 该组件的宽高会增加 ;

/// 1. 定义动画组件, 动画的组件封装在该组件中
/// 使用 AnimatedWidget 快速实现一个动画
class AnimatedApp extends AnimatedWidget{

  /// 构造函数
  AnimatedApp({Key key, Animation<double> animation})
      :super(key: key, listenable: animation);

  @override
  Widget build(BuildContext context) {
    /// 获取动画
    Animation<double> animation = listenable;
    return Column(
      children: [
        Text("动画状态 : ${animation.status}", textDirection: TextDirection.ltr,),

        Text("动画值 : ${animation.value.round()}", textDirection: TextDirection.ltr,),

        // 动画的主体组件
        // 布局组件中使用动画的值 , 以达到动画效果
        Container(
          /// 设置距离顶部 20 像素
          margin: EdgeInsets.only(top: 50),
          height: animation.value,
          width: animation.value,
          decoration: BoxDecoration(color: Colors.red),
        ),
      ],
    );

  }
}






二、创建动画控制器


​AnimationController 构造函数参数说明 :​

AnimationController(
  {double? value, /// 动画的初始值
  Duration? duration, /// 动画正向播放持续时间
  Duration? reverseDuration, /// 动画逆序播放持续时间
  String? debugLabel, /// 调试期间标识动画的标志
  double lowerBound: 0.0, /// 动画最小值
  double upperBound: 1.0, /// 动画最大值 
  AnimationBehavior animationBehavior: AnimationBehavior.normal,
  /// 上下文的 TickerProvider , 用于防止屏幕外的动画消耗不必要的资源 , 
  /// 一般将 StatefulWidget 作为 vsync 值
  required TickerProvider vsync} 
)



上述参数中 , 只需要设置 ​​required TickerProvider vsync​​​ 参数 与 ​​Duration? duration​​ 参数即可 ;



​创建动画控制器代码示例 :​

/// 1. 初始化动画控制器
    animationController = AnimationController(
      // 动画绘制到屏幕外部时, 减少消耗
      vsync: this,
      // 动画持续时间 2 秒
      duration: Duration(seconds: 3),
    );






三、创建动画


这里创建 Tween 补间动画 , 设置动画的初始值 0 0 0 , 结束值 300 300 300 , 动画在执行的 3 3 3 秒时间内 ( 动画控制器中指定的动画持续时间 ) , 自动计算出每个时间点的 0 0 0 ~ 300 300 300 之间的动画值 ;

​创建动画代码示例 :​

/// 2 . 构造 Tween 补间动画 ,
    /// 设置动画控制器 AnimationController 给该补间动画
    /// 动画的值是正方形组件的宽高
    animation = Tween<double>(
      begin: 0,
      end: 300
    ).animate(animationController)






四、动画运行


监听 GestureDetector 的 onTap 点击事件 , 点击该组件后 , 调用 ​​animationController.forward()​​ 方法 , 运行动画 ;



​代码示例 :​

GestureDetector(
            // 5 . 点击按钮开启动画
            onTap: (){
              /// 按钮点击事件
              /// 首先将动画初始化
              animationController.reset();

              /// 正向执行动画, 即从初始值执行到结束值
              animationController.forward();

            },
            child: Container(
              alignment: Alignment.center,
              color: Colors.green,
              height: 50,
              child: Text(
                // 显示文本
                "动画开始",
                /// 文字方向 : 从左到右
                textDirection: TextDirection.ltr,
              ),
            ),
          ),






五、完整代码示例


​完整代码示例 :​

import 'package:flutter/material.dart';

void main() {
  runApp(AnimationApp());
}

/// 1. 定义动画组件, 动画的组件封装在该组件中
/// 使用 AnimatedWidget 快速实现一个动画
class AnimatedApp extends AnimatedWidget{

  /// 构造函数
  AnimatedApp({Key key, Animation<double> animation})
      :super(key: key, listenable: animation);

  @override
  Widget build(BuildContext context) {
    /// 获取动画
    Animation<double> animation = listenable;
    return Column(
      children: [
        Text("动画状态 : ${animation.status}", textDirection: TextDirection.ltr,),

        Text("动画值 : ${animation.value.round()}", textDirection: TextDirection.ltr,),

        // 动画的主体组件
        // 布局组件中使用动画的值 , 以达到动画效果
        Container(
          /// 设置距离顶部 20 像素
          margin: EdgeInsets.only(top: 50),
          height: animation.value,
          width: animation.value,
          decoration: BoxDecoration(color: Colors.red),
        ),
      ],
    );

  }
}

/// 动画示例主界面组件
/// 该组件是有状态的, 因此需要定义 StatefulWidget 组件
class AnimationApp extends StatefulWidget{
  @override
  _AnimationAppState createState() => _AnimationAppState();
}

/// 为 StatefulWidget 组件创建 State 类
/// 每个 StatefulWidget 都需要一个配套的 State 类
class _AnimationAppState extends State<AnimationApp>
    with SingleTickerProviderStateMixin{

  /// 动画类
  Animation<double> animation;
  /// 动画控制器
  AnimationController animationController;

  @override
  void initState() {
    super.initState();

    /// 2. 初始化动画控制器
    animationController = AnimationController(
      // 动画绘制到屏幕外部时, 减少消耗
      vsync: this,
      // 动画持续时间 2 秒
      duration: Duration(seconds: 3),
    );


    /// 3 . 构造 Tween 补间动画 ,
    /// 设置动画控制器 AnimationController 给该补间动画
    /// 动画的值是正方形组件的宽高
    animation = Tween<double>(
      begin: 0,
      end: 300
    ).animate(animationController);

  }

  /// 该方法与 initState 对应
  @override
  void dispose() {

    /// 释放动画控制器
    animationController.dispose();

    super.dispose();
  }


  @override
  Widget build(BuildContext context) {

    return Container(

      /// 设置距离顶部 20 像素
      margin: EdgeInsets.only(top: 100),

      child: Column(
        children: [

          GestureDetector(
            // 5 . 点击按钮开启动画
            onTap: (){
              /// 按钮点击事件
              /// 首先将动画初始化
              animationController.reset();

              /// 正向执行动画, 即从初始值执行到结束值
              animationController.forward();

            },
            child: Container(
              alignment: Alignment.center,
              color: Colors.green,
              height: 50,
              child: Text(
                // 显示文本
                "动画开始",
                /// 文字方向 : 从左到右
                textDirection: TextDirection.ltr,
              ),
            ),
          ),

          // 动画的主体组件
          // 4 . 创建动画组件, 传入动画对象 animation
          AnimatedApp(animation: animation,),


        ],
      ),
    );
  }

}

​运行效果 :​

【Flutter】Animation 动画 ( AnimatedWidget 动画使用流程 | 创建动画控制器 | 创建动画 | 创建 AnimatedWidget 动画组件 | 动画运行 )_flutter






六、相关资源


​参考资料 :​


​重要的专题 :​


​博客源码下载 :​