1# 组件内转场 (transition) 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @CCFFWW--> 5<!--Designer: @yangfan229--> 6<!--Tester: @lxl007--> 7<!--Adviser: @HelloCrease--> 8 9组件内转场主要通过transition属性配置转场参数，在组件插入和删除时显示过渡动效，主要用于容器组件中的子组件插入和删除时，提升用户体验。 10 11> **说明：** 12> 13> 从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 14> 15> 当前有两种方式触发组件的transition： 16> 1. 当组件插入或删除时（如if条件改变、ForEach新增删除组件），会递归的触发所有新插入/删除的组件的transition效果。 17> 2. 当组件[Visibility](ts-universal-attributes-visibility.md)属性在可见和不可见之间改变时，只触发该组件的transition效果。 18 19 20## transition 21 22transition(value: TransitionOptions | TransitionEffect): T 23 24组件插入显示和删除隐藏的过渡效果。 25 26**系统能力：** SystemCapability.ArkUI.ArkUI.Full 27 28**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 29 30**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 31 32**参数：** 33 34| 参数名 | 类型 | 必填 | 说明 | 35| -------- | -------- | ---- | -------- | 36| value | [TransitionOptions](#transitionoptionsdeprecated)<sup>(deprecated)</sup> \| [TransitionEffect](#transitioneffect10对象说明) | 是 | 设置组件插入显示和删除隐藏的过渡效果。<br/>**说明：** <br/>详细描述见[TransitionOptions](#transitionoptionsdeprecated)和[TransitionEffect](#transitioneffect10对象说明)对象说明。| 37 38**返回值：** 39 40| 类型 | 说明 | 41| -------- | -------- | 42| T | 返回当前组件。 | 43 44## transition<sup>12+</sup> 45 46transition(effect: TransitionEffect, onFinish: Optional<TransitionFinishCallback>): T 47 48组件插入显示和删除隐藏的过渡效果。 49 50**系统能力：** SystemCapability.ArkUI.ArkUI.Full 51 52**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 53 54**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 55 56**参数：** 57 58| 参数名 | 类型 | 必填 | 说明 | 59| -------- | -------- | ---- | -------- | 60| effect | [TransitionEffect](#transitioneffect10对象说明) | 是 | 设置组件插入显示和删除隐藏的过渡效果。 | 61| onFinish | Optional<[TransitionFinishCallback](#transitionfinishcallback12)> | 是 | 转场动画结束回调。 | 62 63**返回值：** 64 65| 类型 | 说明 | 66| -------- | -------- | 67| T | 返回当前组件。 | 68 69## TransitionEdge<sup>10+</sup> 70 71**卡片能力：** 从API version 10开始，该接口支持在ArkTS卡片中使用。 72 73**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 74 75**系统能力：** SystemCapability.ArkUI.ArkUI.Full 76 77| 名称 | 值 | 说明 | 78| ------ | ------ | ------ | 79| TOP | - | 窗口的上边缘。 | 80| BOTTOM | - | 窗口的下边缘。 | 81| START | - | 窗口的起始边缘，LTR时为左边缘，RTL时为右边缘。 | 82| END | - | 窗口的终止边缘，LTR时为右边缘，RTL时为左边缘。 | 83 84## TransitionEffect<sup>10+</sup>对象说明 85 86TransitionEffect以函数的形式指定转场效果。提供了以下接口： 87 88**系统能力：** SystemCapability.ArkUI.ArkUI.Full 89 90**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 91 92**卡片能力：** 从API version 10开始，该接口支持在ArkTS卡片中使用。 93 94### 属性 95 96| 名称 | 类型 | 只读 | 可选 | 说明 | 97| -------- | ---------- | -------- | -------- | -------- | 98| IDENTITY | [TransitionEffect](#transitioneffect10对象说明)\<"identity"> | 是 | 否| 禁用转场效果。 | 99| OPACITY | [TransitionEffect](#transitioneffect10对象说明)\<"opacity"> | 是 | 否| 为组件添加透明度转场效果，出现时透明度从0到1、消失时透明度从1到0，相当于TransitionEffect.opacity(0)。 | 100| SLIDE | [TransitionEffect](#transitioneffect10对象说明)\<"asymmetric", { appear: [TransitionEffect](#transitioneffect10对象说明)\<"move", [TransitionEdge](#transitionedge10)>; disappear: [TransitionEffect](#transitioneffect10对象说明)\<"move", [TransitionEdge](#transitionedge10)>; }> | 是 | 否 | 相当于TransitionEffect.asymmetric(TransitionEffect.move(TransitionEdge.START), TransitionEffect.move(TransitionEdge.END))。从START边滑入，END边滑出。即在LTR模式下，从左侧滑入，右侧滑出；在RTL模式下，从右侧滑入，左侧滑出。 | 101| SLIDE_SWITCH | [TransitionEffect](#transitioneffect10对象说明)\<"slideSwitch"> | 是 | 否 | 指定出现时从右先缩小再放大侧滑入、消失时从左侧先缩小再放大滑出的转场效果。自带动画参数，也可覆盖动画参数，自带的动画参数时长600ms，指定动画曲线cubicBezierCurve(0.24, 0.0, 0.50, 1.0)，最小缩放比例为0.8。| 102 103> **说明：** 104> 105> 1. TransitionEffect可通过combine函数实现多个转场效果的组合，可以为每个效果分别指定animation参数，且前一效果的animation的参数也可适用于后一效果。例如，TransitionEffect.OPACITY.animation({duration: 1000}).combine(TransitionEffect.translate({x: 100}))，则时长为1000ms的动画参数对OPACITY和translate均生效。 106> 2. 动画参数的生效顺序为：本TransitionEffect指定的animation参数 > 前面的TransitionEffect指定的animation参数 > 触发该组件出现消失的animateTo中的动画参数。 107> 3. 如果未使用animateTo触发转场动画且TransitionEffect中也无animation参数，则该组件直接出现或者消失。 108> 4. TransitionEffect中指定的属性值如与默认值相同，则该属性不会产生转场动画。如TransitionEffect.opacity(1).animation({duration:1000})，由于opacity默认值也为1，未产生透明度动画，该组件直接出现或者消失。 109> 5. 更详细的关于scale、rotate效果的介绍可参考[图形变换](ts-universal-attributes-transformation.md)。 110> 6. 如果在动画范围([animateTo](../arkts-apis-uicontext-uicontext.md#animateto)、[animation](ts-animatorproperty.md))内触发组件的上下树或可见性([Visibility](ts-universal-attributes-visibility.md))改变，而根组件没有配置transition，会给该组件加上默认透明度转场，即TransitionEffect.OPACITY，动画参数跟随所处动画环境的参数。如不需要可通过主动配置TransitionEffect.IDENTITY来禁用，使该组件直接出现或消失。 111> 7. 当通过删除整棵子树的方式触发消失转场，如需看到完整的消失转场过程，需要保证被删除子树的根组件的有充足的消失转场时间，见示例3。 112 113### translate<sup>10+</sup> 114 115translate(options: TranslateOptions): TransitionEffect\<"translate"> 116 117设置组件转场时的平移效果。 118 119**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 120 121**卡片能力：** 从API version 10开始，该接口支持在ArkTS卡片中使用。 122 123**系统能力：** SystemCapability.ArkUI.ArkUI.Full 124 125**参数：** 126 127| 参数名 | 类型 | 必填 | 说明 | 128| ------ | ------------------------------------------ | ---- | ------------------ | 129| options | [TranslateOptions](ts-universal-attributes-transformation.md#translateoptions对象说明) | 是 | 组件转场时的平移效果，为插入时起点和删除时终点的值。<br/>-x：横向的平移距离。<br/>-y：纵向的平移距离。<br/>-z：竖向的平移距离。 | 130 131**返回值：** 132 133| 类型 | 说明 | 134| ------ | ------------------------ | 135| [TransitionEffect](#transitioneffect10对象说明)\<"translate"> | 当前动画平移效果。 | 136 137### rotate<sup>10+</sup> 138 139rotate(options: RotateOptions): TransitionEffect\<"rotate"> 140 141设置组件转场时的旋转效果。 142 143**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 144 145**卡片能力：** 从API version 10开始，该接口支持在ArkTS卡片中使用。 146 147**系统能力：** SystemCapability.ArkUI.ArkUI.Full 148 149**参数：** 150 151| 参数名 | 类型 | 必填 | 说明 | 152| ------ | ------------------------------------------ | ---- | ------------------ | 153| options | [RotateOptions](ts-universal-attributes-transformation.md#rotateoptions对象说明) | 是 | 组件转场时的旋转效果，为插入时起点和删除时终点的值。<br/>-x：横向的旋转向量分量。<br/>-y：纵向的旋转向量分量。<br/>-z：竖向的旋转向量分量。<br/>- centerX、centerY指旋转中心点，centerX和centerY默认值是"50%"，即默认以组件的中心点为旋转中心点。<br/>- 中心点为(0, 0)代表组件的左上角。<br/>-centerZ指z轴锚点，即3D旋转中心点的z轴分量，centerZ默认值是0。<br/>-perspective指视距，不支持perspective属性做转场动画。 | 154 155**返回值：** 156 157| 类型 | 说明 | 158| ------ | ------------------------ | 159| [TransitionEffect](#transitioneffect10对象说明)\<"rotate"> | 当前动画旋转效果。 | 160 161### scale<sup>10+</sup> 162 163scale(options: ScaleOptions): TransitionEffect\<"scale"> 164 165设置组件转场时的缩放效果。 166 167**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 168 169**卡片能力：** 从API version 10开始，该接口支持在ArkTS卡片中使用。 170 171**系统能力：** SystemCapability.ArkUI.ArkUI.Full 172 173**参数：** 174 175| 参数名 | 类型 | 必填 | 说明 | 176| ------ | ------------------------------------------ | ---- | ------------------ | 177| options | [ScaleOptions](ts-universal-attributes-transformation.md#scaleoptions对象说明) | 是 | 组件转场时的缩放效果，为插入时起点和删除时终点的值。<br/>-x：横向放大倍数（或缩小比例）。<br/>-y：纵向放大倍数（或缩小比例）。<br/>-z：当前为二维显示，该参数无效。<br/>- centerX、centerY指缩放中心点，centerX和centerY默认值是"50%"，即默认以组件的中心点为缩放中心点。<br/>- 中心点为(0, 0)代表组件的左上角。<br>**说明：** <br>设置centerX、centerY为非法字符串时（例如，"illegalString"），默认值为"0"。 | 178 179**返回值：** 180 181| 类型 | 说明 | 182| ------ | ------------------------ | 183| [TransitionEffect](#transitioneffect10对象说明)\<"scale"> | 当前动画缩放效果。 | 184 185### opacity<sup>10+</sup> 186 187opacity(alpha: number): TransitionEffect\<"opacity"> 188 189设置组件转场时的透明度效果。 190 191**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 192 193**卡片能力：** 从API version 10开始，该接口支持在ArkTS卡片中使用。 194 195**系统能力：** SystemCapability.ArkUI.ArkUI.Full 196 197**参数：** 198 199| 参数名 | 类型 | 必填 | 说明 | 200| ------ | ------------------------------------------ | ---- | ------------------ | 201| alpha | number | 是 | 组件转场时的透明度效果，为插入时起点和删除时终点的值。<br/>取值范围：[0, 1]<br/>**说明：** <br/>设置小于0的非法值按0处理，大于1的非法值按1处理。 | 202 203**返回值：** 204 205| 类型 | 说明 | 206| ------ | ------------------------ | 207| [TransitionEffect](#transitioneffect10对象说明)\<"opacity"> | 当前动画透明度效果。 | 208 209### move<sup>10+</sup> 210 211move(edge: TransitionEdge): TransitionEffect\<"move"> 212 213设置组件转场时从屏幕边缘滑入和滑出的效果。 214 215**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 216 217**卡片能力：** 从API version 10开始，该接口支持在ArkTS卡片中使用。 218 219**系统能力：** SystemCapability.ArkUI.ArkUI.Full 220 221**参数：** 222 223| 参数名 | 类型 | 必填 | 说明 | 224| ------ | ------------------------------------------ | ---- | ------------------ | 225| edge | [TransitionEdge](#transitionedge10) | 是 | 组件转场时从屏幕边缘滑入和滑出的效果，本质为平移效果，为插入时起点和删除时终点的值。 | 226 227**返回值：** 228 229| 类型 | 说明 | 230| ------ | ------------------------ | 231| [TransitionEffect](#transitioneffect10对象说明)\<"move"> | 当前动画从屏幕边缘滑入和滑出的效果。 | 232 233### asymmetric<sup>10+</sup> 234 235asymmetric(appear: TransitionEffect, disappear: TransitionEffect): TransitionEffect\<"asymmetric"> 236 237设置非对称的转场效果。 238 239**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 240 241**卡片能力：** 从API version 10开始，该接口支持在ArkTS卡片中使用。 242 243**系统能力：** SystemCapability.ArkUI.ArkUI.Full 244 245**参数：** 246 247| 参数名 | 类型 | 必填 | 说明 | 248| ------ | ------------------------------------------ | ---- | ------------------ | 249| appear | [TransitionEffect](#transitioneffect10对象说明) | 是 | 指定出现的转场效果。<br/>如不通过asymmetric函数构造TransitionEffect，则表明该效果在组件出现和消失时均生效。 | 250| disappear | [TransitionEffect](#transitioneffect10对象说明) | 是 | 指定消失的转场效果。<br/>如不通过asymmetric函数构造TransitionEffect，则表明该效果在组件出现和消失时均生效。 | 251 252**返回值：** 253 254| 类型 | 说明 | 255| ------ | ------------------------ | 256| [TransitionEffect](#transitioneffect10对象说明)\<"asymmetric"> | 当前动画非对称的转场效果。 | 257 258### constructor<sup>10+</sup> 259 260constructor(type: Type, effect: Effect) 261 262构造TransitionEffect对象。 263 264**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 265 266**卡片能力：** 从API version 10开始，该接口支持在ArkTS卡片中使用。 267 268**系统能力：** SystemCapability.ArkUI.ArkUI.Full 269 270**参数：** 271 272| 参数名 | 类型 | 必填 | 说明 | 273| ------ | ------------------------------------------ | ---- | ------------------ | 274| type | [Type](ts-appendix-enums.md#transitiontype) | 是 | 转场类型。 | 275| effect | [Effect](#transitioneffect10对象说明) | 是 | 转场参数。 | 276 277### combine<sup>10+</sup> 278 279combine(transitionEffect: TransitionEffect): TransitionEffect 280 281对TransitionEffect进行链式组合，以形成包含多种转场效果的TransitionEffect。 282 283**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 284 285**卡片能力：** 从API version 10开始，该接口支持在ArkTS卡片中使用。 286 287**系统能力：** SystemCapability.ArkUI.ArkUI.Full 288 289**参数：** 290 291| 参数名 | 类型 | 必填 | 说明 | 292| ------ | -------- | ---- | ------------------ | 293| transitionEffect | [TransitionEffect](#transitioneffect10对象说明) | 是 | 被组合的过渡效果。 | 294 295**返回值：** 296 297| 类型 | 说明 | 298| ------ | ------------------------ | 299| [TransitionEffect](#transitioneffect10对象说明) | 组合过渡效应。 | 300 301### animation<sup>10+</sup> 302 303animation(value: AnimateParam): TransitionEffect 304 305指定该TransitionEffect的动画参数。 306 307**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 308 309**卡片能力：** 从API version 10开始，该接口支持在ArkTS卡片中使用。 310 311**系统能力：** SystemCapability.ArkUI.ArkUI.Full 312 313**参数：** 314 315| 参数名 | 类型 | 必填 | 说明 | 316| ------ | -------- | ---- | ------------------ | 317| value | [AnimateParam](ts-explicit-animation.md#animateparam对象说明) | 是 | 动画参数。</br>该参数只用来指定动画参数，其入参AnimateParam的onFinish回调不生效。</br>如果通过combine进行TransitionEffect的组合，前一TransitionEffect的动画参数也可用于后一TransitionEffect。 | 318 319**返回值：** 320 321| 类型 | 说明 | 322| ------ | ------------------------ | 323| [TransitionEffect](#transitioneffect10对象说明) | 当前动画效果。 | 324 325 326## TransitionFinishCallback<sup>12+</sup> 327 328type TransitionFinishCallback = (transitionIn: boolean) => void 329 330组件转场动画的结束回调类型。 331 332**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 333 334**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 335 336**系统能力：** SystemCapability.ArkUI.ArkUI.Full 337 338**参数：** 339 340| 参数名 | 类型 | 必填 | 说明 | 341| -------- | ------------------------- | ---- | ------------------------------------------------------------ | 342| transitionIn | boolean | 是 | 该入参表示转场动画的结束回调类型。<br/>该参数为true表示该转场回调是出现动画的结束回调，该参数为false表示该转场回调是消失动画的结束回调。 | 343 344> **说明：** 345> 1. 当通过触发一棵子树的上下树，进而递归的触发出现消失转场时，只能保证根组件的消失动画结束回调能被调用。如果子组件的消失动画结束回调时间晚于根组件的消失动画结束回调，由于整棵子树已被销毁，子组件的结束回调不会被调用。 346> 2. 当同一组件的最后一个同类型（即出现或者消失）的动画结束后，才会调用结束回调。即如果反复触发出现消失动画（例如通过Visibility触发），只有最后一次的出现消失的结束回调才会被调用。 347 348## TransitionOptions<sup>(deprecated)</sup> 349 350TransitionOptions通过指定结构体内的参数来指定转场效果。 351 352从API version 10开始不再维护，建议使用[TransitionEffect](#transitioneffect10对象说明)代替。 353 354**系统能力：** SystemCapability.ArkUI.ArkUI.Full 355 356| 名称 | 类型 | 只读 | 可选 | 说明 | 357| -------- | -------- | -------- | -------- | -------- | 358| type | [TransitionType](ts-appendix-enums.md#transitiontype) | 否 | 是 | 指定该转场样式生效的场景。<br/>默认值：TransitionType.All<br/>**说明：**<br/>不指定type时默认为TransitionType.All，即插入删除都生效。 | 359| opacity | number | 否 | 是 | 设置组件转场时的透明度效果，为插入时起点和删除时终点的值。<br/>取值范围： [0, 1]<br/>**说明：** <br/>设置小于0的非法值时，按0处理；设置大于1的非法值时，按1处理。 | 360| translate | [TranslateOptions](ts-universal-attributes-transformation.md#translateoptions对象说明) | 否 | 是 | 设置组件转场时的平移效果，为插入时起点和删除时终点的值。<br/>-x：横向的平移距离。<br/>-y：纵向的平移距离。<br/>-z：竖向的平移距离。| 361| scale | [ScaleOptions](ts-universal-attributes-transformation.md#scaleoptions对象说明) | 否 | 是 | 设置组件转场时的缩放效果，为插入时起点和删除时终点的值。<br/>-x：横向放大倍数（或缩小比例）。<br/>-y：纵向放大倍数（或缩小比例）。<br/>-z：当前为二维显示，该参数无效 。<br/>- centerX、centerY指缩放中心点，centerX和centerY默认值是"50%"，即默认以组件的中心点为缩放中心点。<br/>- 中心点为(0, 0)代表组件的左上角。<br>**说明：** <br>设置centerX、centerY为非法字符串时（例如，"illegalString"），默认值为"0"。 | 362| rotate | [RotateOptions](ts-universal-attributes-transformation.md#rotateoptions对象说明)| 否 | 是 | 设置组件转场时的旋转效果，为插入时起点和删除时终点的值。<br/>-x：横向的旋转向量分量。<br/>-y：纵向的旋转向量分量。<br/>-z：竖向的旋转向量分量。<br/>- centerX、centerY指旋转中心点，centerX和centerY默认值是"50%"，即默认以组件的中心点为旋转中心点。<br/>- 中心点为(0, 0)代表组件的左上角。 | 363 364> **说明：** 365> 366> 1. 当使用TransitionOptions类型的入参指定转场效果时，**必须**配合[animateTo](../arkts-apis-uicontext-uicontext.md#animateto)使用才有动画效果，动效时长、曲线、延时跟随animateTo中的配置。 367> 2. 当使用TransitionOptions作为入参，且不指定除type外的任何参数时，此时相当于指定了透明度的转场效果。例如，指定{type: TransitionType.Insert}相当于指定了{type: TransitionType.Insert, opacity: 0}的转场效果。而指定了具体效果时，则不会添加默认的透明度转场效果。 368 369## 示例 370 371### 示例1（使用同一接口实现图片出现消失） 372 373该示例主要演示如何通过同一TransitionEffect来实现图片的出现与消失，出现和消失互为逆过程。 374```ts 375// xxx.ets 376@Entry 377@Component 378struct TransitionEffectExample1 { 379 @State flag: boolean = true; 380 @State show: string = 'show'; 381 382 build() { 383 Column() { 384 Button(this.show).width(80).height(30).margin(30) 385 .onClick(() => { 386 // 点击Button控制Image的显示和消失 387 if (this.flag) { 388 this.show = 'hide'; 389 } else { 390 this.show = 'show'; 391 } 392 this.flag = !this.flag; 393 }) 394 if (this.flag) { 395 // Image的显示和消失配置为相同的过渡效果（出现和消失互为逆过程） 396 // 出现时从指定的透明度为0、绕z轴旋转180°的状态，变为默认的透明度为1、旋转角为0的状态，透明度与旋转动画时长都为2000ms 397 // 消失时从默认的透明度为1、旋转角为0的状态，变为指定的透明度为0、绕z轴旋转180°的状态，透明度与旋转动画时长都为2000ms 398 // $r('app.media.testImg')需要替换为开发者所需的图像资源文件。 399 Image($r('app.media.testImg')).width(200).height(200) 400 .transition(TransitionEffect.OPACITY.animation({ duration: 2000, curve: Curve.Ease }).combine( 401 TransitionEffect.rotate({ z: 1, angle: 180 }) 402 )) 403 } 404 }.width('100%') 405 } 406} 407``` 408示意图：<br/> 409 410 411### 示例2（使用不同接口实现图片出现消失） 412 413该示例主要演示使用不同TransitionEffect来实现图片的出现和消失。 414```ts 415// xxx.ets 416@Entry 417@Component 418struct TransitionEffectExample2 { 419 @State flag: boolean = true; 420 @State show: string = 'show'; 421 422 build() { 423 Column() { 424 Button(this.show).width(80).height(30).margin(30) 425 .onClick(() => { 426 // 点击Button控制Image的显示和消失 427 if (this.flag) { 428 this.show = 'hide'; 429 } else { 430 this.show = 'show'; 431 } 432 this.getUIContext().animateTo({ duration: 2000 }, () => { 433 // 第一张图的TransitionEffect包含了animation，transition的动画参数由TransitionEffect指定 434 // 第二张图的TransitionEffect不包含animation，transition的动画参数由animateTo指定 435 this.flag = !this.flag; 436 }); 437 }) 438 if (this.flag) { 439 // Image的显示和消失配置为不同的过渡效果 440 // 出现时做从指定的透明度为0变为默认的透明度1的动画，该动画时长为1000ms，以及做从指定的绕z轴旋转180°变为默认的旋转角为0的动画，该动画1000ms后播放，时长为1000ms 441 // 消失时做从默认的透明度为1变为指定的透明度0的动画，该动画1000ms后播放，时长为1000ms，以及做从默认的旋转角0变为指定的绕z轴旋转180°的动画，该动画时长为1000ms 442 // $r('app.media.testImg')需要替换为开发者所需的图像资源文件。 443 Image($r('app.media.testImg')).width(200).height(200) 444 .transition( 445 TransitionEffect.asymmetric( 446 TransitionEffect.OPACITY.animation({ duration: 1000 }).combine( 447 TransitionEffect.rotate({ z: 1, angle: 180 }).animation({ delay: 1000, duration: 1000 })) 448 , 449 TransitionEffect.OPACITY.animation({ delay: 1000, duration: 1000 }).combine( 450 TransitionEffect.rotate({ z: 1, angle: 180 }).animation({ duration: 1000 })) 451 ) 452 ) 453 // 出现时做从x方向和y方向scale都为0变为默认的x方向和y方向scale都为1的动画，该动画时长为animateTo中指定的2000ms 454 // 消失时无转场效果 455 // $r('app.media.testImg')需要替换为开发者所需的图像资源文件。 456 Image($r('app.media.testImg')).width(200).height(200).margin({ top: 100 }) 457 .transition( 458 TransitionEffect.asymmetric( 459 TransitionEffect.scale({ x: 0, y: 0 }), 460 TransitionEffect.IDENTITY 461 ) 462 ) 463 } 464 }.width('100%') 465 } 466} 467``` 468示意图：<br/> 469 470 471### 示例3（设置父子组件为transition） 472 473该示例主要演示通过父子组件都配置transition来实现图片的出现和消失。 474```ts 475// xxx.ets 476@Entry 477@Component 478struct TransitionEffectExample3 { 479 @State flag: boolean = true; 480 @State show: string = 'show'; 481 482 build() { 483 Column() { 484 Button(this.show).width(80).height(30).margin(30) 485 .onClick(() => { 486 // 点击Button控制Image的显示和消失 487 if (this.flag) { 488 this.show = 'hide'; 489 } else { 490 this.show = 'show'; 491 } 492 this.flag = !this.flag; 493 }) 494 if (this.flag) { 495 // 改flag条件时，会触发id为"column1"、"image1"、"image2"的transition动画。 496 // id为"column1"的组件是这棵新出现/消失的子树的根节点。 497 Column() { 498 Row() { 499 // $r('app.media.testImg')需要替换为开发者所需的图像资源文件。 500 Image($r('app.media.testImg')).width(150).height(150).id("image1") 501 .transition(TransitionEffect.OPACITY.animation({ duration: 1000 })) 502 } 503 504 // $r('app.media.testImg')需要替换为开发者所需的图像资源文件。 505 Image($r('app.media.testImg')) 506 .width(150) 507 .height(150) 508 .margin({ top: 50 }) 509 .id("image2") 510 .transition(TransitionEffect.scale({ x: 0, y: 0 }).animation({ duration: 1000 })) 511 Text("view").margin({ top: 50 }) 512 } 513 .id("column1") 514 .transition(TransitionEffect.opacity(0.99).animation({ duration: 1000 }), 515 // 结束回调设置在消失的第一层节点上，确保能有消失的结束回调 516 (transitionIn: boolean) => { 517 console.info("transition finish, transitionIn:" + transitionIn); 518 } 519 ) 520 } 521 }.width('100%') 522 } 523} 524``` 525示意图：<br/> 526 527
