共计 1719 个字符，预计需要花费 5 分钟才能阅读完成。
download：SpringBoot+Vue3 我的项目实战，打造企业级在线办公零碎圣安地列斯
颤振动画剖析
动画定义
晚期的动画片应用大量的画面疾速切换，以达到看似间断的动画成果。这是最早的帧动画，是人类视觉提早产生的间断成果。其实这也是当初动画的原理。屏幕有法则地同时渲染屡次。渲染的次数越多，动画就会越晦涩，也就是咱们通常所说的屏幕刷新率。
目标让大家在应用颤振动画的过程中得心应手，不须要剖析具体的源代码。
动画的要害属性: 动画持续时间和动画轨迹。
实际上，动画是物体在指定工夫内特定的规律性静止的体现。所以咱们须要关怀的外围属性是动画时长和动画轨迹。
理解动画实现的原理，所谓“万物变动”和颤振动画是一样的。让咱们先来看看在 Flutter 中应用的动画的几个要害类。
动画外围类:
动画控制器动画控制器
用于设置动画的持续时间、动画的开始和完结值，以及管制动画的开始和完结。
办法和罕用办法:
_controller = 动画控制器 (
Vsync: this，// 设置跑马灯动画帧的回调函数
Duration: Const Duration(毫秒:2000)，// 正动画的持续时间 //2s
反向持续时间: 常量持续时间 (百万:2000)，// 反向动画持续时间 //2s
LowerBound: 0，// 开始动画数值 double 类型
UpperBound: 1.0，// end 动画数值 double 类型
animation behavior:animation behavior . normal，// 动画师行为是否反复动画的两个枚举值？
DebugLabel:“缩放动画”，// 动画过多时调试标签动画不便，toString 时显示。
//_ controller . tostring；
// 输入: 动画控制器# 9d 121(0.000；用于缩放动画) 补间(0.0 → 1.0) 0.0
);
// 罕用办法:
// 监控动画静止
_ controller . add listener((){})；
// 监控动画开始、进行等。
_controller.addStatusListener((状态){
// 遣散动画停在终点。
// 正向动画正在正向执行。
// 反向动画正在反向执行。
// 实现的动画在起点进行
if(status = = animation status . completed){
_ controller . reverse()；// 反向执行 100-0
} else if(status = = animation status . discarded){
_ controller . forward()；// 正向执行 0 -100
}
});
// 开始播放动画
//_ controller . forward()；// 正向启动动画
//_ controller . reverse()；// 反向播放动画
_ controller . repeat()；// 有限循环开始动画
复制代码
vsync 参数须要类别混合:
SingleTickerProviderStateMixin 或 TickerProviderStateMixin，如果页面中只有一个动画控制器应用第一个，多个控制器应用第二个。
AnimatedBuilder 实现动画组件的外围类
总的来说，咱们须要在须要动画成果的组件上包裹一层 AnimatedBuilder 来监控动画控制器的更新数据，外部的实现也是通过有状态组件监控一直刷新页面来实现的。
施工办法:
常量动画生成器 ({
钥匙？钥匙，
必须的 Listenable 动画，/// 动画控制器
必选 this.builder，// 返回动画
This.child，// 传递给 build 的子组件
})
复制代码
以上两个组件能够实现简略的动画成果。让咱们应用 AnimationController 和 AnimatedBuilder 来实现一个简略的缩放动画。使 FlutterLogo 组件大小一直变动。
// 关上动画
_ controller . repeat()；// 有限循环开始动画
核心 (
child: AnimatedBuilder(
child: FlutterLogo()，
动画:_控制器，
构建器:(上下文，子级){
返回容器 (
宽度:100 * _controller.value，
高度:100 * _controller.value，
孩子: 孩子，
);
}),
)