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

FlutterOpenHarmony动画效果实现指南

news 2026/5/11 16:47:20

前言

动画效果是提升应用用户体验的重要手段，它可以让界面交互更加流畅自然，引导用户注意力，提供操作反馈。在笔记应用中，页面切换、列表项展开、按钮点击等场景都可以通过动画来增强视觉效果。本文将详细介绍如何在Flutter和OpenHarmony平台上实现各种动画效果，帮助开发者为笔记应用打造精致的交互体验。

Flutter隐式动画

隐式动画是Flutter中最简单的动画实现方式。

classAnimatedNoteCardextendsStatefulWidget{@override_AnimatedNoteCardStatecreateState()=>_AnimatedNoteCardState();}class_AnimatedNoteCardStateextendsState<AnimatedNoteCard>{bool _isExpanded=false;@overrideWidgetbuild(BuildContext context){returnGestureDetector(onTap:()=>setState(()=>_isExpanded=!_isExpanded),child:AnimatedContainer(duration:Duration(milliseconds:300),curve:Curves.easeInOut,height:_isExpanded?200:80,padding:EdgeInsets.all(_isExpanded?20:12),decoration:BoxDecoration(color:_isExpanded?Colors.blue.shade50:Colors.white,borderRadius:BorderRadius.circular(_isExpanded?16:8),),child:Text('笔记内容'),),);}}

AnimatedContainer是Flutter提供的隐式动画容器，当其属性值发生变化时会自动执行动画过渡。duration设置动画时长，curve设置动画曲线。在这个例子中，点击卡片会切换_isExpanded状态，AnimatedContainer会自动对height、padding、color、borderRadius等属性进行动画过渡。这种方式非常简洁，开发者只需改变属性值，动画效果由框架自动处理。

AnimatedOpacity(opacity:_isVisible?1.0:0.0,duration:Duration(milliseconds:200),child:Text('淡入淡出文本'),)

AnimatedOpacity用于实现透明度动画，常用于元素的显示和隐藏。opacity属性在0.0到1.0之间变化，0.0表示完全透明，1.0表示完全不透明。这种淡入淡出效果比直接显示隐藏更加柔和，可以用于提示信息的显示、加载状态的切换等场景。

Flutter显式动画

显式动画提供了更精细的动画控制能力。

classPulseAnimationextendsStatefulWidget{@override_PulseAnimationStatecreateState()=>_PulseAnimationState();}class_PulseAnimationStateextendsState<PulseAnimation>withSingleTickerProviderStateMixin{late AnimationController _controller;late Animation<double>_scaleAnimation;@overridevoidinitState(){super.initState();_controller=AnimationController(duration:Duration(milliseconds:1000),vsync:this,);_scaleAnimation=Tween<double>(begin:1.0,end:1.2).animate(CurvedAnimation(parent:_controller,curve:Curves.easeInOut),);_controller.repeat(reverse:true);}@overridevoiddispose(){_controller.dispose();super.dispose();}}

显式动画需要使用AnimationController来控制动画的播放。SingleTickerProviderStateMixin提供了vsync参数所需的TickerProvider。Tween定义动画的起始值和结束值，CurvedAnimation添加动画曲线。repeat方法让动画循环播放，reverse参数设置为true使动画来回播放。dispose方法中必须释放AnimationController以避免内存泄漏。

@overrideWidgetbuild(BuildContext context){returnAnimatedBuilder(animation:_scaleAnimation,builder:(context,child){returnTransform.scale(scale:_scaleAnimation.value,child:child,);},child:Icon(Icons.favorite,color:Colors.red,size:48),);}

AnimatedBuilder监听动画值的变化并重建UI。builder回调在每一帧都会被调用，返回根据当前动画值构建的Widget。Transform.scale根据_scaleAnimation.value缩放子组件。child参数传递不需要重建的Widget，可以优化性能。这个例子实现了一个心跳脉冲效果，图标会持续放大缩小。

OpenHarmony动画实现

OpenHarmony通过animateTo和属性动画实现动画效果。

@Entry @Component struct AnimatedCard{@State cardHeight:number=80@State cardColor:string='#FFFFFF'@State isExpanded:boolean=falsebuild(){Column(){Text('笔记标题').fontSize(16)}.width('100%').height(this.cardHeight).backgroundColor(this.cardColor).borderRadius(8).onClick(()=>{this.toggleExpand()})}toggleExpand(){this.isExpanded=!this.isExpandedanimateTo({duration:300,curve:Curve.EaseInOut},()=>{this.cardHeight=this.isExpanded?200:80this.cardColor=this.isExpanded?'#E6F7FF':'#FFFFFF'})}}

OpenHarmony的animateTo函数用于执行属性动画。第一个参数是动画配置，包括duration时长和curve曲线。第二个参数是一个回调函数，在其中修改状态变量，这些变量的变化会以动画形式过渡。这种API设计非常直观，开发者只需指定目标值，动画过程由系统自动计算和执行。

@Entry @Component struct RotateAnimation{@State rotateAngle:number=0build(){Image($r('app.media.refresh_icon')).width(24).height(24).rotate({angle:this.rotateAngle}).onClick(()=>{this.startRotate()})}startRotate(){animateTo({duration:1000,curve:Curve.Linear,iterations:-1},()=>{this.rotateAngle=360})}}

rotate属性用于旋转组件，angle指定旋转角度。iterations设置为-1表示无限循环播放动画。Curve.Linear是线性曲线，使旋转速度保持恒定。这个例子实现了一个加载刷新图标的旋转动画，点击后图标会持续旋转，常用于表示加载状态。

页面转场动画

页面切换时的转场动画可以提升导航体验。

Navigator.push(context,PageRouteBuilder(pageBuilder:(context,animation,secondaryAnimation)=>NoteDetailPage(),transitionsBuilder:(context,animation,secondaryAnimation,child){returnSlideTransition(position:Tween<Offset>(begin:Offset(1.0,0.0),end:Offset.zero,).animate(CurvedAnimation(parent:animation,curve:Curves.easeOut,)),child:child,);},transitionDuration:Duration(milliseconds:300),),);

PageRouteBuilder允许自定义页面转场动画。transitionsBuilder回调接收animation参数，用于构建转场效果。SlideTransition实现滑动转场，Offset(1.0, 0.0)表示从右侧滑入，Offset.zero表示最终位置。CurvedAnimation添加缓动曲线使动画更自然。transitionDuration设置转场时长。这种自定义转场可以让页面切换更加流畅和有特色。

Hero(tag:'note_${note.id}',child:NoteCard(note:note),)

Hero动画用于在页面间共享元素的过渡效果。两个页面中具有相同tag的Hero组件会在页面切换时自动执行过渡动画。在笔记应用中，可以让笔记卡片在列表页和详情页之间平滑过渡，创造连贯的视觉体验。Hero动画是Material Design推荐的转场模式之一。

OpenHarmony页面转场

@Entry @Component struct NotesListPage{build(){// 页面内容}pageTransition(){PageTransitionEnter({duration:300,curve:Curve.EaseOut}).slide(SlideEffect.Right)PageTransitionExit({duration:300,curve:Curve.EaseIn}).slide(SlideEffect.Left)}}

OpenHarmony通过pageTransition方法定义页面转场动画。PageTransitionEnter配置进入动画，PageTransitionExit配置退出动画。slide方法设置滑动方向，SlideEffect.Right表示从右侧滑入。duration和curve分别设置时长和曲线。这种声明式的转场配置使得页面动画的定义非常清晰。

列表项动画

列表项的添加和删除可以添加动画效果。

AnimatedList(key:_listKey,initialItemCount:_notes.length,itemBuilder:(context,index,animation){returnSizeTransition(sizeFactor:animation,child:NoteListItem(note:_notes[index]),);},)

AnimatedList是支持动画的列表组件，当添加或删除项时会自动执行动画。itemBuilder的animation参数用于构建入场动画，SizeTransition根据动画值控制项的高度，实现展开效果。删除项时需要调用removeItem方法并提供退场动画构建器。这种动画列表可以让数据变化更加直观。