1# 出现/消失转场 2 3 4[transition](../reference/arkui-ts/ts-transition-animation-component.md)是基础的组件转场接口，用于实现一个组件出现或者消失时的动画效果。可以通过[TransitionEffect](../reference/arkui-ts/ts-transition-animation-component.md#transitioneffect10对象说明)的组合使用，定义出各式效果。 5 6 7 **表1** 转场效果接口 8 9| 转场效果 | 说明 | 动画 | 10| -------- | -------- | -------- | 11| IDENTITY | 禁用转场效果。 | 无。 | 12| OPACITY | 默认的转场效果，透明度转场。 | 出现时透明度从0到1，消失时透明度从1到0。 | 13| SLIDE | 滑动转场效果。 | 出现时从窗口左侧滑入，消失时从窗口右侧滑出。 | 14| translate | 通过设置组件平移创建转场效果。 | 出现时为translate接口设置的值到默认值0，消失时为默认值0到translate接口设置的值。 | 15| rotate | 通过设置组件旋转创建转场效果。 | 出现时为rotate接口设置的值到默认值0，消失时为默认值0到rotate接口设置的值。 | 16| opacity | 通过设置透明度参数创建转场效果。 | 出现时为opacity设置的值到默认透明度1，消失时为默认透明度1到opacity设置的值。 | 17| move | 通过[TransitionEdge](../reference/arkui-ts/ts-appendix-enums.md#transitionedge10)创建从窗口哪条边缘出来的效果。 | 出现时从TransitionEdge方向滑入，消失时滑出到TransitionEdge方向。 | 18| asymmetric | 通过此方法组合非对称的出现消失转场效果。<br/>- appear:出现转场的效果。<br/>- disappear：消失转场的效果。 | 出现时采用appear设置的TransitionEffect出现效果，消失时采用disappear设置的TransitionEffect消失效果。 | 19| combine | 组合其他TransitionEffect。 | 组合其他TransitionEffect，一起生效。 | 20| animation | 定义转场效果的动画参数：<br/>- 如果不定义会跟随animateTo的动画参数。<br/>- 不支持通过控件的animation接口配置动画参数。<br/>- TransitionEffect中animation的onFinish不生效。 | 调用顺序时从上往下，上面TransitionEffect的animation也会作用到下面TransitionEffect。 | 21 22 231. 创建TransitionEffect。 24 25 ```ts 26 // 出现时会是所有转场效果的出现效果叠加，消失时会是所有消失转场效果的叠加 27 // 用于说明各个effect跟随的动画参数 28 private effect: object = 29 TransitionEffect.OPACITY // 创建了透明度转场效果，这里没有调用animation接口，会跟随animateTo的动画参数 30 // 通过combine方法，添加缩放转场效果，并指定了springMotion(0.6, 1.2)曲线 31 .combine(TransitionEffect.scale({ x: 0, y: 0 }).animation({curve: curves.springMotion(0.6, 1.2) })) 32 // 添加旋转转场效果，这里的动画参数会跟随上面的TransitionEffect，也就是springMotion(0.6, 1.2) 33 .combine(TransitionEffect.rotate({ angle: 90 })) 34 // 添加平移转场效果，动画参数会跟随其之上带animation的TransitionEffect，也就是springMotion(0.6, 1.2) 35 .combine(TransitionEffect.translate({ x: 150, y: 150 }) 36 // 添加move转场效果，并指定了springMotion曲线 37 .combine(TransitionEffect.move(TransitionEdge.END)).animation({curve: curves.springMotion()})) 38 // 添加非对称的转场效果，由于这里没有设置animation，会跟随上面的TransitionEffect的animation效果，也就是springMotion 39 .combine(TransitionEffect.asymmetric(TransitionEffect.scale({ x: 0, y: 0 }), TransitionEffect.rotate({angle: 90}))); 40 ``` 41 422. 将转场效果通过[transition](../reference/arkui-ts/ts-transition-animation-component.md)接口设置到组件。 43 44 ```ts 45 Text('test') 46 .transition(effect) 47 ``` 48 493. 新增或者删除组件触发转场。 50 51 ```ts 52 @State isPresent: boolean = true; 53 ... 54 if (this.isPresent) { 55 Text('test') 56 .transition(effect) 57 } 58 ... 59 // 控制新增或者删除组件 60 // 方式一：将控制变量放到animateTo闭包内，未通过animation接口定义动画参数的TransitionEffect将跟随animateTo的动画参数 61 animateTo({curve: curves.springMotion()}, ()=> { 62 this.isPresent = false; 63 }) 64 65 // 方式二：直接控制删除或者新增组件，动画参数由TransitionEffect的animation接口配置 66 this.isPresent = false; 67 ``` 68 69 70 完整的示例代码和效果如下，示例中采用直接删除或新增组件的方式触发转场，也可以替换为在animateTo闭包内改变控制变量触发转场。 71 72```ts 73import curves from '@ohos.curves'; 74 75@Entry 76@Component 77struct TransitionEffectDemo { 78 @State isPresent: boolean = false; 79 80 // 第一步，创建TransitionEffect 81 private effect: TransitionEffect = 82 // 创建默认透明度转场效果,并指定了springMotion(0.6, 0.8)曲线 83 TransitionEffect.OPACITY.animation({ curve: curves.springMotion(0.6, 0.8) }) 84 // 通过combine方法,这里的动画参数会跟随上面的TransitionEffect，也就是springMotion(0.6, 0.8) 85 .combine(TransitionEffect.scale({ x: 0, y: 0 })) 86 // 添加旋转转场效果，这里的动画参数会跟随上面带animation的TransitionEffect，也就是springMotion(0.6, 0.8) 87 .combine(TransitionEffect.rotate({ angle: 90 })) 88 // 添加平移转场效果，这里的动画参数使用指定的springMotion() 89 .combine(TransitionEffect.translate({ y: 150 }).animation({ curve: curves.springMotion() })) 90 // 添加move转场效果，这里的动画参数会跟随上面的TransitionEffect，也就是springMotion() 91 .combine(TransitionEffect.move(TransitionEdge.END)) 92 93 build() { 94 Stack() { 95 if (this.isPresent) { 96 Column() { 97 Text('ArkUI') 98 .fontWeight(FontWeight.Bold) 99 .fontSize(20) 100 .fontColor(Color.White) 101 } 102 .justifyContent(FlexAlign.Center) 103 .width(150) 104 .height(150) 105 .borderRadius(10) 106 .backgroundColor(0xf56c6c) 107 // 第二步：将转场效果通过transition接口设置到组件 108 .transition(this.effect) 109 } 110 111 // 边框 112 Column() 113 .width(155) 114 .height(155) 115 .border({ 116 width: 5, 117 radius: 10, 118 color: Color.Black, 119 }) 120 121 // 第三步：新增或者删除组件触发转场，控制新增或者删除组件 122 Button('Click') 123 .margin({ top: 320 }) 124 .onClick(() => { 125 this.isPresent = !this.isPresent; 126 }) 127 } 128 .width('100%') 129 .height('60%') 130 } 131} 132``` 133 134 135 136 137 138
