在移动应用开发中流畅的动画是提升用户体验的关键。Flutter官方推出的animations动画库以Material Design规范为核心提供了开箱即用的高级过渡效果。无论是页面跳转、元素切换还是细节交互都能通过简洁的API实现专业级动画效果。本文将通过代码实战效果演示带你玩转这一宝藏库为什么选择animations库官方出品Flutter团队维护兼容性有保障开箱即用- 封装复杂动画逻辑开发者专注业务高性能- 基于物理的动画曲线过渡自然流畅Material Design规范- 完美遵循谷歌设计语言安装flutter pubaddanimations四大核心动画类型解析Container transform 容器转换动画适用场景元素形态变化的无缝衔接如卡片展开为详情页。特点通过容器形状、尺寸的平滑过渡强化用户操作的连续性。Shared axis 共享轴模式适用场景导航切换、同层级页面跳转如底部Tab切换。特点通过X/Y/Z轴的同步运动营造空间逻辑一致性支持horizontal、vertical、scaled三种模式。Fade through淡入淡出穿透适用场景无强关联元素的过渡如列表刷新。特点当前元素渐隐→新元素渐显柔和且避免视觉跳跃。Fade 简单渐隐​适用场景弹窗出现/消失、全屏加载借用官方动画截图来展示Fade和Fade through示例的效果Container transform和Shared axis自己用代码实现来展示。Fade through效果Fade效果详细情况查看官方示例和描述实战案例案例一Container transform效果代码// 入口页面classHomePageextendsStatelessWidget{constHomePage({super.key});overrideWidgetbuild(BuildContextcontext){returnScaffold(appBar:AppBar(title:Text(HomePage)),body:Column(children:[// OpenContainerT 下一个页面pop 返回的数据OpenContainerString(transitionType:ContainerTransitionType.fade,openBuilder:(BuildContextcontext,VoidCallback_){returnSecondPage();},onClosed:(data){debugPrint(data $data);},tappable:false,closedBuilder:(BuildContextcontext,VoidCallbackaction){returnTextButton(onPressed:(){action();},child:Text(jump fade detail),);},),],),);}}// SecondPageimportpackage:flutter/material.dart;classSecondPageextendsStatelessWidget{constSecondPage({super.key});overrideWidgetbuild(BuildContextcontext){returnScaffold(appBar:AppBar(title:Text(SecondPage),),body:Center(child:TextButton(onPressed:(){// Navigator.of(context).pop();Navigator.pop(context,chanson);},child:Text(back)),));}}案例二Shared axis导航SharedAxisTransition的可选方向有vertical、horizontal、scaled案例效果代码// AxisTransitionPageimportpackage:animations/animations.dart;importpackage:animations_demo/test/detail_show_page.dart;importpackage:flutter/material.dart;classAxisTransitionPageextendsStatefulWidget{constAxisTransitionPage({super.key});overrideStateAxisTransitionPagecreateState()_AxisTransitionPageState();}class_AxisTransitionPageStateextendsStateAxisTransitionPage{bool _isShowPagefalse;overrideWidgetbuild(BuildContextcontext){returnScaffold(appBar:AppBar(title:Text(AxisTransitionPage),),body:PageTransitionSwitcher(reverse:!_isShowPage,transitionBuilder:(Widgetchild,Animationdoubleanimation,AnimationdoublesecondaryAnimation,){returnSharedAxisTransition(animation:animation,secondaryAnimation:secondaryAnimation,transitionType:SharedAxisTransitionType.horizontal,child:child,);},child:!_isShowPage?TextButton(onPressed:(){setState((){_isShowPagetrue;});},child:Container(color:Colors.white,width:double.infinity,height:double.infinity,child:Center(child:Text(first page go to next Page),),)):DetailShowPage(callback:(){setState((){_isShowPagefalse;});},),),);}}// DetailShowPageimportpackage:flutter/material.dart;classDetailShowPageextendsStatelessWidget{constDetailShowPage({super.key,requiredthis.callback});finalVoidCallbackcallback;overrideWidgetbuild(BuildContextcontext){returnScaffold(body:Container(color:Colors.red,width:double.infinity,height:double.infinity,child:TextButton(onPressed:(){callback();},child:Text(DetailShowPage)),),);}}以上便是该库的一点使用心得了。如何有项目开发方面的需求欢迎来聊。