Flutter 动画系统详解

Flutter 动画系统详解一、动画系统概述Flutter 动画系统提供了丰富的动画能力包括隐式动画、显式动画和自定义动画。1.1 动画类型隐式动画- AnimatedContainer、AnimatedOpacity显式动画- AnimationController、TweenHero 动画- 页面间共享元素过渡二、隐式动画2.1 AnimatedContainerclass AnimatedContainerExample extends StatefulWidget { const AnimatedContainerExample({super.key}); override StateAnimatedContainerExample createState() _AnimatedContainerExampleState(); } class _AnimatedContainerExampleState extends StateAnimatedContainerExample { bool _isExpanded false; override Widget build(BuildContext context) { return GestureDetector( onTap: () { setState(() { _isExpanded !_isExpanded; }); }, child: AnimatedContainer( width: _isExpanded ? 300 : 100, height: _isExpanded ? 300 : 100, color: _isExpanded ? Colors.blue : Colors.red, duration: const Duration(milliseconds: 300), curve: Curves.easeInOut, child: const Center(child: Text(Tap me)), ), ); } }2.2 AnimatedOpacityAnimatedOpacity( opacity: _visible ? 1.0 : 0.0, duration: const Duration(milliseconds: 500), child: const Text(Fading text), )三、显式动画3.1 AnimationControllerclass ExplicitAnimation extends StatefulWidget { const ExplicitAnimation({super.key}); override StateExplicitAnimation createState() _ExplicitAnimationState(); } class _ExplicitAnimationState extends StateExplicitAnimation with SingleTickerProviderStateMixin { late AnimationController _controller; late Animationdouble _animation; override void initState() { super.initState(); _controller AnimationController( duration: const Duration(seconds: 2), vsync: this, )..repeat(reverse: true); _animation Tweendouble(begin: 0, end: 1).animate(_controller); } override void dispose() { _controller.dispose(); super.dispose(); } override Widget build(BuildContext context) { return AnimatedBuilder( animation: _animation, builder: (context, child) { return Opacity( opacity: _animation.value, child: child, ); }, child: const Text(Animated text), ); } }3.2 Tween 动画final animation Tweendouble(begin: 0, end: 300).animate(_controller); final colorAnimation ColorTween(begin: Colors.red, end: Colors.blue).animate(_controller);四、Hero 动画// 源页面 Hero( tag: imageHero, child: Image.network(https://picsum.photos/200), ) // 目标页面 Hero( tag: imageHero, child: Image.network(https://picsum.photos/600), )五、动画曲线// 内置曲线 Curves.linear Curves.ease Curves.easeIn Curves.easeOut Curves.easeInOut Curves.bounceIn Curves.bounceOut // 自定义曲线 CurvedAnimation( parent: _controller, curve: const Interval(0.5, 1.0, curve: Curves.easeOut), )六、实战案例6.1 闪烁动画class BlinkAnimation extends StatefulWidget { const BlinkAnimation({super.key}); override StateBlinkAnimation createState() _BlinkAnimationState(); } class _BlinkAnimationState extends StateBlinkAnimation with SingleTickerProviderStateMixin { late AnimationController _controller; override void initState() { super.initState(); _controller AnimationController( duration: const Duration(milliseconds: 500), vsync: this, )..repeat(reverse: true); } override void dispose() { _controller.dispose(); super.dispose(); } override Widget build(BuildContext context) { return FadeTransition( opacity: _controller, child: const Text(Blinking), ); } }七、总结动画系统隐式动画- AnimatedContainer、AnimatedOpacity显式动画- AnimationController、Tween、AnimatedBuilderHero 动画- 页面间过渡动画曲线- Curves合理使用可以创建丰富的交互效果。