Flutter 动画控制器：打造流畅的动画体验-编程阁

Flutter 动画控制器：打造流畅的动画体验

掌握 Flutter 动画控制器的高级技巧，创造流畅而优雅的动画效果。

一、动画控制器概述

作为一名把代码当散文写的 UI 匠人，我对 Flutter 动画控制器有着独特的见解。动画控制器是 Flutter 动画系统的核心，它可以让我们精确控制动画的播放、暂停、倒放等。从简单的动画到复杂的动画序列，动画控制器为我们提供了一套强大的动画创作工具。就像电影导演手里的摄像机一样，动画控制器让我们可以精确掌控动画的每一个细节。

二、基础动画控制器

1. 创建动画控制器

import 'package:flutter/material.dart'; class BasicAnimationController extends StatefulWidget { const BasicAnimationController({super.key}); @override State<BasicAnimationController> createState() => _BasicAnimationControllerState(); } class _BasicAnimationControllerState extends State<BasicAnimationController> with SingleTickerProviderStateMixin { late AnimationController _controller; @override void initState() { super.initState(); // 创建动画控制器 _controller = AnimationController( duration: const Duration(seconds: 2), vsync: this, ); } @override void dispose() { // 释放资源 _controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('基础动画控制器')), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ AnimatedBuilder( animation: _controller, builder: (context, child) { return Transform.rotate( angle: _controller.value * 2 * 3.14159, child: Container( width: 100, height: 100, color: Colors.blue, ), ); }, ), const SizedBox(height: 20), Row( mainAxisAlignment: MainAxisAlignment.center, children: [ ElevatedButton( onPressed: () => _controller.forward(), child: const Text('播放'), ), const SizedBox(width: 10), ElevatedButton( onPressed: () => _controller.reverse(), child: const Text('倒放'), ), const SizedBox(width: 10), ElevatedButton( onPressed: () => _controller.reset(), child: const Text('重置'), ), ], ), ], ), ), ); } }

2. 动画值监听

class AnimationValueListener extends StatefulWidget { const AnimationValueListener({super.key}); @override State<AnimationValueListener> createState() => _AnimationValueListenerState(); } class _AnimationValueListenerState extends State<AnimationValueListener> with SingleTickerProviderStateMixin { late AnimationController _controller; double _animationValue = 0.0; @override void initState() { super.initState(); _controller = AnimationController( duration: const Duration(seconds: 2), vsync: this, ); // 监听动画值变化 _controller.addListener(() { setState(() { _animationValue = _controller.value; }); }); // 监听动画状态变化 _controller.addStatusListener((status) { print('Animation Status: $status'); }); } @override void dispose() { _controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('动画值监听')), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text('动画值: ${_animationValue.toStringAsFixed(2)}'), const SizedBox(height: 20), Container( width: 200, height: 10, color: Colors.grey[300], child: FractionallySizedBox( widthFactor: _animationValue, child: Container(color: Colors.blue), ), ), const SizedBox(height: 20), ElevatedButton( onPressed: () => _controller.forward(), child: const Text('播放动画'), ), ], ), ), ); } }

3. 动画状态

class AnimationStatusExample extends StatefulWidget { const AnimationStatusExample({super.key}); @override State<AnimationStatusExample> createState() => _AnimationStatusExampleState(); } class _AnimationStatusExampleState extends State<AnimationStatusExample> with SingleTickerProviderStateMixin { late AnimationController _controller; AnimationStatus _status = AnimationStatus.dismissed; @override void initState() { super.initState(); _controller = AnimationController( duration: const Duration(seconds: 2), vsync: this, ); _controller.addStatusListener((status) { setState(() { _status = status; }); }); } @override void dispose() { _controller.dispose(); super.dispose(); } String getStatusText() { switch (_status) { case AnimationStatus.dismissed: return '已停止'; case AnimationStatus.forward: return '正向播放中'; case AnimationStatus.reverse: return '反向播放中'; case AnimationStatus.completed: return '已完成'; } } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('动画状态')), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text('状态: ${getStatusText()}'), const SizedBox(height: 20), AnimatedBuilder( animation: _controller, builder: (context, child) { return Transform.scale( scale: 0.5 + _controller.value * 0.5, child: Container( width: 100, height: 100, color: Colors.blue, ), ); }, ), const SizedBox(height: 20), Row( mainAxisAlignment: MainAxisAlignment.center, children: [ ElevatedButton( onPressed: () => _controller.forward(), child: const Text('正向'), ), const SizedBox(width: 10), ElevatedButton( onPressed: () => _controller.reverse(), child: const Text('反向'), ), const SizedBox(width: 10), ElevatedButton( onPressed: () => _controller.stop(), child: const Text('停止'), ), ], ), ], ), ), ); } }

三、高级动画控制器

1. 动画重复

class RepeatingAnimation extends StatefulWidget { const RepeatingAnimation({super.key}); @override State<RepeatingAnimation> createState() => _RepeatingAnimationState(); } class _RepeatingAnimationState extends State<RepeatingAnimation> with SingleTickerProviderStateMixin { late AnimationController _controller; @override void initState() { super.initState(); _controller = AnimationController( duration: const Duration(seconds: 1), vsync: this, ); // 无限重复 _controller.repeat(); } @override void dispose() { _controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('重复动画')), body: Center( child: AnimatedBuilder( animation: _controller, builder: (context, child) { return Transform.rotate( angle: _controller.value * 2 * 3.14159, child: Container( width: 100, height: 100, decoration: BoxDecoration( color: Colors.blue, borderRadius: BorderRadius.circular(_controller.value * 50), ), ), ); }, ), ), ); } } // 往返动画 class RepeatingAnimationReverse extends StatefulWidget { const RepeatingAnimationReverse({super.key}); @override State<RepeatingAnimationReverse> createState() => _RepeatingAnimationReverseState(); } class _RepeatingAnimationReverseState extends State<RepeatingAnimationReverse> with SingleTickerProviderStateMixin { late AnimationController _controller; @override void initState() { super.initState(); _controller = AnimationController( duration: const Duration(seconds: 1), vsync: this, ); // 往返动画 _controller.repeat(reverse: true); } @override void dispose() { _controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('往返动画')), body: Center( child: AnimatedBuilder( animation: _controller, builder: (context, child) { return Transform.scale( scale: 0.5 + _controller.value, child: Container( width: 100, height: 100, color: Colors.blue, ), ); }, ), ), ); } }

2. 动画曲线

class CurvedAnimationExample extends StatefulWidget { const CurvedAnimationExample({super.key}); @override State<CurvedAnimationExample> createState() => _CurvedAnimationExampleState(); } class _CurvedAnimationExampleState extends State<CurvedAnimationExample> with SingleTickerProviderStateMixin { late AnimationController _controller; late Animation<double> _animation; @override void initState() { super.initState(); _controller = AnimationController( duration: const Duration(seconds: 2), vsync: this, ); // 使用曲线 _animation = CurvedAnimation( parent: _controller, curve: Curves.easeInOut, ); } @override void dispose() { _controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('动画曲线')), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ AnimatedBuilder( animation: _animation, builder: (context, child) { return Transform.translate( offset: Offset(0, -100 * _animation.value), child: Container( width: 100, height: 100, color: Colors.blue, ), ); }, ), const SizedBox(height: 20), ElevatedButton( onPressed: () { if (_controller.status == AnimationStatus.completed) { _controller.reverse(); } else { _controller.forward(); } }, child: const Text('切换'), ), ], ), ), ); } } // 自定义曲线 class CustomCurveExample extends StatefulWidget { const CustomCurveExample({super.key}); @override State<CustomCurveExample> createState() => _CustomCurveExampleState(); } class _CustomCurveExampleState extends State<CustomCurveExample> with SingleTickerProviderStateMixin { late AnimationController _controller; late Animation<double> _animation; @override void initState() { super.initState(); _controller = AnimationController( duration: const Duration(seconds: 2), vsync: this, ); // 自定义曲线 _animation = CurvedAnimation( parent: _controller, curve: _BounceCurve(), ); _controller.forward(); } @override void dispose() { _controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('自定义曲线')), body: Center( child: AnimatedBuilder( animation: _animation, builder: (context, child) { return Transform.translate( offset: Offset(0, -150 * _animation.value), child: Container( width: 50, height: 50, decoration: const BoxDecoration( color: Colors.blue, shape: BoxShape.circle, ), ), ); }, ), ), ); } } class _BounceCurve extends Curve { @override double transform(double t) { if (t < 0.5) { return 4 * t * t; } else { return 1 - 4 * (1 - t) * (1 - t); } } }

3. Tween 动画

class TweenAnimationExample extends StatefulWidget { const TweenAnimationExample({super.key}); @override State<TweenAnimationExample> createState() => _TweenAnimationExampleState(); } class _TweenAnimationExampleState extends State<TweenAnimationExample> with SingleTickerProviderStateMixin { late AnimationController _controller; late Animation<double> _sizeAnimation; late Animation<Color?> _colorAnimation; late Animation<Offset> _offsetAnimation; @override void initState() { super.initState(); _controller = AnimationController( duration: const Duration(seconds: 2), vsync: this, ); // 尺寸 Tween _sizeAnimation = Tween<double>(begin: 50, end: 200).animate( CurvedAnimation(parent: _controller, curve: Curves.easeInOut), ); // 颜色 Tween _colorAnimation = ColorTween(begin: Colors.blue, end: Colors.red).animate( CurvedAnimation(parent: _controller, curve: Curves.easeInOut), ); // 位置 Tween _offsetAnimation = Tween<Offset>( begin: const Offset(-1, 0), end: const Offset(1, 0), ).animate( CurvedAnimation(parent: _controller, curve: Curves.easeInOut), ); _controller.repeat(reverse: true); } @override void dispose() { _controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('Tween 动画')), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ // 尺寸动画 AnimatedBuilder( animation: _sizeAnimation, builder: (context, child) { return Container( width: _sizeAnimation.value, height: _sizeAnimation.value, color: _colorAnimation.value, ); }, ), const SizedBox(height: 20), // 位置动画 SlideTransition( position: _offsetAnimation, child: Container( width: 50, height: 50, color: Colors.green, ), ), ], ), ), ); } }

四、实战案例

1. 加载动画

class LoadingAnimation extends StatefulWidget { const LoadingAnimation({super.key}); @override State<LoadingAnimation> createState() => _LoadingAnimationState(); } class _LoadingAnimationState extends State<LoadingAnimation> with SingleTickerProviderStateMixin { late AnimationController _controller; late Animation<double> _rotationAnimation; @override void initState() { super.initState(); _controller = AnimationController( duration: const Duration(seconds: 2), vsync: this, ); _rotationAnimation = Tween<double>(begin: 0, end: 1).animate( CurvedAnimation(parent: _controller, curve: Curves.linear), ); _controller.repeat(); } @override void dispose() { _controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('加载动画')), body: Center( child: AnimatedBuilder( animation: _rotationAnimation, builder: (context, child) { return Transform.rotate( angle: _rotationAnimation.value * 2 * 3.14159, child: Stack( alignment: Alignment.center, children: [ Container( width: 100, height: 100, decoration: BoxDecoration( shape: BoxShape.circle, border: Border.all( color: Colors.blue, width: 4, ), ), ), Positioned( top: 0, child: Container( width: 20, height: 20, decoration: const BoxDecoration( color: Colors.blue, shape: BoxShape.circle, ), ), ), ], ), ); }, ), ), ); } }

2. 卡片翻转动画

class CardFlipAnimation extends StatefulWidget { const CardFlipAnimation({super.key}); @override State<CardFlipAnimation> createState() => _CardFlipAnimationState(); } class _CardFlipAnimationState extends State<CardFlipAnimation> with SingleTickerProviderStateMixin { late AnimationController _controller; late Animation<double> _animation; bool _isFront = true; @override void initState() { super.initState(); _controller = AnimationController( duration: const Duration(milliseconds: 600), vsync: this, ); _animation = Tween<double>(begin: 0, end: 1).animate( CurvedAnimation(parent: _controller, curve: Curves.easeInOut), ); } @override void dispose() { _controller.dispose(); super.dispose(); } void _flipCard() { if (_isFront) { _controller.forward(); } else { _controller.reverse(); } _isFront = !_isFront; } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('卡片翻转动画')), body: Center( child: GestureDetector( onTap: _flipCard, child: AnimatedBuilder( animation: _animation, builder: (context, child) { final angle = _animation.value * 3.14159; final transform = Matrix4.identity() ..setEntry(3, 2, 0.001) ..rotateY(angle); return Transform( transform: transform, alignment: Alignment.center, child: Container( width: 200, height: 300, decoration: BoxDecoration( color: _animation.value < 0.5 ? Colors.blue : Colors.red, borderRadius: BorderRadius.circular(16), boxShadow: [ BoxShadow( color: Colors.black.withOpacity(0.2), blurRadius: 10, offset: const Offset(0, 5), ), ], ), child: Center( child: Text( _animation.value < 0.5 ? '正面' : '背面', style: const TextStyle( color: Colors.white, fontSize: 24, fontWeight: FontWeight.bold, ), ), ), ), ); }, ), ), ), ); } }

3. 下拉刷新动画

class PullToRefreshAnimation extends StatefulWidget { const PullToRefreshAnimation({super.key}); @override State<PullToRefreshAnimation> createState() => _PullToRefreshAnimationState(); } class _PullToRefreshAnimationState extends State<PullToRefreshAnimation> with SingleTickerProviderStateMixin { late AnimationController _controller; late Animation<double> _scaleAnimation; late Animation<double> _rotationAnimation; bool _isRefreshing = false; @override void initState() { super.initState(); _controller = AnimationController( duration: const Duration(seconds: 1), vsync: this, ); _scaleAnimation = Tween<double>(begin: 0.5, end: 1).animate( CurvedAnimation(parent: _controller, curve: Curves.easeOut), ); _rotationAnimation = Tween<double>(begin: 0, end: 1).animate( CurvedAnimation(parent: _controller, curve: Curves.linear), ); } @override void dispose() { _controller.dispose(); super.dispose(); } Future<void> _refresh() async { setState(() { _isRefreshing = true; }); _controller.repeat(); // 模拟网络请求 await Future.delayed(const Duration(seconds: 2)); _controller.stop(); setState(() { _isRefreshing = false; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('下拉刷新动画')), body: RefreshIndicator( onRefresh: _refresh, child: ListView.builder( itemCount: 20, itemBuilder: (context, index) { return ListTile( title: Text('Item $index'), leading: _isRefreshing ? AnimatedBuilder( animation: _rotationAnimation, builder: (context, child) { return Transform.rotate( angle: _rotationAnimation.value * 2 * 3.14159, child: const Icon(Icons.refresh), ); }, ) : const Icon(Icons.list), ); }, ), ), ); } }

4. 按钮波纹动画

class RippleButtonAnimation extends StatefulWidget { const RippleButtonAnimation({super.key}); @override State<RippleButtonAnimation> createState() => _RippleButtonAnimationState(); } class _RippleButtonAnimationState extends State<RippleButtonAnimation> with SingleTickerProviderStateMixin { late AnimationController _controller; late Animation<double> _scaleAnimation; late Animation<double> _fadeAnimation; @override void initState() { super.initState(); _controller = AnimationController( duration: const Duration(milliseconds: 500), vsync: this, ); _scaleAnimation = Tween<double>(begin: 0, end: 1).animate( CurvedAnimation(parent: _controller, curve: Curves.easeOut), ); _fadeAnimation = Tween<double>(begin: 1, end: 0).animate( CurvedAnimation(parent: _controller, curve: Curves.easeOut), ); } @override void dispose() { _controller.dispose(); super.dispose(); } void _onTap() { _controller.forward(from: 0); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('按钮波纹动画')), body: Center( child: GestureDetector( onTap: _onTap, child: Container( width: 200, height: 60, decoration: BoxDecoration( color: Colors.blue, borderRadius: BorderRadius.circular(30), ), child: Stack( alignment: Alignment.center, children: [ AnimatedBuilder( animation: _controller, builder: (context, child) { return Transform.scale( scale: _scaleAnimation.value, child: Opacity( opacity: _fadeAnimation.value, child: Container( width: 200, height: 60, decoration: BoxDecoration( color: Colors.white.withOpacity(0.3), borderRadius: BorderRadius.circular(30), ), ), ), ); }, ), const Text( '点击我', style: TextStyle( color: Colors.white, fontSize: 18, fontWeight: FontWeight.bold, ), ), ], ), ), ), ), ); } }

5. 页面转场动画

class PageTransitionAnimation extends StatefulWidget { const PageTransitionAnimation({super.key}); @override State<PageTransitionAnimation> createState() => _PageTransitionAnimationState(); } class _PageTransitionAnimationState extends State<PageTransitionAnimation> with SingleTickerProviderStateMixin { late AnimationController _controller; late Animation<double> _scaleAnimation; late Animation<Offset> _slideAnimation; @override void initState() { super.initState(); _controller = AnimationController( duration: const Duration(milliseconds: 500), vsync: this, ); _scaleAnimation = Tween<double>(begin: 0.8, end: 1).animate( CurvedAnimation(parent: _controller, curve: Curves.easeOut), ); _slideAnimation = Tween<Offset>( begin: const Offset(0, 0.1), end: const Offset(0, 0), ).animate( CurvedAnimation(parent: _controller, curve: Curves.easeOut), ); _controller.forward(); } @override void dispose() { _controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('页面转场动画')), body: AnimatedBuilder( animation: _controller, builder: (context, child) { return Transform.scale( scale: _scaleAnimation.value, child: SlideTransition( position: _slideAnimation, child: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Container( width: 200, height: 200, decoration: BoxDecoration( color: Colors.blue, borderRadius: BorderRadius.circular(16), ), child: const Center( child: Text( '新页面', style: TextStyle( color: Colors.white, fontSize: 24, fontWeight: FontWeight.bold, ), ), ), ), const SizedBox(height: 20), ElevatedButton( onPressed: () { _controller.reverse(); Future.delayed(const Duration(milliseconds: 500), () { Navigator.pop(context); }); }, child: const Text('返回'), ), ], ), ), ), ); }, ), ); } }

五、性能优化

及时释放资源：在 dispose 中释放动画控制器
使用 AnimatedBuilder：避免不必要的重建
合理设置动画时长：一般在 200-500ms 之间
避免复杂动画：在低性能设备上简化动画
使用硬件加速：结合 Transform 使用

// 性能优化 class OptimizedAnimation extends StatefulWidget { const OptimizedAnimation({super.key}); @override State<OptimizedAnimation> createState() => _OptimizedAnimationState(); } class _OptimizedAnimationState extends State<OptimizedAnimation> with SingleTickerProviderStateMixin { late AnimationController _controller; late Animation<double> _animation; @override void initState() { super.initState(); _controller = AnimationController( duration: const Duration(milliseconds: 300), vsync: this, ); _animation = CurvedAnimation( parent: _controller, curve: Curves.easeInOut, ); } @override void dispose() { _controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('性能优化')), body: Center( // 使用 AnimatedBuilder 优化性能 child: AnimatedBuilder( animation: _animation, builder: (context, child) { return Transform.translate( offset: Offset(0, -100 * _animation.value), child: child, // 重用 child ); }, // 静态部分作为 child 传入 child: Container( width: 100, height: 100, color: Colors.blue, ), ), ), ); } }