Flutter 高级动画从基础到精通的完整指南CSS 是流动的韵律JS 是叙事的节奏。而在 Flutter 的世界里动画是用户体验的灵魂是让界面活起来的魔法。一、动画的力量动画在 Flutter 中不仅仅是装饰更是用户体验的重要组成部分。一个好的动画可以引导用户注意力突出重要信息提供反馈响应用户操作增强情感连接创造愉悦的使用体验提升品牌价值建立独特的视觉识别记住像素不能偏差 1px动画的每一帧都应该精确控制。二、Flutter 动画系统2.1 动画基础// 基本动画结构 class AnimatedWidgetExample extends StatefulWidget { override _AnimatedWidgetExampleState createState() _AnimatedWidgetExampleState(); } class _AnimatedWidgetExampleState extends StateAnimatedWidgetExample with SingleTickerProviderStateMixin { late AnimationController _controller; late Animationdouble _animation; override void initState() { super.initState(); // 创建动画控制器 _controller AnimationController( duration: const Duration(seconds: 2), vsync: this, ); // 创建动画 _animation Tweendouble(begin: 0, end: 1).animate( CurvedAnimation(parent: _controller, curve: Curves.easeInOut), )..addStatusListener((status) { if (status AnimationStatus.completed) { _controller.reverse(); } else if (status AnimationStatus.dismissed) { _controller.forward(); } }); // 开始动画 _controller.forward(); } override void dispose() { _controller.dispose(); super.dispose(); } override Widget build(BuildContext context) { return Scaffold( body: Center( child: AnimatedBuilder( animation: _animation, builder: (context, child) { return Container( width: 200 _animation.value * 100, height: 200, decoration: BoxDecoration( color: Colors.blue, borderRadius: BorderRadius.circular( _animation.value * 20, ), ), ); }, ), ), ); } }2.2 动画曲线详解// 常用动画曲线 class CurvesDemo extends StatelessWidget { final ListMapString, dynamic curves [ {name: Linear, curve: Curves.linear}, {name: Ease In, curve: Curves.easeIn}, {name: Ease Out, curve: Curves.easeOut}, {name: Ease In Out, curve: Curves.easeInOut}, {name: Bounce In, curve: Curves.bounceIn}, {name: Bounce Out, curve: Curves.bounceOut}, {name: Elastic In, curve: Curves.elasticIn}, {name: Elastic Out, curve: Curves.elasticOut}, {name: Fast Out Slow In, curve: Curves.fastOutSlowIn}, {name: Slow Middle, curve: Curves.slowMiddle}, ]; override Widget build(BuildContext context) { return Scaffold( body: ListView.builder( itemCount: curves.length, itemBuilder: (context, index) { return CurveDemoItem( name: curves[index][name], curve: curves[index][curve], ); }, ), ); } } class CurveDemoItem extends StatefulWidget { final String name;
Flutter 高级动画：从基础到精通的完整指南
Flutter 高级动画从基础到精通的完整指南CSS 是流动的韵律JS 是叙事的节奏。而在 Flutter 的世界里动画是用户体验的灵魂是让界面活起来的魔法。一、动画的力量动画在 Flutter 中不仅仅是装饰更是用户体验的重要组成部分。一个好的动画可以引导用户注意力突出重要信息提供反馈响应用户操作增强情感连接创造愉悦的使用体验提升品牌价值建立独特的视觉识别记住像素不能偏差 1px动画的每一帧都应该精确控制。二、Flutter 动画系统2.1 动画基础// 基本动画结构 class AnimatedWidgetExample extends StatefulWidget { override _AnimatedWidgetExampleState createState() _AnimatedWidgetExampleState(); } class _AnimatedWidgetExampleState extends StateAnimatedWidgetExample with SingleTickerProviderStateMixin { late AnimationController _controller; late Animationdouble _animation; override void initState() { super.initState(); // 创建动画控制器 _controller AnimationController( duration: const Duration(seconds: 2), vsync: this, ); // 创建动画 _animation Tweendouble(begin: 0, end: 1).animate( CurvedAnimation(parent: _controller, curve: Curves.easeInOut), )..addStatusListener((status) { if (status AnimationStatus.completed) { _controller.reverse(); } else if (status AnimationStatus.dismissed) { _controller.forward(); } }); // 开始动画 _controller.forward(); } override void dispose() { _controller.dispose(); super.dispose(); } override Widget build(BuildContext context) { return Scaffold( body: Center( child: AnimatedBuilder( animation: _animation, builder: (context, child) { return Container( width: 200 _animation.value * 100, height: 200, decoration: BoxDecoration( color: Colors.blue, borderRadius: BorderRadius.circular( _animation.value * 20, ), ), ); }, ), ), ); } }2.2 动画曲线详解// 常用动画曲线 class CurvesDemo extends StatelessWidget { final ListMapString, dynamic curves [ {name: Linear, curve: Curves.linear}, {name: Ease In, curve: Curves.easeIn}, {name: Ease Out, curve: Curves.easeOut}, {name: Ease In Out, curve: Curves.easeInOut}, {name: Bounce In, curve: Curves.bounceIn}, {name: Bounce Out, curve: Curves.bounceOut}, {name: Elastic In, curve: Curves.elasticIn}, {name: Elastic Out, curve: Curves.elasticOut}, {name: Fast Out Slow In, curve: Curves.fastOutSlowIn}, {name: Slow Middle, curve: Curves.slowMiddle}, ]; override Widget build(BuildContext context) { return Scaffold( body: ListView.builder( itemCount: curves.length, itemBuilder: (context, index) { return CurveDemoItem( name: curves[index][name], curve: curves[index][curve], ); }, ), ); } } class CurveDemoItem extends StatefulWidget { final String name;
