四、创建 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, ), ), ),
