flutter常用动画

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