Harmony/OpenHarmony应用开发-转场动画组件内转场
组件内转场主要通过transition属性配置转场参数,在组件插入和删除时显示过渡动效,主要用于容器组件中的子组件插入和删除时,提升用户体验(需要配合animateTo才能生效,动效时长、曲线、延时跟随animateTo中的配置)。
说明:从API Version 7开始支持。开发语言ets.
属性:
名称 |
参数类型 |
参数描述 |
transition |
TransitionOptions |
所有参数均为可选参数,详细描述见TransitionOptions参数说明。 |
TransitionOptions参数说明:
参数名称 |
参数类型 |
必填 |
参数描述 |
type |
TransitionType |
否 |
默认包括组件新增和删除。 默认值:TransitionType.All 说明: 不指定Type时说明插入删除使用同一种效果。 |
opacity |
number |
否 |
设置组件转场时的透明度效果,为插入时起点和删除时终点的值。 默认值:1 |
translate |
{ x? : number, y? : number, z? : number } |
否 |
设置组件转场时的平移效果,为插入时起点和删除时终点的值。 -x:横向的平移距离。 -y:纵向的平移距离。 -z:竖向的平移距离。 |
scale |
{ x? : number, y? : number, z? : number, centerX? : number, centerY? : number } |
否 |
设置组件转场时的缩放效果,为插入时起点和删除时终点的值。 -x:横向放大倍数(或缩小比例)。 -y:纵向放大倍数(或缩小比例)。 -z:竖向放大倍数(或缩小比例)。 - centerX、centerY缩放中心点。 - 中心点为0时,默认的是组件的左上角。 |
rotate |
{ x?: number, y?: number, z?: number, angle?: Angle, centerX?: Length, centerY?: Length } |
否 |
设置组件转场时的旋转效果,为插入时起点和删除时终点的值。 -x:横向的旋转向量。 -y:纵向的旋转向量。 -z:竖向的旋转向量。 - angle:旋转角度。 - centerX,centerY指旋转中心点。 - 中心点为(0,0)时,默认的是组件的左上角。 |
示例代码:
@Entry@Componentstruct TransitionAnimation_zj { @State flag: boolean = true @State show: string = 'show' build() { Column() { Button(this.show).width(80).height(30).margin(30) .onClick(() => { // 点击Button控制Image的显示和消失 animateTo({ duration: 1000 }, () => { if (this.flag) {this.show = 'hide' } else {this.show = 'show' } this.flag = !this.flag }) }) if (this.flag) { // Image的显示和消失配置为不同的过渡效果 Image($r('app.media.icon')).width(300).height(300) .transition({ type: TransitionType.Insert, scale: { x: 0, y: 1.0 } }) .transition({ type: TransitionType.Delete, rotate: { angle: 180 } }) } }.width('100%') }}
复制
示例效果:
参考地址:
文档中心