1. 動畫四要素
1.1 插值器
// double 類型的動畫
Animation<double> => Tween(begin: 0.0, end: 200.0).animate(controller)
// int 類型的動畫
Animation<int> => IntTween(begin: 0, end: 1)
// alignment
Animation<AlignmentGeometry> => Tween(begin: Alignment.center, end: Alignment.TopLeft)
// 顏色漸變動畫
Animation<color> => ColorTween(begin: Colors.grey, end: Colors.red)
// size類型的動畫
Animation<Size> => SizeTween(begin: Size(100,100), end: Size(200, 200))
// Animation<Size> sizeAnim = SizeTween(begin: Size(100,100),end: Size(200,200)).animate(controller)
// ..addListener(() {
// print("reverse====${sizeAnim.value}");
// setState(() {
// // the state that has changed here is the animation object’s value
// });
// })
// ..addStatusListener((status){
// });
// SizedBox.fromSize(
// child: Container(
// color: Colors.red,
// ),
// size: sizeAnim.value,
// )
// Rect 類型動畫
RectTween(begin: Rect.fromLTRB(100,100,100,100), end: Rect.fromLTRB(100,100,100,100))
// 常量值動畫:
Animation<int> constantAnim = ConstantTween<int>(5)
// 反轉動畫
Animation reverseAnim = ReverseTween(IntTween(begin: 0, end: 200))
// 步數動畫，比如做個計時器
Animation<int> stepAnim = StepTween(begin: 10, end: 0)
...更多...
1.2 動畫曲線
Curve
linear
decelerate
ease
easeIn
easeOut
easeInOut
fastOutSlowIn
bounceIn
bounceOut
bounceInOut
elasticIn
elasticOut
elasticInOut
final Animation<double> animation = CurvedAnimation(
parent: controller,
curve: Curves.easeIn,
reverseCurve: Curves.easeOut,
);
1.3 Ticker providers
class _MyAnimationState extends State<MyAnimation>
with TickerProviderStateMixin {
}
1.4 動畫控制器（AnimationController）
// 混入 SingleTickerProviderStateMixin 使對象實現 Ticker 功能
class _AnimatedContainerState extends State<AnimatedContainer>
with SingleTickerProviderStateMixin {
AnimationController _controller;
@override
void initState() {
super.initState();
// 創建 AnimationController 動畫
_controller = AnimationController(
// 傳入 Ticker 對象
vsync: this,
// 傳入 動畫持續時間
duration: new Duration(milliseconds: 1000),
);
startAnimation();
}
Future<void> startAnimation() async {
// 調用 AnimationController 的 forward 方法啟動動畫
await _controller.forward();
}
@override
Widget build(BuildContext context) {
return Container(
width: _controller.value;
child: //...
);
}
}
enum AnimationStatus {
/// 動畫處于停止狀態
dismissed,
/// 動畫從頭到尾執行
forward,
/// 動畫從尾到頭執行
reverse,
/// 動畫已執行完成
completed,
}
2. 隱式動畫
// AnimatedContainer
AnimatedContainer(
duration: Duration(seconds: 5),
width: 60.0,
height: height,
color: Color(0xff14ff65),
)
onPressed: (){
setState(() {
height = 320.0;
});
},
// AnimatedOpacity
double opacity = 1.0;
...
AnimatedOpacity(
opacity: opacity,
duration: Duration(seconds: 1),
child: Text("hello"),
)
setState(() {
opacity = 0.0;
});
...更多...
3. 共享元素轉換
Hero
Hero 動畫
4. 交錯動畫
Flutter中的動畫
Flutter 動畫之 Tween
Flutter 動畫全解析（動畫四要素、動畫組件、隱式動畫組件原理等）
Flutter 通用“動畫切換”組件（AnimatedSwitcher）
Flutter動畫全解析（動畫四要素、動畫組件、隱式動畫組件原理等）
