鸿蒙5.0版开辟：ArkTS组件-组件内转场 (transition)

往期鸿蒙全套实战文章必看：（附带鸿蒙全栈学习资料）

• 鸿蒙开辟核心知识点，看这篇文章就够了
  
• 最新版！鸿蒙HarmonyOS Next应用开辟实战学习路线
  
• 鸿蒙HarmonyOS NEXT开辟技能最全学习路线指南
  
• 鸿蒙应用开辟实战项目，看这一篇文章就够了（部门项目附源码）
  

---

组件内转场 (transition)

组件内转场主要通过transition属性配置转场参数，在组件插入和删除时表现过渡动效，主要用于容器组件中的子组件插入和删除时，提升用户体验。
   说明：
  从API Version 7开始支持。后续版本如有新增内容，则接纳上角标单独标记该内容的起始版本。
  属性

名称参数范例参数描述transitionTransitionOptions(deprecated) | TransitionEffect10+设置组件插入表现和删除隐蔽的过渡效果。
说明：
具体描述见TransitionOptions和TransitionEffect对象说明。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
卡片能力： 从API version 10开始，该接口支持在ArkTS卡片中使用。transition12+(TransitionEffect, Optional<TransitionFinishCallback>)设置组件插入表现和删除隐蔽的过渡效果和转场动画竣事回调。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
卡片能力： 从API version 12开始，该接口支持在ArkTS卡片中使用。   说明： 当前有两种方式触发组件的transition：
  

• 当组件插入或删除时（如if条件改变、ForEach新增删除组件），会递归的触发所有新插入/删除的组件的transition效果。
  
• 当组件Visibility属性在可见和不可见之间改变时，只触发该组件的transition效果。
  

  TransitionEdge10+

卡片能力： 从API version 10开始，该接口支持在ArkTS卡片中使用。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
体系能力： SystemCapability.ArkUI.ArkUI.Full
名称描述TOP窗口的上边缘BOTTOM窗口的下边缘START窗口的起始边缘，LTR时为左边缘，RTL时为右边缘END窗口的终止边缘，LTR时为右边缘，RTL时为左边缘 TransitionEffect10+对象说明

TransitionEffect以函数的形式指定转场效果。提供了以下接口：
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
接口名称参数范例是否静态函数参数描述opacitynumber是设置组件转场时的透明度效果，为插入时起点和删除时终点的值。
取值范围： [0, 1]
说明：
设置小于0的非法值按0处置惩罚，大于1的非法值按1处置惩罚。
卡片能力： 从API version 10开始，该接口支持在ArkTS卡片中使用。translateTranslateOptions是设置组件转场时的平移效果，为插入时起点和删除时终点的值。
-x：横向的平移间隔。
-y：纵向的平移间隔。
-z：竖向的平移间隔。
卡片能力： 从API version 10开始，该接口支持在ArkTS卡片中使用。scaleScaleOptions是设置组件转场时的缩放效果，为插入时起点和删除时终点的值。
-x：横向放大倍数（或缩小比例）。
-y：纵向放大倍数（或缩小比例）。
-z：当前为二维表现，该参数无效 。
- centerX、centerY指缩放中心点，centerX和centerY默认值是"50%“，即默认以组件的中心点为缩放中心点。
- 中心点为(0, 0)代表组件的左上角。
说明：
需要特别留意，设置centerX、centerY为非法字符串时，如"illegalString”，默认值为"0"。
卡片能力： 从API version 10开始，该接口支持在ArkTS卡片中使用。rotateRotateOptions是设置组件转场时的旋转效果，为插入时起点和删除时终点的值。
-x：横向的旋转向量分量。
-y：纵向的旋转向量分量。
-z：竖向的旋转向量分量。
- centerX、centerY指旋转中心点，centerX和centerY默认值是"50%"，即默认以组件的中心点为旋转中心点。
- 中心点为(0, 0)代表组件的左上角。
-centerZ指z轴锚点，即3D旋转中心点的z轴分量，centerZ默认值是0。
-perspective指视距，不支持perspective属性做转场动画。
卡片能力： 从API version 10开始，该接口支持在ArkTS卡片中使用。moveTransitionEdge是指定组件转场时从屏幕边缘滑入和滑出的效果，本质为平移效果，为插入时起点和删除时终点的值。
卡片能力： 从API version 10开始，该接口支持在ArkTS卡片中使用。asymmetricappear: TransitionEffect,
disappear: TransitionEffect是指定非对称的转场效果。
第一个参数指定出现的转场效果，第二个参数指定消散的转场效果。
如不通过asymmetric函数构造TransitionEffect，则表明该效果在组件出现和消散时均生效。
卡片能力： 从API version 10开始，该接口支持在ArkTS卡片中使用。combineTransitionEffect否对TransitionEffect举行链式组合，以形成包罗多种转场效果的TransitionEffect。
卡片能力： 从API version 10开始，该接口支持在ArkTS卡片中使用。animationAnimateParam否指定该TransitionEffect的动画参数。
该参数只用来指定动画参数，其入参AnimateParam的onFinish回调不生效。
如果通过combine举行TransitionEffect的组合，前一TransitionEffect的动画参数也可用于后一TransitionEffect。
卡片能力： 从API version 10开始，该接口支持在ArkTS卡片中使用。 上表提供的静态函数用于构造TransitionEffect对象，而非静态函数作用于构造好的TransitionEffect对象，以指定多种转场效果的组合效果和动画参数。 此外TransitionEffect提供了一些转场效果的静态成员变量：
静态成员名称参数描述IDENTITY禁用转场效果。OPACITY指定透明度为0的转场效果。即相当于TransitionEffect.opacity(0)SLIDE相当于TransitionEffect.asymmetric(TransitionEffect.move(TransitionEdge.START), TransitionEffect.move(TransitionEdge.END))。从START边滑入，END边滑出。即在LTR模式下，从左侧滑入，右侧滑出；在RTL模式下，从右侧滑入，左侧滑出。SLIDE_SWITCH指定出现时从右先缩小再放大侧滑入、消散时从左侧先缩小再放大滑出的转场效果。自带动画参数，也可覆盖动画参数，自带的动画参数时长600ms，指定动画曲线cubicBezierCurve(0.24, 0.0, 0.50, 1.0)，最小缩放比例为0.8。   说明：
  

• TransitionEffect可通过combine函数实现多个转场效果的组合，可以为每个效果分别指定animation参数，且前一效果的animation的参数也可实用于后一效果。例如，TransitionEffect.OPACITY.animation({duration: 1000}).combine(TransitionEffect.translate({x: 100}))，则时长为1000ms的动画参数对OPACITY和translate均生效。
  
• 动画参数的生效顺序为：本TransitionEffect指定的animation参数 > 前面的TransitionEffect指定的animation参数 > 触发该组件出现消散的animateTo中的动画参数。
  
• 如果未使用animateTo触发转场动画且TransitionEffect中也无animation参数，则该组件直接出现大概消散。
  
• TransitionEffect中指定的属性值如与默认值相同，则该属性不会产生转场动画。如TransitionEffect.opacity(1).animation({duration:1000})，由于opacity默认值也为1，未产生透明度动画，该组件直接出现大概消散。
  
• 更具体的关于scale、rotate效果的先容可参考图形变更。
  
• 如果在动画范围(animateTo、animation)内触发组件的上下树或可见性(Visibility)改变，而根组件没有配置transition，会给该组件加上默认透明度转场，即TransitionEffect.OPACITY，动画参数跟随所处动画情况的参数。如不需要可通过主动配置TransitionEffect.IDENTITY来禁用，使该组件直接出现或消散。
  
• 当通过删除整棵子树的方式触发消散转场，如需看到完整的消散转场过程，需要保证被删除子树的根组件的有充足的消散转场时间，见示例3。
  

  TransitionFinishCallback12+

TransitionFinishCallback = (transitionIn: boolean) => void
组件转场动画的竣事回调范例。
卡片能力： 从API version 12开始，该接口支持在ArkTS卡片中使用。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
体系能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名范例必填说明transitionInboolean是该入参表示转场动画的竣事回调范例。
该参数为true表示该转场回调是出现动画的竣事回调，该参数为false表示该转场回调是消散动画的竣事回调。   说明：
  

• 当通过触发一棵子树的上下树，进而递归的触发出现消散转场时，只能保证根组件的消散动画竣事回调能被调用。如果子组件的消散动画竣事回调时间晚于根组件的消散动画竣事回调，由于整棵子树已被烧毁，子组件的竣事回调不会被调用。
  
• 当同一组件的最后一个同范例（即出现大概消散）的动画竣事后，才会调用竣事回调。即如果反复触发出现消散动画（例如通过Visibility触发），只有最后一次的出现消散的竣事回调才会被调用。
  

  TransitionOptions(deprecated)

TransitionOptions通过指定结构体内的参数来指定转场效果。
从API version 10开始不再维护，建议使用TransitionEffect代替。
参数名称参数范例必填参数描述typeTransitionType否指定该转场样式生效的场景。
默认值：TransitionType.All
说明：
不指定type时默认为TransitionType.All，即插入删除都生效。opacitynumber否设置组件转场时的透明度效果，为插入时起点和删除时终点的值。
取值范围： [0, 1]
说明：
设置小于0的非法值时，按0处置惩罚；设置大于1的非法值时，按1处置惩罚。translateTranslateOptions否设置组件转场时的平移效果，为插入时起点和删除时终点的值。
-x：横向的平移间隔。
-y：纵向的平移间隔。
-z：竖向的平移间隔。scaleScaleOptions否设置组件转场时的缩放效果，为插入时起点和删除时终点的值。
-x：横向放大倍数（或缩小比例）。
-y：纵向放大倍数（或缩小比例）。
-z：当前为二维表现，该参数无效 。
- centerX、centerY指缩放中心点，centerX和centerY默认值是"50%“，即默认以组件的中心点为缩放中心点。
- 中心点为(0, 0)代表组件的左上角。
说明：
需要特别留意，设置centerX、centerY为非法字符串时，如"illegalString”，默认值为"0"。rotateRotateOptions否设置组件转场时的旋转效果，为插入时起点和删除时终点的值。
-x：横向的旋转向量分量。
-y：纵向的旋转向量分量。
-z：竖向的旋转向量分量。
- centerX、centerY指旋转中心点，centerX和centerY默认值是"50%"，即默认以组件的中心点为旋转中心点。
- 中心点为(0, 0)代表组件的左上角。   说明：
  

• 当使用TransitionOptions范例的入参指定转场效果时，必须配合animateTo使用才有动画效果，动效时长、曲线、延时跟随animateTo中的配置。
  
• 当使用TransitionOptions作为入参，且不指定除type外的任何参数时，此时相当于指定了透明度的转场效果。例如，指定{type: TransitionType.Insert}相当于指定了{type: TransitionType.Insert, opacity: 0}的转场效果。而指定了具体效果时，则不会添加默认的透明度转场效果。
  

  示例

下面是一个出现消散使用同一TransitionEffect（出现和消散互为逆过程）的示例。

1. // xxx.ets
2. @Entry
3. @Component
4. struct TransitionEffectExample1 {
5.   @State flag: boolean = true;
6.   @State show: string = 'show';
8.   build() {
9.     Column() {
10.       Button(this.show).width(80).height(30).margin(30)
11.         .onClick(() => {
12.           // 点击Button控制Image的显示和消失
13.           if (this.flag) {
14.             this.show = 'hide';
15.           } else {
16.             this.show = 'show';
17.           }
18.           this.flag = !this.flag;
19.         })
20.       if (this.flag) {
21.         // Image的显示和消失配置为相同的过渡效果（出现和消失互为逆过程）
22.         // 出现时从指定的透明度为0、绕z轴旋转180°的状态，变为默认的透明度为1、旋转角为0的状态，透明度与旋转动画时长都为2000ms
23.         // 消失时从默认的透明度为1、旋转角为0的状态，变为指定的透明度为0、绕z轴旋转180°的状态，透明度与旋转动画时长都为2000ms
24.         Image($r('app.media.testImg')).width(200).height(200)
25.           .transition(TransitionEffect.OPACITY.animation({ duration: 2000, curve: Curve.Ease }).combine(
26.             TransitionEffect.rotate({ z: 1, angle: 180 })
27.           ))
28.       }
29.     }.width('100%')
30.   }
31. }

复制代码

表示图：

下面是一个出现和消散使用差别TransitionEffect的示例。

1. // xxx.ets
2. @Entry
3. @Component
4. struct TransitionEffectExample2 {
5.   @State flag: boolean = true;
6.   @State show: string = 'show';
8.   build() {
9.     Column() {
10.       Button(this.show).width(80).height(30).margin(30)
11.         .onClick(() => {
12.           // 点击Button控制Image的显示和消失
13.           if (this.flag) {
14.             this.show = 'hide';
15.           } else {
16.             this.show = 'show';
17.           }
18.           animateTo({ duration: 2000 }, () => {
19.             // 第一张图的TransitionEffect包含了animation，transition的动画参数由TransitionEffect指定
20.             // 第二张图的TransitionEffect不包含animation，transition的动画参数由animateTo指定
21.             this.flag = !this.flag;
22.           });
23.         })
24.       if (this.flag) {
25.         // Image的显示和消失配置为不同的过渡效果
26.         // 出现时做从指定的透明度为0变为默认的透明度1的动画，该动画时长为1000ms，以及做从指定的绕z轴旋转180°变为默认的旋转角为0的动画，该动画1000ms后播放，时长为1000ms
27.         // 消失时做从默认的透明度为1变为指定的透明度0的动画，该动画1000ms后播放，时长为1000ms，以及做从默认的旋转角0变为指定的绕z轴旋转180°的动画，该动画时长为1000ms
28.         Image($r('app.media.testImg')).width(200).height(200)
29.           .transition(
30.             TransitionEffect.asymmetric(
31.               TransitionEffect.OPACITY.animation({ duration: 1000 }).combine(
32.               TransitionEffect.rotate({ z: 1, angle: 180 }).animation({ delay: 1000, duration: 1000 }))
33.               ,
34.               TransitionEffect.OPACITY.animation({ delay: 1000, duration: 1000 }).combine(
35.               TransitionEffect.rotate({ z: 1, angle: 180 }).animation({ duration: 1000 }))
36.             )
37.           )
38.         // 出现时做从x方向和y方向scale都为0变为默认的x方向和y方向scale都为1的动画，该动画时长为animateTo中指定的2000ms
39.         // 消失时无转场效果
40.         Image($r('app.media.testImg')).width(200).height(200).margin({ top: 100 })
41.           .transition(
42.             TransitionEffect.asymmetric(
43.               TransitionEffect.scale({ x: 0, y: 0 }),
44.               TransitionEffect.IDENTITY
45.             )
46.           )
47.       }
48.     }.width('100%')
49.   }
50. }

复制代码

表示图：

下面是一个父子组件都配置transition的示例。

1. // xxx.ets
2. @Entry
3. @Component
4. struct TransitionEffectExample3 {
5.   @State flag: boolean = true;
6.   @State show: string = 'show';
8.   build() {
9.     Column() {
10.       Button(this.show).width(80).height(30).margin(30)
11.         .onClick(() => {
12.           // 点击Button控制Image的显示和消失
13.           if (this.flag) {
14.             this.show = 'hide';
15.           } else {
16.             this.show = 'show';
17.           }
18.           this.flag = !this.flag;
19.         })
20.       if (this.flag) {
21.         // 改flag条件时，会触发id为"column1"、"image1"、"image2"的transition动画。
22.         // id为"column1"的组件是这棵新出现/消失的子树的根节点。
23.         Column() {
24.           Row() {
25.             Image($r('app.media.testImg')).width(150).height(150).id("image1")
26.               .transition(TransitionEffect.OPACITY.animation({ duration: 1000 }))
27.           }
28.           Image($r('app.media.testImg')).width(150).height(150).margin({top: 50}).id("image2")
29.             .transition(TransitionEffect.scale({x: 0, y: 0}).animation({ duration: 1000 }))
30.           Text("view").margin({top: 50})
31.         }
32.         .id("column1")
33.         .transition(TransitionEffect.opacity(0.99).animation({ duration: 1000 }),
34.           // 结束回调设置在消失的第一层节点上，确保能有消失的结束回调
35.           (transitionIn: boolean) => {
36.             console.info("transition finish, transitionIn:" + transitionIn);
37.           }
38.         )
39.       }
40.     }.width('100%')
41.   }
42. }

复制代码

表示图：

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。