Flutter 动画基础概念
| 术语 | 解释 |
|---|
Animation | 表示动画的值，通常是一个 double (0.0 ~ 1.0) 或其他数值。 |
AnimationController | 管理动画的时间进度和状态。需要 Ticker (vsync) 来驱动。 |
Tween | 定义动画的取值范围，如从 0.0 到 1.0，从红色到蓝色。 |
Curve | 定义动画的加速度曲线，如线性、加速、减速、弹性等。 |
AnimatedWidget | 封装了动画的 Widget，如 AnimatedBuilder、AnimatedContainer。 |
AnimatedBuilder | 监听动画状态并重建 UI。 |
setState | 手动刷新 UI，需要与 AnimationController 配合使用。 |
常用动画类型
| 类型 | 特点 | 示例 |
|---|
| 隐式动画 (Implicit Animation) | 简单、易用，适合简单场景 | AnimatedContainer、AnimatedOpacity、AnimatedAlign |
| 显式动画 (Explicit Animation) | 灵活、强大，适合复杂场景 | AnimationController + Tween + AnimatedBuilder |
| 交织动画 (TweenSequence) | 多段组合动画，控制更复杂的曲线 | 多阶段颜色、位置、缩放的渐变 |
| 物理动画 (Physics-based) | 仿真效果，如弹簧、惯性 | SpringSimulation、FrictionSimulation |
| Hero 动画 | 页面跳转时的共享元素动画 | Hero 小部件 |
示例代码
1️⃣ 隐式动画 - AnimatedContainer
class MyImplicitAnimation extends StatefulWidget {@override_MyImplicitAnimationState createState() => _MyImplicitAnimationState();
}class _MyImplicitAnimationState extends State<MyImplicitAnimation> {double _size = 100;@overrideWidget build(BuildContext context) {return Center(child: GestureDetector(onTap: () {setState(() {_size = _size == 100 ? 200 : 100;});},child: AnimatedContainer(duration: Duration(seconds: 1),width: _size,height: _size,color: Colors.blue,curve: Curves.easeInOut,),),);}
}
2️⃣ 显式动画 - AnimationController + Tween
class MyExplicitAnimation extends StatefulWidget {@override_MyExplicitAnimationState createState() => _MyExplicitAnimationState();
}class _MyExplicitAnimationState extends State<MyExplicitAnimation> with SingleTickerProviderStateMixin {late AnimationController _controller;late Animation<double> _animation;@overridevoid initState() {super.initState();_controller = AnimationController(duration: Duration(seconds: 2),vsync: this,)..repeat(reverse: true);_animation = Tween<double>(begin: 100, end: 200).animate(CurvedAnimation(parent: _controller, curve: Curves.easeInOut),);}@overridevoid dispose() {_controller.dispose();super.dispose();}@overrideWidget build(BuildContext context) {return Center(child: AnimatedBuilder(animation: _animation,builder: (context, child) {return Container(width: _animation.value,height: _animation.value,color: Colors.red,);},),);}
}
)
