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;
@override
Widget 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;
@override
void 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),
);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Center(
child: AnimatedBuilder(
animation: _animation,
builder: (context, child) {
return Container(
width: _animation.value,
height: _animation.value,
color: Colors.red,
);
},
),
);
}
}