AnimationController动画基础_Flutter在鸿蒙平台实现流畅UI动画

作者付文龙红目香薰仓库地址https://gitcode.com/feng8403000/FlutterfromBeginnertoAdvancedForHarmonyOS.git联系邮箱372699828qq.com概述Flutter动画系统是一个强大的动画框架它基于Animation和AnimationController实现流畅的UI动画效果。Flutter动画系统的核心特点声明式动画通过状态驱动动画无需手动管理帧更新高性能基于GPU渲染60fps流畅动画灵活支持各种动画类型和曲线组合性可以组合多个动画实现复杂效果动画的重要性用户体验提升动画使界面更加生动和流畅交互反馈提供视觉反馈增强用户操作感知引导用户通过动画引导用户注意力品牌个性独特的动画风格可以体现品牌特色核心概念AnimationAnimation是Flutter动画的核心抽象类它代表一个随时间变化的值。动画的值可以是任意类型double、Color、Offset等。AnimationControllerAnimationController是Animation的子类用于控制动画的播放、暂停、反向、重复等操作。TweenTween用于定义数值的插值范围将动画的进度值0-1映射到实际的数值范围。CurvedAnimationCurvedAnimation用于添加曲线效果使动画更加自然。AnimatedBuilderAnimatedBuilder是一个Widget用于监听动画变化并重建UI。实现步骤第一步创建AnimationController首先创建一个AnimationController需要指定vsync和duration。classAnimationDemoextendsStatefulWidget{constAnimationDemo({super.key});overrideStateAnimationDemocreateState()_AnimationDemoState();}class_AnimationDemoStateextendsStateAnimationDemowithSingleTickerProviderStateMixin{lateAnimationController_controller;overridevoidinitState(){super.initState();_controllerAnimationController(vsync:this,duration:constDuration(seconds:2),);}overridevoiddispose(){_controller.dispose();super.dispose();}overrideWidgetbuild(BuildContextcontext){returnScaffold(body:Center(child:AnimatedBuilder(animation:_controller,builder:(context,child){returnContainer(width:_controller.value*300,height:_controller.value*300,color:Colors.blue,);},),),floatingActionButton:FloatingActionButton(onPressed:()_controller.forward(),child:constIcon(Icons.play_arrow),),);}}第二步使用Tween插值使用Tween定义数值的插值范围。// 数值插值AnimationdoublesizeAnimationTweendouble(begin:0,end:300).animate(_controller);// 颜色插值AnimationColorcolorAnimationColorTween(begin:Colors.blue,end:Colors.red,).animate(_controller);// 边框插值AnimationBorderRadiusborderRadiusAnimationBorderRadiusTween(begin:BorderRadius.circular(0),end:BorderRadius.circular(50),).animate(_controller);// 位置插值AnimationOffsetoffsetAnimationTweenOffset(begin:constOffset(0,0),end:constOffset(100,100),).animate(_controller);第三步使用CurvedAnimation使用CurvedAnimation添加曲线效果。AnimationdoublecurvedAnimationCurvedAnimation(parent:_controller,curve:Curves.easeInOut,);AnimationdoublesizeAnimationTweendouble(begin:0,end:300).animate(curvedAnimation);第四步在AnimatedBuilder中使用动画AnimatedBuilder(animation:_animation,builder:(context,child){returnContainer(width:_animation.value,height:_animation.value,color:Colors.blue,);},)AnimationController方法基本控制方法_controller.forward();// 正向播放从0到1_controller.reverse();// 反向播放从1到0_controller.reset();// 重置到初始状态值为0_controller.repeat();// 重复播放_controller.stop();// 停止播放_controller.animateTo(0.5);// 动画到指定值0-1_controller.animateBack(0.5);// 反向动画到指定值属性设置_controller.durationconstDuration(seconds:1);// 设置动画时长_controller.reverseDurationconstDuration(seconds:1);// 设置反向时长_controller.value0.5;// 设置当前值_controller.lowerBound0;// 设置下限_controller.upperBound1;// 设置上限_controller.isAnimating;// 是否正在播放_controller.status;// 当前状态动画状态AnimationStatus.dismissed;// 动画在起始位置值为0AnimationStatus.forward;// 动画正向播放中AnimationStatus.reverse;// 动画反向播放中AnimationStatus.completed;// 动画在结束位置值为1监听动画监听值变化_controller.addListener((){setState((){});});监听状态变化_controller.addStatusListener((status){if(statusAnimationStatus.completed){_controller.reverse();}elseif(statusAnimationStatus.dismissed){_controller.forward();}});常用曲线Flutter提供了多种内置曲线使动画更加自然。曲线名称效果适用场景Curves.linear线性变化匀速动画Curves.ease缓入开始缓慢然后加速Curves.easeIn缓入开始缓慢Curves.easeOut缓出结束缓慢Curves.easeInOut缓入缓出开始和结束都缓慢Curves.bounceIn弹跳进入弹跳效果Curves.bounceOut弹跳退出弹跳效果Curves.elasticIn弹性进入弹性效果Curves.elasticOut弹性退出弹性效果Curves.fastOutSlowIn快速开始缓慢结束Material Design标准组合动画多个动画同步classComboAnimationextendsStatefulWidget{constComboAnimation({super.key});overrideStateComboAnimationcreateState()_ComboAnimationState();}class_ComboAnimationStateextendsStateComboAnimationwithSingleTickerProviderStateMixin{lateAnimationController_controller;lateAnimationdouble_sizeAnimation;lateAnimationColor_colorAnimation;lateAnimationdouble_opacityAnimation;overridevoidinitState(){super.initState();_controllerAnimationController(vsync:this,duration:constDuration(seconds:2),);_sizeAnimationTweendouble(begin:50,end:200).animate(_controller);_colorAnimationColorTween(begin:Colors.blue,end:Colors.red).animate(_controller);_opacityAnimationTweendouble(begin:0.3,end:1).animate(_controller);_controller.repeat(reverse:true);}overridevoiddispose(){_controller.dispose();super.dispose();}overrideWidgetbuild(BuildContextcontext){returnAnimatedBuilder(animation:_controller,builder:(context,child){returnOpacity(opacity:_opacityAnimation.value,child:Container(width:_sizeAnimation.value,height:_sizeAnimation.value,color:_colorAnimation.value,borderRadius:BorderRadius.circular(_sizeAnimation.value/4),),);},);}}动画延迟AnimationdoubledelayedAnimationTweendouble(begin:0,end:100).animate(CurvedAnimation(parent:_controller,curve:constInterval(0.5,1.0),),);动画性能优化使用AnimatedBuilderAnimatedBuilder只会重建builder中的内容不会重建整个Widget树。AnimatedBuilder(animation:_animation,builder:(context,child){returnContainer(width:_animation.value,height:_animation.value,child:child,);},child:constText(Hello),)使用AnimatedWidgetAnimatedWidget是一个抽象类可以继承它创建自定义动画Widget。classAnimatedContainerextendsAnimatedWidget{constAnimatedContainer({super.key,requiredAnimationdoubleanimation,}):super(listenable:animation);overrideWidgetbuild(BuildContextcontext){finalanimationlistenableasAnimationdouble;returnContainer(width:animation.value,height:animation.value,color:Colors.blue,);}}使用AnimatedOpacity、AnimatedContainer等Flutter提供了许多预定义的动画Widget。AnimatedOpacity(opacity:_opacity,duration:constDuration(seconds:1),child:constText(Hello),)AnimatedContainer(width:_width,height:_height,color:_color,duration:constDuration(seconds:1),)AnimatedPositioned(left:_left,top:_top,duration:constDuration(seconds:1),child:constText(Hello),)Hero动画Hero动画用于页面间的共享元素过渡。// 源页面Hero(tag:image,child:Image.network(https://example.com/image.jpg),)// 目标页面Hero(tag:image,child:Image.network(https://example.com/image.jpg),)自定义曲线创建自定义曲线classCustomCurveextendsCurve{overridedoubletransform(double t){returnt*t;}}AnimationdoublecustomAnimationCurvedAnimation(parent:_controller,curve:CustomCurve(),);使用曲线组合AnimationdoublecombinedAnimationCurvedAnimation(parent:_controller,curve:Curves.easeIn.flipped,);完整示例弹跳按钮动画importpackage:flutter/material.dart;voidmain(){runApp(constMaterialApp(home:BounceButtonDemo()));}classBounceButtonDemoextendsStatefulWidget{constBounceButtonDemo({super.key});overrideStateBounceButtonDemocreateState()_BounceButtonDemoState();}class_BounceButtonDemoStateextendsStateBounceButtonDemowithSingleTickerProviderStateMixin{lateAnimationController_controller;lateAnimationdouble_scaleAnimation;lateAnimationdouble_opacityAnimation;overridevoidinitState(){super.initState();_controllerAnimationController(vsync:this,duration:constDuration(milliseconds:500),);_scaleAnimationTweendouble(begin:1,end:0.8).animate(CurvedAnimation(parent:_controller,curve:Curves.bounceIn,),);_opacityAnimationTweendouble(begin:1,end:0.5).animate(_controller);}overridevoiddispose(){_controller.dispose();super.dispose();}void_onPressed(){_controller.forward().then((_){_controller.reverse();});}overrideWidgetbuild(BuildContextcontext){returnScaffold(appBar:AppBar(title:constText(弹跳按钮动画)),body:Center(child:AnimatedBuilder(animation:_controller,builder:(context,child){returnTransform.scale(scale:_scaleAnimation.value,child:Opacity(opacity:_opacityAnimation.value,child:ElevatedButton(onPressed:_onPressed,style:ElevatedButton.styleFrom(padding:constEdgeInsets.symmetric(horizontal:40,vertical:16),textStyle:constTextStyle(fontSize:20),),child:constText(点击弹跳),),),);},),),);}}最佳实践1. 使用SingleTickerProviderStateMixinSingleTickerProviderStateMixin提供vsync确保动画在Widget可见时才运行。class_MyWidgetStateextendsStateMyWidgetwithSingleTickerProviderStateMixin{lateAnimationController_controller;}2. 在dispose中释放资源overridevoiddispose(){_controller.dispose();super.dispose();}3. 使用AnimatedBuilder避免不必要的重建AnimatedBuilder(animation:_animation,builder:(context,child){returnContainer(width:_animation.value);},child:constText(不变的内容),)4. 优先使用预定义的动画WidgetAnimatedOpacity(...)AnimatedContainer(...)AnimatedPositioned(...)5. 使用曲线使动画更自然CurvedAnimation(parent:_controller,curve:Curves.easeInOut,)6. 组合多个动画时使用同一个Controller_sizeAnimationTween(begin:50,end:200).animate(_controller);_colorAnimationColorTween(begin:Colors.blue,end:Colors.red).animate(_controller);总结Flutter动画系统是一个强大而灵活的动画框架通过AnimationController、Tween、CurvedAnimation和AnimatedBuilder等组件可以实现各种复杂的动画效果。核心要点使用AnimationController控制动画的播放、暂停、反向等使用Tween定义数值的插值范围使用CurvedAnimation添加曲线效果使用AnimatedBuilder监听动画变化并重建UI在dispose中释放AnimationController资源通过合理使用Flutter动画系统可以创建出流畅、自然的用户界面提升用户体验。