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

转场动画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?:RouteType,duration?:number,curve?:

Curvedelay?:number}设置当前页面的自定义入场动效。-type：页面转场效果生效的路由类型。默认值：RouteType.None。说明：没有匹配时使用系统默认的页面转场效果(根据设备可能会有差异)，如需禁用系统默认页面转场效果，可以指定duration为0。-duration：动画的时长，单位为毫秒。-curve：动画曲线。string类型的取值支持"ease"、"ease-in"、"ease-out"、"ease-in-out"、"extreme-deceleration"、"fast-out-linear-in"、"fast-out-slow-in"、"friction"、"linear"、"linear-out-slow-in"、"rhythm"、"sharp"、"smooth"。默认值：Curve.Linear-delay：动画延迟时长，单位为毫秒，默认不延迟播放。页面间的转场动画全局方法名称参数参数描述PageTransitionExit{type?:RouteType,duration?:number,curve?:

Curve,delay?:number}设置当前页面的自定义退场动效。-type：页面转场效果生效的路由类型。默认值：RouteType.None。说明：没有匹配时使用系统默认的页面转场效果(根据设备可能会有差异)，如需禁用系统默认页面转场效果，可以指定duration为0。-duration：动画的时长，单位为毫秒。-curve：动画曲线，string类型取值与PageTransitionEnter相同。默认值：Curve.Linear-delay：动画延迟时长，单位为毫秒，默认不延迟播放。页面组件的转场动画属性参数名参数类型必填参数描述lideSlideEffect否设置页面转场时的滑入滑出效果。默认值：SlideEffect.Righttranslate{x?:number|string,y?:number|string,z?:number|string}否设置页面转场时的平移效果，为入场时起点和退场时终点的值，和slide同时设置时默认生效slide。-x：横向的平移距离。-y：纵向的平移距离。-z：竖向的平移距离。scale{x?:number,y?:number,z?:number,centerX?:number|string,centerY?:number|string}否设置页面转场时的缩放效果，为入场时起点和退场时终点的值。-x：横向放大倍数（或缩小比例）。-y：纵向放大倍数（或缩小比例）。-z：竖向放大倍数（或缩小比例）。-centerX、centerY缩放中心点。-中心点为0时，默认的是组件的左上角。opacitynumber否设置入场的起点透明度值或者退场的终点透明度值。默认值：1页面间的转场动画使用示例@Entry@Componentstruct

PageTransitionExample1

{

@State

scale1:

number

=

1

@State

opacity1:

number

=

1

build()

{

Column()

{

Navigator({

target:

'pages/page1',

type:

NavigationType.Push

})

{

Image($r('app.media.bg1')).width('100%').height('100%')

//

图片存放在media文件夹下

}

}.scale({

x:

this.scale1

}).opacity(this.opacity1)

}

//

自定义方式1：完全自定义转场过程的效果

pageTransition()

{

PageTransitionEnter({

duration:

1200,

curve:

Curve.Linear

})

.onEnter((type:

RouteType,

progress:

number)

=>

{

this.scale1

=

1

this.opacity1

=

progress

})

//

进场过程中会逐帧触发onEnter回调，入参为动效的归一化进度(0%

--

100%)

PageTransitionExit({

duration:

1500,

curve:

Curve.Ease

})

.onExit((type:

RouteType,

progress:

number)

=>

{

this.scale1

=

1

-

progress

this.opacity1

=

1

})

//

退场过程中会逐帧触发onExit回调，入参为动效的归一化进度(0%

--

100%)

}}当前页面代码页面间的转场动画使用示例@Entry@Componentstruct

AExample

{

@State

scale2:

number

=

1

@State

opacity2:

number

=

1

build()

{

Column()

{

Navigator({

target:

'pages/PageTransitionExample1',

type:

NavigationType.Back

})

{

Image($r('app.media.bg2')).width('100%').height('100%')

//

图片存放在media文件夹下

}

}.width('100%').height('100%').scale({

x:

this.scale2

}).opacity(this.opacity2)

}

//

自定义方式1：完全自定义转场过程的效果

pageTransition()

{

PageTransitionEnter({

duration:

1200,

curve:

Curve.Linear

})

.onEnter((type:

RouteType,

progress:

number)

=>

{

this.scale2

=

1

this.opacity2

=

progress

})

//

进场过程中会逐帧触发onEnter回调，入参为动效的归一化进度(0%

--

100%)

PageTransitionExit({

duration:

1500,

curve:

Curve.Ease

})

.onExit((type:

RouteType,

progress:

number)

=>

{

this.scale2

=

1

-

progress

this.opacity2

=

1

})

//

退场过程中会逐帧触发onExit回调，入参为动效的归一化进度(0%

--

100%)

}}目标页面代码共享元素转场共享元素的转场是另一种页面间的转场动画，组件使用sharedTransition属性共享元素。属性说明：名称类型描述sharedTransitionid:string,{duration?:number,curve?:Curve,delay?:number,motionPath?:{path:string,form?:number,to?:number,rotatable?:boolean},zIndex?:number,type?:

SharedTransitionEffectType}两个页面中id值相同且不为空字符串的组件即为共享元素，在页面转场时可显示共享元素转场动效。-id：设置组件的id。-duration：单位为毫秒，默认动画时长为1000毫秒。-curve：默认曲线为Linear，有效值参见Curve说明。-delay：单位为毫秒，默认不延时播放。-motionPath：运动路径信息，详细说明请参考路径动画。-path：设置路径。-from：设置起始值。-to：设置终止值。-rotatable：是否旋转。-zIndex：设置Z轴。-type：动画类型。共享元素转场使用示例@Entry@Compone