Flutter 自定义动画完全指南

Flutter 自定义动画完全指南引言动画是现代移动应用的重要组成部分它能够提升用户体验使界面更加生动。Flutter 提供了强大的动画系统本文将深入探讨如何创建自定义动画效果。动画基础回顾动画类型补间动画 (Tween Animation)- 最常见的动画类型物理动画 (Physics Animation)- 模拟物理效果自定义绘制动画- 使用 CustomPainterHero 动画- 页面间过渡动画控制器AnimationController controller AnimationController( duration: const Duration(seconds: 2), vsync: this, );高级技巧一自定义 Tween基础自定义 Tweenclass ColorTween extends TweenColor { ColorTween({Color? begin, Color? end}) : super(begin: begin, end: end); override Color lerp(double t) { return Color.lerp(begin, end, t)!; } }复杂 Tweenclass SizeTween extends TweenSize { SizeTween({Size? begin, Size? end}) : super(begin: begin, end: end); override Size lerp(double t) { double width begin!.width (end!.width - begin!.width) * t; double height begin!.height (end!.height - begin!.height) * t; return Size(width, height); } }高级技巧二动画组合并行动画Animationdouble opacity Tweendouble( begin: 0.0, end: 1.0, ).animate(controller); Animationdouble scale Tweendouble( begin: 0.5, end: 1.0, ).animate(controller); AnimationOffset position TweenOffset( begin: Offset(-1, 0), end: Offset(0, 0), ).animate(controller);序列动画Animationdouble first Tweendouble( begin: 0.0, end: 1.0, ).animate(CurvedAnimation( parent: controller, curve: Interval(0.0, 0.5), )); Animationdouble second Tweendouble( begin: 0.0, end: 1.0, ).animate(CurvedAnimation( parent: controller, curve: Interval(0.5, 1.0), ));高级技巧三物理动画使用 SpringSimulationAnimationController controller AnimationController.unbounded(vsync: this); SpringSimulation simulation SpringSimulation( SpringDescription( mass: 1.0, stiffness: 100.0, damping: 10.0, ), 0.0, 1.0, 0.0, ); controller.animateWith(simulation);使用 GravitySimulationGravitySimulation simulation GravitySimulation( 10.0, // 重力加速度 0.0, // 起始位置 100.0, // 终点位置 0.0, // 初始速度 );高级技巧四自定义绘制动画CustomPainter 动画class AnimatedCircle extends StatefulWidget { override _AnimatedCircleState createState() _AnimatedCircleState(); } class _AnimatedCircleState extends StateAnimatedCircle with SingleTickerProviderStateMixin { late AnimationController _controller; late Animationdouble _radius; override void initState() { super.initState(); _controller AnimationController( duration: Duration(seconds: 2), vsync: this, )..repeat(reverse: true); _radius Tweendouble( begin: 50.0, end: 150.0, ).animate(_controller); } override Widget build(BuildContext context) { return AnimatedBuilder( animation: _controller, builder: (context, child) { return CustomPaint( painter: CirclePainter(_radius.value), child: Container(), ); }, ); } override void dispose() { _controller.dispose(); super.dispose(); } } class CirclePainter extends CustomPainter { final double radius; CirclePainter(this.radius); override void paint(Canvas canvas, Size size) { final center Offset(size.width / 2, size.height / 2); final paint Paint() ..color Colors.blue ..style PaintingStyle.fill; canvas.drawCircle(center, radius, paint); } override bool shouldRepaint(CirclePainter oldDelegate) { return oldDelegate.radius ! radius; } }高级技巧五路径动画沿路径移动class PathAnimation extends StatefulWidget { override _PathAnimationState createState() _PathAnimationState(); } class _PathAnimationState extends StatePathAnimation with SingleTickerProviderStateMixin { late AnimationController _controller; late Animationdouble _progress; final Path _path Path() ..moveTo(0, 0) ..quadraticBezierTo(100, 200, 200, 100) ..quadraticBezierTo(300, 0, 400, 200); override void initState() { super.initState(); _controller AnimationController( duration: Duration(seconds: 3), vsync: this, )..repeat(); _progress Tweendouble( begin: 0.0, end: 1.0, ).animate(_controller); } override Widget build(BuildContext context) { return AnimatedBuilder( animation: _progress, builder: (context, child) { final metrics _path.computeMetrics().first; final offset metrics.getTangentForOffset(metrics.length * _progress.value)!.position; return Stack( children: [ CustomPaint( painter: PathPainter(_path), size: Size(400, 250), ), Positioned( left: offset.dx, top: offset.dy, child: Container( width: 20, height: 20, decoration: BoxDecoration( color: Colors.red, shape: BoxShape.circle, ), ), ), ], ); }, ); } override void dispose() { _controller.dispose(); super.dispose(); } } class PathPainter extends CustomPainter { final Path path; PathPainter(this.path); override void paint(Canvas canvas, Size size) { final paint Paint() ..color Colors.grey ..style PaintingStyle.stroke ..strokeWidth 2; canvas.drawPath(path, paint); } override bool shouldRepaint(PathPainter oldDelegate) { return false; } }实战案例弹跳动画class BouncingBall extends StatefulWidget { override _BouncingBallState createState() _BouncingBallState(); } class _BouncingBallState extends StateBouncingBall with SingleTickerProviderStateMixin { late AnimationController _controller; late Animationdouble _bounce; override void initState() { super.initState(); _controller AnimationController( duration: Duration(milliseconds: 500), vsync: this, )..repeat(reverse: true); _bounce Tweendouble( begin: 0.0, end: 100.0, ).animate(CurvedAnimation( parent: _controller, curve: Curves.bounceInOut, )); } override Widget build(BuildContext context) { return AnimatedBuilder( animation: _bounce, builder: (context, child) { return Transform.translate( offset: Offset(0, _bounce.value), child: Container( width: 50, height: 50, decoration: BoxDecoration( color: Colors.orange, shape: BoxShape.circle, boxShadow: [ BoxShadow( color: Colors.black26, blurRadius: 10, offset: Offset(0, 5), ), ], ), ), ); }, ); } override void dispose() { _controller.dispose(); super.dispose(); } }实战案例脉冲动画class PulseAnimation extends StatefulWidget { override _PulseAnimationState createState() _PulseAnimationState(); } class _PulseAnimationState extends StatePulseAnimation with SingleTickerProviderStateMixin { late AnimationController _controller; late Animationdouble _scale; late Animationdouble _opacity; override void initState() { super.initState(); _controller AnimationController( duration: Duration(seconds: 1), vsync: this, )..repeat(); _scale Tweendouble( begin: 1.0, end: 1.5, ).animate(CurvedAnimation( parent: _controller, curve: Curves.easeInOut, )); _opacity Tweendouble( begin: 1.0, end: 0.3, ).animate(CurvedAnimation( parent: _controller, curve: Curves.easeInOut, )); } override Widget build(BuildContext context) { return AnimatedBuilder( animation: _controller, builder: (context, child) { return Stack( alignment: Alignment.center, children: [ Transform.scale( scale: _scale.value, child: Opacity( opacity: _opacity.value, child: Container( width: 100, height: 100, decoration: BoxDecoration( color: Colors.green, shape: BoxShape.circle, ), ), ), ), Container( width: 100, height: 100, decoration: BoxDecoration( color: Colors.green, shape: BoxShape.circle, ), ), ], ); }, ); } override void dispose() { _controller.dispose(); super.dispose(); } }实战案例波纹动画class RippleAnimation extends StatefulWidget { override _RippleAnimationState createState() _RippleAnimationState(); } class _RippleAnimationState extends StateRippleAnimation with SingleTickerProviderStateMixin { late AnimationController _controller; late Animationdouble _ripple; override void initState() { super.initState(); _controller AnimationController( duration: Duration(seconds: 2), vsync: this, )..repeat(); _ripple Tweendouble( begin: 0.5, end: 2.0, ).animate(CurvedAnimation( parent: _controller, curve: Curves.easeOut, )); } override Widget build(BuildContext context) { return AnimatedBuilder( animation: _ripple, builder: (context, child) { return Container( width: 200, height: 200, child: Stack( alignment: Alignment.center, children: [ for (int i 0; i 3; i) Transform.scale( scale: _ripple.value i * 0.3, child: Opacity( opacity: 1 - (_ripple.value i * 0.3 - 0.5) / 2, child: Container( width: 100, height: 100, decoration: BoxDecoration( border: Border.all( color: Colors.blue, width: 2, ), shape: BoxShape.circle, ), ), ), ), Container( width: 50, height: 50, decoration: BoxDecoration( color: Colors.blue, shape: BoxShape.circle, ), ), ], ), ); }, ); } override void dispose() { _controller.dispose(); super.dispose(); } }常见问题与解决方案Q1动画卡顿怎么办A优化性能// 使用 const 构造函数 const MyWidget(); // 使用 RepaintBoundary RepaintBoundary( child: AnimatedWidget(), ); // 避免不必要的重建 AnimatedBuilder( animation: animation, builder: (context, child) { return Transform.scale( scale: animation.value, child: child, // 使用 child 避免重建 ); }, child: MyChildWidget(), );Q2如何实现循环动画A使用 repeat 方法controller.repeat(); // 无限循环 controller.repeat(reverse: true); // 往返循环 controller.repeat(min: 0.0, max: 1.0); // 指定范围Q3如何同步多个动画A使用同一个 AnimationControllerAnimationdouble scale Tweendouble( begin: 0.0, end: 1.0, ).animate(controller); Animationdouble opacity Tweendouble( begin: 0.0, end: 1.0, ).animate(controller);最佳实践1. 及时释放资源override void dispose() { _controller.dispose(); super.dispose(); }2. 使用 AnimatedBuilderAnimatedBuilder( animation: _animation, builder: (context, child) { return Opacity( opacity: _animation.value, child: child, ); }, child: MyChildWidget(), );3. 选择合适的曲线Curves.easeInOut // 平滑过渡 Curves.bounceIn // 弹跳效果 Curves.elasticOut // 弹性效果 Curves.decelerate // 减速效果总结Flutter 的动画系统非常强大和灵活。通过本文的学习你应该能够创建自定义 Tween 动画组合多个动画效果使用物理模拟动画实现自定义绘制动画创建路径动画掌握这些技巧能够帮助你创建更加生动和吸引人的用户界面。