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

更新时间：2022-05-25 04:24:12

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

创建 AnimatedBuilder , 关联动画与组件 ;

首先要把 AnimatedBuilder , Animation 动画 , Widget 组件 , 都封装在一个 StatelessWidget 组件中 , Flutter 中一切皆组件 ;

然后在这个组件中返回一个包含 AnimatedBuilder 组件的组件 , 其中将 Animation 动画和 Widget 组件都设置在该 AnimatedBuilder 中 , Animation 动画设置在 animation 字段中 , child 字段需要设置到 build 字段中 , 设置的方法如下 :

AnimatedBuilder(
          animation: animation,
          builder: (context, child) => Container(
            height: animation.value,
            width: animation.value,
            child: child,
          ),
          child: child,
        )

代码示例 :

/// 4 . 将组件与动画结合起来
class AnimationTransition extends StatelessWidget{
  /// 构造方法
  AnimationTransition({this.child, this.animation});
  /// 动画作用的组件
  final Widget child;
  /// 动画
  final Animation<double> animation;
  @override
  Widget build(BuildContext context) {
    /// AnimatedBuilder 会自动监听 animation 的变化
    /// 然后渲染 child 组件上的动画
    return Column(
      children: [
        Text("动画状态 : ${animation.status}", textDirection: TextDirection.ltr,),
        Text("动画值 : ${animation.value?.round()}", textDirection: TextDirection.ltr,),
        Container(height: 50,),
        AnimatedBuilder(
          animation: animation,
          builder: (context, child) => Container(
            height: animation.value,
            width: animation.value,
            child: child,
          ),
          child: child,
        )
      ],
    );
  }
}

五、动画运行

监听 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,
              ),
            ),
          ),

上一篇 : ：动态设置android:drawableLeft|Right|Top|Bottom下一篇 : 一对一直播app大热，使用源码或自主开发一对一APP需要了解哪些技术？

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

相关阅读

推荐文章