【Flutter】Animation 动画 ( AnimatedBuilder 动画使用流程 | 创建动画控制器 | 创建动画 | 创建动画作用的组件 | 关联动画与组件 | 动画执行 )（一）

文章目录

◯、AnimatedBuilder 引入

一、创建动画控制器

二、创建动画

三、创建动画作用的组件

四、创建 AnimatedBuilder 关联动画与组件

五、动画运行

六、完整代码示例

七、相关资源

AnimatedBuilder 动画使用流程 :

① 创建动画控制器

② 创建动画

③ 创建动画作用的组件

④ 创建 AnimatedBuilder 关联动画与组件

⑤ 执行动画

◯、AnimatedBuilder 引入

在上一篇博客 【Flutter】Animation 动画 ( AnimatedWidget 动画使用流程 | 创建动画控制器 | 创建动画 | 创建 AnimatedWidget 动画组件 | 动画运行 ) 中 , 使用了 AnimatedWidget 组件实现动画 , 省略了手动添加监听器 , 并在监听器中手动调用 setState 更新动画的操作 ;

使用 AnimatedWidget 方法实现的动画 , 与 Widget 组件的耦合性还是很高 , 这里引入 AnimatedBuilder , 可以将 Animation 动画 和 Widget 组件分离 ;

AnimatedBuilder 可以构建通用 Widget , AnimatedBuilder 可以用于拆分动画 与 组件 ;

动画开发中需要分离的功能 :

显示动画作用的组件

定义 Animation 动画对象

将 Animation 渲染到组件上

AnimatedBuilder 在监听机制上与 AnimatedWidget 类似 , 也是自动添加监听器 , 监听动画的执行过程 , 自动调用 setState 方法更新界面 ;

一、创建动画控制器

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 00 , 结束值 300 300300 , 动画在执行的 3 33 秒时间内 ( 动画控制器中指定的动画持续时间 ) , 自动计算出每个时间点的 0 00 ~ 300 300300 之间的动画值 ;

创建动画代码示例 :

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

三、创建动画作用的组件

创建一个纯无状态组件 StatelessWidget , 该组件与 Animation 动画对象各自都是独立的 , 使用 AnimatedBuilder 耦合 动画 与 组件 ;

代码示例 :

/// 3 . 定义纯组件, 动画应用与该组件上
class AnimationWidget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return // 动画的主体组件
      // 布局组件中使用动画的值 , 以达到动画效果
      Container(
        decoration: BoxDecoration(color: Colors.red),
      );
  }
}