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,);},),);}
}
)
