《HarmonyOS应用开发基础》 课件知识点2-14-3 转场动画.pptx

转场动画

0102组件内的转场动画页面间的转场动画

组件内的转场动画概述组件内转场主要通过transition属性配置转场参数，在组件插入和删除时显示过渡动效，主要用于容器组件中的子组件插入和删除时，提升用户体验（需要配合animateTo才能生效，动效时长、曲线、延时跟随animateTo中的配置）。如右图所示。

组件内的转场动画属性名称类型描述transitionTransitionOptions所有参数均为可选参数，详细描述见TransitionOptions参数说明。组件的转场动画属性说明：

组件内的转场动画属性TransitionOptions参数说明：参数名参数类型必填参数描述typeTransitionType否默认包括组件新增和删除。默认值：TransitionType.All说明：不指定Type时说明插入删除使用同一种效果。opacitynumber否设置组件转场时的透明度效果，为插入时起点和删除时终点的值。默认值：1translate{x?:number|string,y?:number|string,z?:number|string}否设置组件转场时的平移效果，为插入时起点和删除时终点的值。-x：横向的平移距离。-y：纵向的平移距离。-z：竖向的平移距离。

组件内的转场动画属性TransitionOptions参数说明：参数名参数类型必填参数描述scale{x?:number,y?:number,z?:number,centerX?:number|string,centerY?:number|string}否设置组件转场时的缩放效果，为插入时起点和删除时终点的值。-x：横向放大倍数（或缩小比例）。-y：纵向放大倍数（或缩小比例）。-z：竖向放大倍数（或缩小比例）。-centerX、centerY指缩放中心点，centerX和centerY默认值是50%。-中心点为0时，默认的是组件的左上角。rotate{x?:number,y?:number,z?:number,angle?:number|string,centerX?:number|string,centerY?:number|string}否设置组件转场时的旋转效果，为插入时起点和删除时终点的值。-x：横向的旋转向量。-y：纵向的旋转向量。-z：竖向的旋转向量。-centerX,centerY指旋转中心点，centerX和centerY默认值是50%。-中心点为（0，0）时，默认的是组件的左上角。

组件内的转场动画使用示例@Entry@Componentstruct?TransitionExample?{??@State?flag:?boolean?=?true??@State?show:?string?=?hide??build()?{????Column()?{??????Button(this.show).width(80).height(30).margin(30)????????.onClick(()?=?{??????????//?点击Button控制Image的显示和消失??????????animateTo({?duration:?3000?},?()?=?{????????????if?(this.flag)?{??????????????this.show?=?show????????????}?else?{??????????????this.show?=?hide????????????}????????????this.flag?=?!this.flag??????????})????????})??????if?(this.flag)?{????????//?Image的显示和消失配置为不同的过渡效果????????Image($r(app.media.testImg)).width(300).height(300)??????????.transition({?type:?TransitionType.Insert,?scale:?{?x:?0,?y:?1.0?}?})??????????.transition({?type:?TransitionType.Delete,?rotate:?{?angle:?180?}?})??????}????}.width(100%)??}}

页面间的转场动画概述页面转场动画是指页面在打开或者关闭时添加的动画效果，需要在全局pageTransition方法内配置页面入场和页面退场时的自定义转场动效。如右图所示。

页面间的转场动画全局方法名称参数参数描述PageTransitionEnter{type?: