300字范文 > 【Flutter】Animation 动画 ( AnimatedWidget 动画使用流程 | 创建动画控制器

【Flutter】Animation 动画 ( AnimatedWidget 动画使用流程 | 创建动画控制器

时间：2022-11-23 12:27:58

文章目录

◯、AnimatedWidget 组件引入一、创建 AnimatedWidget 动画组件二、创建动画控制器三、创建动画四、动画运行五、完整代码示例六、相关资源

AnimatedWidget 动画使用流程 :

① 创建 AnimatedWidget 动画组件

② 创建动画控制器

③ 创建动画

④ 动画运行

◯、AnimatedWidget 组件引入

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

使用 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);@overrideWidget 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 补间动画 , 设置动画的初始值 000 , 结束值 300300300 , 动画在执行的 333 秒时间内 ( 动画控制器中指定的动画持续时间 ) , 自动计算出每个时间点的 000 ~ 300300300 之间的动画值 ;

创建动画代码示例 :

/// 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);@overrideWidget 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;@overridevoid 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 对应@overridevoid dispose() {/// 释放动画控制器animationController.dispose();super.dispose();}@overrideWidget 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 . 创建动画组件, 传入动画对象 animationAnimatedApp(animation: animation,),],),);}}

运行效果 :

六、相关资源

参考资料 :

Flutter 官网 :https://flutter.dev/Flutter 插件下载地址 :https://pub.dev/packagesFlutter 开发文档 :/docs( 强烈推荐 )官方 GitHub 地址: /flutterFlutter 中文社区 :/Flutter 实用教程 :/docs/cookbookFlutter CodeLab :https://codelabs.flutter-/Dart 中文文档 :/Dart 开发者官网 :https://api.dart.dev/Flutter 中文网 :https://flutterchina.club/ , /docs/Flutter 相关问题 :https://flutterchina.club/faq/ ( 入门阶段推荐看一遍 )GitHub 上的 Flutter 开源示例 :/download/han120/15989510Flutter 实战电子书 :https://book.flutterchina.club/chapter1/