# 颤动动画 ## 概述针对每个用例使用正确的方法在 Flutter 中创建流畅、高性能的动画。这项技能涵盖了完整的动画工作流程：从隐式/显式方法之间的选择到实现英雄过渡和交错动画等复杂效果。 ## 动画类型决策树根据您的要求选择正确的动画类型： **隐式动画** \- 在以下情况下使用： * 动画单个属性（颜色、大小、位置） * 动画由状态改变触发 * 无需细粒度控制 **显式动画** \- 在以下情况下使用： * 需要完全控制动画生命周期 * 同时动画多个属性 * 需要对动画状态变化做出反应 * 创建自定义动画或过渡 **英雄动画** \- 在以下情况下使用： * 在两个屏幕之间共享一个元素 * 创建共享元素过渡 * 用户期望元素在路线之间“飞行” **交错动画** \- 在以下情况下使用： * 多个动画应顺序运行或重叠 * 创建连锁反应或顺序显示 * 按顺序动画列表项 **基于物理的动画** \- 在以下情况下使用： * 动画应该感觉自然/物理 * 类似弹簧的行为，滚动手势 * 可拖动的交互 ## 隐式动画当属性更改时，隐式动画会自动处理动画。无需控制器。 ### 常见的隐式小部件 **AnimatedContainer** \- 为多个属性（大小、颜色、装饰、填充）设置动画：动画容器( 持续时间：常量持续时间（毫秒：300），曲线：Curves.easeInOut，宽度：_展开？ 200：100，高度：_展开？ 200：100，颜色：_扩展？颜色.蓝色：颜色.红色，子：const FlutterLogo(), ） **AnimatedOpacity** \- 简单的淡入淡出动画：动画不透明度( 不透明度：_可见？ 1.0：0.0，持续时间：常量持续时间（毫秒：300），孩子：const Text（'你好'），） **TweenAnimationBuilder** \- 没有样板的自定义补间动画： TweenAnimationBuilder<双>( 补间：补间<双>（开始：0，结束：1），持续时间：常量持续时间（秒：1），构建器：（上下文，值，子级）{ 返回不透明度( 不透明度：值，子：Transform.scale( 规模：价值，孩子：孩子， ), ）； }, 子：const FlutterLogo(), ） **其他隐式小部件：** * `AnimatedPadding` \- 填充动画 * `AnimatedPositioned` \- 位置动画（在堆栈中） * `AnimatedAlign` \- 对齐动画 * `AnimatedContainer` \- 多个属性 * `AnimatedSwitcher` \- 小部件之间的交叉淡入淡出 * `AnimatedDefaultTextStyle` \- 文本样式动画 ### 最佳实践 * 对于简单的情况更喜欢隐式动画 * 使用适当的曲线进行自然运动（参见“曲线”类） * 设置“曲线”和“持续时间”以实现可预测的行为 * 需要时使用`onEnd`回调 * 避免嵌套隐式动画以提高性能 ## 显式动画显式动画通过 AnimationController 提供完全控制。 ### 核心组件 **AnimationController** \- 驱动动画：后期AnimationController_controller； @覆盖无效初始化状态（）{ super.initState(); _controller = 动画控制器( 持续时间：常量持续时间（秒：2），垂直同步：这个，）； } @覆盖无效处置（）{ _controller.dispose(); 超级.dispose(); } **Tween** \- 在开始值和结束值之间进行插值：动画 = Tween(开始: 0, 结束: 300).animate(_controller); **CurvedAnimation** \- 将曲线应用于动画：动画 = 曲线动画( 父级：_controller，曲线：Curves.easeInOut，）； ### AnimatedWidget 模式最适合可重复使用的动画小部件：类 AnimatedLogo 扩展 AnimatedWidget { const AnimatedLogo({super.key, 必需的 Animation 动画}) ：超级（可听：动画）； @覆盖小部件构建（BuildContext上下文）{ 最终动画=可监听的动画；返回中心( 子项：容器（高度：动画.值，宽度：动画.值，子：const FlutterLogo(), ), ）； } } ### AnimatedBuilder 模式最适合带有动画的复杂小部件：类 GrowTransition 扩展 StatelessWidget { 常量 GrowTransition({ 需要这个.child, 需要 this.animation, 超级密钥， }); 最终的 Widget 子级；最终动画动画； @覆盖小部件构建（BuildContext上下文）{ 返回中心( 子：AnimatedBuilder( 动画：动画，构建器：（上下文，子级）{ 返回大小框（高度：动画.值，宽度：动画.值，孩子：孩子，）； }, 孩子：孩子， ), ）； } } ### 监控动画状态动画.addStatusListener((状态) { 开关（状态）{ 案例AnimationStatus.completed： _controller.reverse(); 打破；案例AnimationStatus.dismissed： _controller.forward(); 打破；默认：打破； } }); ### 多个同时动画类 AnimatedLogo 扩展 AnimatedWidget { const AnimatedLogo({super.key, 必需的 Animation 动画}) ：超级（可听：动画）； static Final _opacityTween = Tween(开始: 0.1, 结束: 1); static Final _sizeTween = Tween(开始: 0, 结束: 300); @覆盖小部件构建（BuildContext上下文）{ 最终动画=可监听的动画；返回中心( 子项：不透明度( 不透明度：_opacityTween.evaluate（动画），子项：容器（高度：_sizeTween.evaluate（动画），宽度：_sizeTween.evaluate（动画），子：const FlutterLogo(), ), ), ）； } } ### 内置显式转换 Flutter 提供了即用型转换： * `FadeTransition` \- 淡入淡出动画 * `ScaleTransition` \- 缩放动画 * `SlideTransition` \- 幻灯片动画 * `SizeTransition` \- 尺寸动画 * `RotationTransition` \- 旋转动画 * `PositionedTransition` \- 位置动画（在堆栈中）示例：淡入淡出过渡( 不透明度：_动画，子：const FlutterLogo(), ） ### 性能提示 * 当小部件被删除时处理控制器 * 使用“AnimatedBuilder”进行最佳重建 * 避免在动画监听器中使用`setState()`（使用`AnimatedWidget`/`AnimatedBuilder`） * 在调试期间使用 `timeDilation` 来减慢动画速度 ## 英雄动画英雄动画在屏幕之间创建共享元素过渡。 ### 基本英雄动画 **源屏幕：** 英雄( 标签：“英雄形象”，子: Image.asset('images/logo.png'), ） **目标屏幕：** 英雄( tag: 'hero-image', // 相同的标签！子: Image.asset('images/logo.png'), ） ### 完整示例类 PhotoHero 扩展 StatelessWidget { 常量照片英雄({ 超级密钥，需要这张照片，这个.onTap, 需要 this.width, }); 最终串照片；最终的VoidCallback？点击；最终双倍宽度； @覆盖小部件构建（BuildContext上下文）{ 返回大小框（宽度：宽度，孩子：英雄（标签：照片, 孩子：材料（颜色: 颜色.透明, 孩子：墨水井（点按：点按，子：Image.asset（照片，适合：BoxFit.contain）， ), ), ), ）； } } **在屏幕之间导航：** Navigator.of(上下文).push( MaterialPageRoute( 构建器：（上下文）{ 返回脚手架（ appBar: AppBar(标题: const Text('详细信息')), 身体：中心（孩子：照片英雄（照片: 'images/logo.png', 宽度：300.0， onTap: () => Navigator.of(context).pop(), ), ), ）； }, ), ）； ### 径向英雄动画过渡期间从圆形变换为矩形：类 RadialExpansion 扩展 StatelessWidget { const 径向扩展({ 超级密钥，需要 this.maxRadius，这个孩子， }) : ClipRectSize = 2.0 * (maxRadius / math.sqrt2); 最终双倍 maxRadius；最终双clipRectSize；最终的小部件？孩子; @覆盖小部件构建（BuildContext上下文）{ 返回剪辑椭圆（孩子：中心（孩子：大小框（宽度：剪辑矩形大小，高度：clipRectSize，孩子：ClipRect（孩子：孩子）， ), ), ）； } } 与“MaterialRectCenterArcTween”一起使用进行基于中心的插值： static RectTween _createRectTween(矩形？开始，矩形？结束) { 返回MaterialRectCenterArcTween（开始：开始，结束：结束）； } ### 英雄最佳实践 * 使用唯一、一致的标签（通常是数据对象本身） * 保持英雄小部件树在路线之间相似 * 使用透明颜色将图像包裹在“Material”中以实现“流行”效果 * 使用 `timeDilation` 来调试转换 * 考虑使用“HeroMode”在需要时禁用英雄动画 ## 交错动画以不同的时间运行多个动画。 ### 基本交错动画所有动画共享一个控制器：类 StaggerAnimation 扩展 StatelessWidget { StaggerAnimation({super.key, 必需 this.controller}) : 不透明度 = Tween(开始: 0.0, 结束: 1.0).animate( 曲线动画( 父级：控制器，曲线：常量间隔（0.0，0.100，曲线：Curves.ease）， ), ), 宽度 = Tween(开始: 50.0, 结束: 150.0).animate( 曲线动画( 父级：控制器，曲线：常量间隔（0.125，0.250，曲线：Curves.ease）， ), ）；最终的AnimationController控制器；最终动画不透明度；最终动画宽度； Widget _buildAnimation(BuildContext context, Widget? child) { 返回容器（对齐：Alignment.bottomCenter，子项：不透明度( 不透明度：不透明度.值，子项：容器（宽度：宽度.值，身高：150，颜色: 颜色.蓝色, ), ), ）； } @覆盖小部件构建（BuildContext上下文）{ 返回动画生成器（动画：控制器，生成器：_buildAnimation，）； } } ### 基于间隔的计时每个动画都有一个介于 0.0 和 1.0 之间的间隔：动画 = Tween(开始: 0, 结束: 300).animate( 曲线动画( 父级：控制器，曲线：常量间隔（ 0.25, // 从控制器持续时间的 25% 开始 0.50, // 在控制器持续时间的 50% 处结束曲线：Curves.ease， ), ), ）； ### 常见补间边框半径 = 边框半径Tween( 开始：BorderRadius.circular(4), 结束：BorderRadius.circular(75), ).动画( 曲线动画( 父级：控制器，曲线：常量间隔（0.375，0.500，曲线：Curves.ease）， ), ）； ### 交错菜单动画 class _MenuState 使用 SingleTickerProviderStateMixin 扩展 State { 静态 const _initialDelayTime = 持续时间（毫秒：50）；静态 const _itemSlideTime = 持续时间（毫秒：250）；静态 const _staggerTime = 持续时间（毫秒：50）；静态 const _buttonDelayTime = 持续时间（毫秒：150）；静态 const _buttonTime = 持续时间（毫秒：500）；最终_animationDuration = _initialDelayTime + (_staggerTime * _menuTitles.length) + _buttonDelayTime + _按钮时间；后期AnimationController_controller； @覆盖无效初始化状态（）{ super.initState(); _controller = 动画控制器( 持续时间：_animationDuration，垂直同步：这个，）； _controller.forward(); } @覆盖无效处置（）{ _controller.dispose(); 超级.dispose(); } } ### 错开最佳实践 * 使用`Interval`来及时偏移动画 * 确保控制器持续时间涵盖所有间隔 * 使用曲线在间隔内实现自然运动 * 考虑“timeDilation”来调试时序 * 错开菜单项，增加延迟以产生连锁反应 ## 基于物理的动画使用物理模拟创建自然感觉的动画。 ### 投掷动画 _controller.fling( 速度: 2.0, // 每秒单位）； ### 自定义物理模拟 _controller.animateWith( 弹簧模拟（弹簧：const SpringDescription( 质量：1，刚度：100，阻尼：10， ), 开始：0.0，结束：1.0，速度：0.0， ), ）； ### 常见物理模拟 * `SpringSimulation` \- 弹簧物理 * `BouncingScrollSimulation` \- 弹跳滚动 * `ClampingScrollSimulation` \- 滚动而不反弹 * `GravitySimulation` \- 基于重力 ## 最佳实践 ### 做 * 在小部件处置中处置AnimationController * 在监听器中使用 `AnimatedBuilder`/`AnimatedWidget` 而不是 `setState()` * 选择适当的曲线以实现自然运动 * 使用 `timeDilation` 来调试动画 * 考虑性能（避免在动画构建中使用繁重的小部件） * 在各种设备上测试动画 * 支持反转动画，直观感受 ### 不要 * 忘记释放AnimationController（内存泄漏） * 当“AnimatedBuilder”足够时，在动画监听器中使用“setState()” * 假设动画立即完成（处理“AnimationStatus”） *过度动画（动画会分散用户的注意力） * 创建感觉“生涩”的动画（使用平滑曲线） * 忽略可访问性（尊重“disableAnimations”首选项） ## 资源 ###参考资料/ **implicit.md** \- 包含示例和最佳实践的隐式动画小部件的完整参考。 **explicit.md** \- 深入研究显式动画、AnimationController 和模式。 **hero.md** \- 具有标准和径向过渡的英雄动画指南。 **staggered.md** \- 交错动画模式和计时策略。 **physical.md** \- 基于物理的动画和模拟。 **curves.md** \- 曲线类和选择适当曲线的参考。 ### 资产/模板/ 常见动画模式的模板代码： * `implicit_animation.dart` \- 隐式动画示例 * `explicit_animation.dart` \- 显式动画设置 * `hero_transition.dart` \- 英雄动画样板 * `staggered_animation.dart` \- 交错动画模板

颤动动画

包含技能