当前位置：首页 > news >正文

Flutter AnimationController：掌握动画的节奏

news 2026/6/14 8:09:13

Flutter AnimationController：掌握动画的节奏

从基础到高级，掌握 Flutter 动画控制器的全部潜能。

一、AnimationController 的核心价值

作为一名追求像素级还原的 UI 匠人，我对动画有着特殊的情感。AnimationController 是 Flutter 动画系统的核心，它就像是动画的指挥家，控制着动画的开始、暂停、反向和速度。掌握它，你就能创造出流畅、自然的动画效果。

二、基础用法

1. 基本设置

import 'package:flutter/material.dart'; class BasicAnimation extends StatefulWidget { @override _BasicAnimationState createState() => _BasicAnimationState(); } class _BasicAnimationState extends State<BasicAnimation> with SingleTickerProviderStateMixin { late AnimationController _controller; late Animation<double> _animation; @override void initState() { super.initState(); _controller = AnimationController( duration: Duration(seconds: 2), vsync: this, ); _animation = Tween<double>(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 State<CurvedAnimationExample> with SingleTickerProviderStateMixin { late AnimationController _controller; late Animation<double> _animation; @override void initState() { super.initState(); _controller = AnimationController( duration: Duration(seconds: 3), vsync: this, ); // 使用不同的曲线 _animation = Tween<double>(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 State<MultipleAnimations> with SingleTickerProviderStateMixin { late AnimationController _controller; late Animation<double> _scaleAnimation; late Animation<double> _opacityAnimation; late Animation<Offset> _positionAnimation; @override void initState() { super.initState(); _controller = AnimationController( duration: Duration(seconds: 2), vsync: this, ); _scaleAnimation = Tween<double>(begin: 0.5, end: 1.0).animate( CurvedAnimation(parent: _controller, curve: Curves.easeOut), ); _opacityAnimation = Tween<double>(begin: 0.0, end: 1.0).animate( CurvedAnimation(parent: _controller, curve: Curves.easeIn), ); _positionAnimation = Tween<Offset>( 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 State<AnimationSequence> with SingleTickerProviderStateMixin { late AnimationController _controller; late Animation<double> _firstAnimation; late Animation<double> _secondAnimation; late Animation<double> _thirdAnimation; @override void initState() { super.initState(); _controller = AnimationController( duration: Duration(seconds: 4), vsync: this, ); // 第一个动画：0-1秒 _firstAnimation = Tween<double>(begin: 0, end: 1).animate( CurvedAnimation( parent: _controller, curve: Interval(0.0, 0.25, curve: Curves.easeOut), ), ); // 第二个动画：1-2秒 _secondAnimation = Tween<double>(begin: 0, end: 1).animate( CurvedAnimation( parent: _controller, curve: Interval(0.25, 0.5, curve: Curves.easeOut), ), ); // 第三个动画：2-4秒 _thirdAnimation = Tween<double>(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 State<PhysicsAnimation> with SingleTickerProviderStateMixin { late AnimationController _controller; late Animation<Offset> _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( Tween<Offset>( 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(); } }