Flutter AnimationController：掌握动画的节奏

Flutter AnimationController掌握动画的节奏从基础到高级掌握 Flutter 动画控制器的全部潜能。一、AnimationController 的核心价值作为一名追求像素级还原的 UI 匠人我对动画有着特殊的情感。AnimationController 是 Flutter 动画系统的核心它就像是动画的指挥家控制着动画的开始、暂停、反向和速度。掌握它你就能创造出流畅、自然的动画效果。二、基础用法1. 基本设置import package:flutter/material.dart; class BasicAnimation extends StatefulWidget { override _BasicAnimationState createState() _BasicAnimationState(); } class _BasicAnimationState extends StateBasicAnimation with SingleTickerProviderStateMixin { late AnimationController _controller; late Animationdouble _animation; override void initState() { super.initState(); _controller AnimationController( duration: Duration(seconds: 2), vsync: this, ); _animation Tweendouble(begin: 0, end: 1).animate( CurvedAnimation(parent: _controller, curve: Curves.easeInOut), ); _controller.forward(); } override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text(基础动画)), body: Center( child: AnimatedBuilder( animation: _animation, builder: (context, child) { return Transform.scale( scale: _animation.value, child: Container( width: 200, height: 200, decoration: BoxDecoration( gradient: LinearGradient( colors: [Color(0xFF667eea), Color(0xFF764ba2)], begin: Alignment.topLeft, end: Alignment.bottomRight, ), borderRadius: BorderRadius.circular(12), ), ), ); }, ), ), floatingActionButton: FloatingActionButton( onPressed: () { if (_controller.isCompleted) { _controller.reverse(); } else { _controller.forward(); } }, child: Icon(Icons.play_arrow), ), ); } override void dispose() { _controller.dispose(); super.dispose(); } }2. 动画曲线class CurvedAnimationExample extends StatefulWidget { override _CurvedAnimationExampleState createState() _CurvedAnimationExampleState(); } class _CurvedAnimationExampleState extends StateCurvedAnimationExample with SingleTickerProviderStateMixin { late AnimationController _controller; late Animationdouble _animation; override void initState() { super.initState(); _controller AnimationController( duration: Duration(seconds: 3), vsync: this, ); // 使用不同的曲线 _animation Tweendouble(begin: 0, end: 1).animate( CurvedAnimation( parent: _controller, curve: Curves.bounceOut, ), ); _controller.repeat(reverse: true); } override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text(动画曲线)), body: Center( child: AnimatedBuilder( animation: _animation, builder: (context, child) { return Transform.translate( offset: Offset(0, _animation.value * 200 - 100), child: Container( width: 100, height: 100, decoration: BoxDecoration( color: Color(0xFF667eea), borderRadius: BorderRadius.circular(50), ), ), ); }, ), ), ); } override void dispose() { _controller.dispose(); super.dispose(); } }三、高级用法1. 多动画协调class MultipleAnimations extends StatefulWidget { override _MultipleAnimationsState createState() _MultipleAnimationsState(); } class _MultipleAnimationsState extends StateMultipleAnimations with SingleTickerProviderStateMixin { late AnimationController _controller; late Animationdouble _scaleAnimation; late Animationdouble _opacityAnimation; late AnimationOffset _positionAnimation; override void initState() { super.initState(); _controller AnimationController( duration: Duration(seconds: 2), vsync: this, ); _scaleAnimation Tweendouble(begin: 0.5, end: 1.0).animate( CurvedAnimation(parent: _controller, curve: Curves.easeOut), ); _opacityAnimation Tweendouble(begin: 0.0, end: 1.0).animate( CurvedAnimation(parent: _controller, curve: Curves.easeIn), ); _positionAnimation TweenOffset( begin: Offset(0, -50), end: Offset(0, 0), ).animate( CurvedAnimation(parent: _controller, curve: Curves.bounceOut), ); _controller.forward(); } override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text(多动画协调)), body: Center( child: AnimatedBuilder( animation: _controller, builder: (context, child) { return Transform.translate( offset: _positionAnimation.value, child: Opacity( opacity: _opacityAnimation.value, child: Transform.scale( scale: _scaleAnimation.value, child: Container( width: 200, height: 200, decoration: BoxDecoration( gradient: LinearGradient( colors: [Color(0xFF667eea), Color(0xFF764ba2)], begin: Alignment.topLeft, end: Alignment.bottomRight, ), borderRadius: BorderRadius.circular(12), ), child: Center( child: Text( 动画组合, style: TextStyle( color: Colors.white, fontSize: 18, fontWeight: FontWeight.bold, ), ), ), ), ), ), ); }, ), ), ); } override void dispose() { _controller.dispose(); super.dispose(); } }2. 动画序列class AnimationSequence extends StatefulWidget { override _AnimationSequenceState createState() _AnimationSequenceState(); } class _AnimationSequenceState extends StateAnimationSequence with SingleTickerProviderStateMixin { late AnimationController _controller; late Animationdouble _firstAnimation; late Animationdouble _secondAnimation; late Animationdouble _thirdAnimation; override void initState() { super.initState(); _controller AnimationController( duration: Duration(seconds: 4), vsync: this, ); // 第一个动画0-1秒 _firstAnimation Tweendouble(begin: 0, end: 1).animate( CurvedAnimation( parent: _controller, curve: Interval(0.0, 0.25, curve: Curves.easeOut), ), ); // 第二个动画1-2秒 _secondAnimation Tweendouble(begin: 0, end: 1).animate( CurvedAnimation( parent: _controller, curve: Interval(0.25, 0.5, curve: Curves.easeOut), ), ); // 第三个动画2-4秒 _thirdAnimation Tweendouble(begin: 0, end: 1).animate( CurvedAnimation( parent: _controller, curve: Interval(0.5, 1.0, curve: Curves.easeOut), ), ); _controller.forward(); } override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text(动画序列)), body: Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ AnimatedBuilder( animation: _firstAnimation, builder: (context, child) { return Transform.scale( scale: _firstAnimation.value, child: Container( width: 100, height: 100, color: Color(0xFF667eea), ), ); }, ), AnimatedBuilder( animation: _secondAnimation, builder: (context, child) { return Transform.scale( scale: _secondAnimation.value, child: Container( width: 100, height: 100, color: Color(0xFF764ba2), ), ); }, ), AnimatedBuilder( animation: _thirdAnimation, builder: (context, child) { return Transform.scale( scale: _thirdAnimation.value, child: Container( width: 100, height: 100, color: Color(0xFFf093fb), ), ); }, ), ], ), ); } override void dispose() { _controller.dispose(); super.dispose(); } }3. 物理动画class PhysicsAnimation extends StatefulWidget { override _PhysicsAnimationState createState() _PhysicsAnimationState(); } class _PhysicsAnimationState extends StatePhysicsAnimation with SingleTickerProviderStateMixin { late AnimationController _controller; late AnimationOffset _animation; override void initState() { super.initState(); _controller AnimationController( vsync: this, ); // 物理弹簧动画 final spring SpringSimulation( SpringDescription( mass: 1.0, stiffness: 100.0, damping: 10.0, ), 0.0, 1.0, 0.0, ); _animation _controller.drive( TweenOffset( begin: Offset(-1, 0), end: Offset(0, 0), ), ); _controller.animateWith(spring); } override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text(物理动画)), body: Center( child: SlideTransition( position: _animation, child: Container( width: 200, height: 200, decoration: BoxDecoration( gradient: LinearGradient( colors: [Color(0xFF667eea), Color(0xFF764ba2)], begin: Alignment.topLeft, end: Alignment.bottomRight, ), borderRadius: BorderRadius.circular(12), ), ), ), ), ); } override void dispose() { _controller.dispose(); super.dispose(); } }四、性能优化使用 const 构造器减少不必要的重建合理使用 AnimatedBuilder只重建需要动画的部分避免在动画回调中做耗时操作保持动画流畅使用 RepaintBoundary隔离重绘区域五、最佳实践始终 dispose在 State 中使用 AnimationController 时一定要在 dispose 方法中释放使用 vsync避免不必要的动画刷新合理设置 duration根据动画类型设置合适的时长测试性能在低端设备上测试动画流畅度动画是界面的灵魂AnimationController 是灵魂的指挥家。#flutter #animation #animation-controller #dart #ui