鸿蒙原生 ArkTS 过渡动画完全指南：从入门到精通 TransitionEffect 实战

一、引言

在移动应用开发中，动画早已不再是锦上添花的点缀，而是用户体验的核心组成部分。一个流畅、自然的过渡动画能够让用户在操作过程中获得清晰的视觉反馈，理解界面状态的变化，从而建立起对应用的信任感和使用愉悦感。

HarmonyOS NEXT 作为华为倾力打造的新一代操作系统，其原生开发框架 ArkUI 提供了一套完整且强大的动画体系。其中，组件过渡动画（Transition Animation） 是日常开发中最高频使用、也最能体现应用品质感的动画类型之一。它解决了组件在出现（入场） 和消失（退场） 时的视觉平滑过渡问题，让 UI 状态的变化不再突兀生硬。

本文将基于 HarmonyOS NEXT API 24，从一个完整的实战示例出发，深入剖析 ArkTS 中 TransitionEffect 的核心概念、API 设计、组合技巧与最佳实践，帮助你真正掌握组件过渡动画的精髓。

二、过渡动画的核心概念

2.1 什么是过渡动画？

过渡动画（Transition Animation）特指当组件被挂载（插入视图树） 或卸载（从视图树移除） 时所播放的动画效果。在 ArkUI 中，这通常通过 if / else 条件渲染或 ForEach / LazyForEach 列表的动态增删来触发。

与属性动画（Property Animation）不同，属性动画关注的是组件已有属性的连续变化（如宽度从 100 变到 200），而过渡动画关注的是组件整个生命周期的进入和离开。可以这样理解：

属性动画：组件一直在，只是它的某个属性在变
过渡动画：组件之前不存在，现在出现了（反之亦然）

2.2 过渡动画的触发时机

在 ArkTS 中，过渡动画的触发完全依赖视图树的变化：

复制代码

if (condition) {
  Text('我会在 condition 为 true 时出现')
    .transition(effect)
}

当 condition 从 false 变为 true，Text 组件被插入视图树 → 入场动画播放 。

当 condition 从 true 变为 false，Text 组件被从视图树移除 → 退场动画播放。

2.3 对称过渡 vs 非对称过渡

类型	定义	适用场景
对称过渡	入场和退场使用相同的 TransitionEffect	简单的淡入淡出、一致的滑入滑出
非对称过渡	入场和退场可以分别指定不同的 TransitionEffect	底部弹出的面板（入场滑入、退场淡出）

在 HarmonyOS NEXT 中，对称过渡使用 TransitionEffect.opacity(0) 这样的单参数形式，而非对称过渡则通过 TransitionEffect.asymmetric(enter, exit) 来实现。

三、TransitionEffect API 全景解析

3.1 API 概览

TransitionEffect 是 ArkUI 框架提供的用于定义组件过渡效果的类。自 API 10+ 引入以来，经历了多次增强，到 API 24 已经具备了一套非常完备的能力矩阵。

核心能力：

效果类型	方法	说明
透明度	`.opacity(value)` / `.OPACITY`	透明度过渡，最基础的效果
位移	`.translate({ x, y, z })`	沿坐标轴平移
缩放	`.scale({ x, y, z })`	沿坐标轴缩放
旋转	`.rotate({ angle, x, y, z })`	绕轴旋转
边缘滑入	`.move(edge)`	从指定边缘移入/移出
左右滑切	`.SLIDE`	从左滑入、从右滑出（跟随语言方向）
缩放滑切	`.SLIDE_SWITCH`	缩放 + 滑动组合，带内置动画参数
无效果	`.IDENTITY`	禁用过渡效果

3.2 动画参数控制

过渡动画的行为通过 .animation() 方法链式配置：

typescript 复制代码

TransitionEffect.opacity(0).animation({
  duration: 500,         // 动画持续时间（毫秒）
  curve: Curve.EaseInOut, // 缓动曲线
  delay: 0,              // 延迟开始时间
  iterations: 1          // 播放次数
})

常见的 Curve 枚举值：

曲线值	行为描述	适用场景
`Curve.Linear`	匀速	进度条、机械运动
`Curve.Ease`	慢→快→慢	通用入场动画
`Curve.EaseIn`	慢→快	退场动画
`Curve.EaseOut`	快→慢	入场动画
`Curve.EaseInOut`	慢→快→慢	通用过渡
`Curve.FastOutSlowIn`	快→慢	Material Design 风格入场
`Curve.Spring`	弹簧效果	弹性入场

3.3 组合多个效果

.combine() 方法是 TransitionEffect 最强大的特性之一，它允许将多个效果叠加在一起，同时播放：

typescript 复制代码

TransitionEffect.scale({ x: 0, y: 0 })
  .combine(TransitionEffect.opacity(0))
  .combine(TransitionEffect.translate({ y: 50 }))
  .animation({ duration: 500, curve: Curve.FastOutSlowIn })

这意味着一个组件可以同时缩放、淡出、并且向上移动------一次 .animation() 调用就完成了全部配置。

3.4 生命周期回调

在 API 12+ 中，.transition() 还支持 onFinish 回调，让你能够在过渡动画结束时执行自定义逻辑：

typescript 复制代码

.transition(
  TransitionEffect.opacity(0).animation({ duration: 500 }),
  (transitionIn: boolean) => {
    console.info(`过渡动画结束，transitionIn: ${transitionIn}`);
  }
)

其中 transitionIn 参数表示当前是入场动画结束（true）还是退场动画结束（false）。

四、实战项目架构

在分析具体的过渡动画用法之前，我们先看一下实战项目的整体架构。这是一个基于 HarmonyOS NEXT 的 ArkTS 应用，包含两个页面：

复制代码

entry/src/main/ets/pages/
├── Index.ets          // 首页：Hello World + 导航入口
└── TransitionDemo.ets // 演示页：6 种过渡动画场景

首页（Index.ets） 承担了两个功能：

点击 "Hello World" 文字，在 "Hello World" 和 "Welcome" 之间切换（用于验证页面状态管理正常）
点击底部按钮，通过 router.pushUrl() 跳转到过渡动画演示页

演示页（TransitionDemo.ets） 包含了 6 个独立的过渡动画示例，每个示例均由以下结构组成：

复制代码

标题文字（说明当前示例的 API 名称）
  ↓
控制按钮（"显示" / "隐藏"，切换 @State 布尔变量）
  ↓
条件渲染区域（if + .transition()，展示动画效果）

五、六大过渡动画场景深度拆解

接下来，我将逐一深入分析每个过渡动画场景的实现原理与技术要点。

5.1 场景一：淡入淡出 ------ TransitionEffect.OPACITY

核心代码：

typescript 复制代码

if (this.showOpacity) {
  Text('我使用了淡入淡出过渡 ✨')
    .transition(
      TransitionEffect.OPACITY
        .animation({ duration: 500, curve: Curve.EaseInOut })
    )
}

技术解析：

TransitionEffect.OPACITY 是框架预置的静态常量，语义上等价于 TransitionEffect.opacity(0)。它的行为是：

入场时 ：组件从 opacity: 0（完全透明）过渡到 opacity: 1（完全不透明）
退场时 ：组件从 opacity: 1 过渡到 opacity: 0

为什么推荐使用预置常量？主要有两个原因。第一，OPACITY 常量在设计上做了内部优化，性能略优于手动调用 opacity(0)。第二，它的语义清晰，代码阅读者一眼就能确认这是一个淡入淡出效果。

Curve 选择分析： 使用 Curve.EaseInOut（先加速后减速）是最适合淡入淡出的曲线。如果使用 Curve.Linear，透明度变化会显得机械生硬；如果使用 Curve.EaseOut，入场时透明度变化会过快，视觉上不够平滑。

适用场景： 提示消息的显示与消失、浮层（Toast）的淡入淡出、模态弹窗的背景蒙层。

5.2 场景二：底部滑入滑出 ------ TransitionEffect.move

核心代码：

typescript 复制代码

if (this.showMove) {
  Text('我从底部滑入，向底部滑出 ⬆️')
    .transition(
      TransitionEffect.move(TransitionEdge.BOTTOM)
        .animation({ duration: 400, curve: Curve.FastOutSlowIn })
    )
}

技术解析：

TransitionEffect.move(edge) 提供了一种从屏幕指定边缘移入/移出的效果。TransitionEdge 枚举包含以下值：

枚举值	入场方向	退场方向
`TransitionEdge.START`	从左边界移入	从左边界移出
`TransitionEdge.END`	从右边界移入	从右边界移出
`TransitionEdge.TOP`	从顶部移入	从顶部移出
`TransitionEdge.BOTTOM`	从底部移入	从底部移出

一个关键的设计细节是，.move(edge) 是对称过渡------入场和退场使用同一条边缘。这意味着组件从底部滑入，最终也会向底部滑出。

当我们需要入场和退场使用不同方向时（例如从左侧滑入、从右侧滑出），就需要使用下一节将介绍的 TransitionEffect.asymmetric()。

Curve 选择分析： Curve.FastOutSlowIn 是 Material Design 的核心缓动曲线，它让组件在开始时快速移动，到达目标位置前逐渐减速。这种"急停"的效果给人以干脆利落的感觉，非常适合于弹窗和面板的弹出场景。

适用场景： 底部弹出式菜单、通知栏下拉、页面底部的操作面板。

5.3 场景三：非对称位移 ------ TransitionEffect.asymmetric + translate

核心代码：

typescript 复制代码

if (this.showSlide) {
  Text('我从左侧滑入，从右侧滑出 🚀')
    .transition(
      TransitionEffect.asymmetric(
        // 入场：从左侧 -200px 位移到 0
        TransitionEffect.translate({ x: -200 })
          .animation({ duration: 400, curve: Curve.FastOutSlowIn }),
        // 退场：从 0 位移到右侧 +200px
        TransitionEffect.translate({ x: 200 })
          .animation({ duration: 400, curve: Curve.FastOutSlowIn })
      )
    )
}

技术解析：

TransitionEffect.asymmetric(enter, exit) 是本示例的核心 API，也是整个过渡动画体系中最灵活的部分。它接受两个 TransitionEffect 实例：

第一个参数：入场效果（enter）
第二个参数：退场效果（exit）

在这个案例中，我们利用 TransitionEffect.translate({ x: -200 }) 实现了组件从左侧入场的效果。{ x: -200 } 表示组件的初始位置在最终位置的左侧 200 像素处，在动画过程中逐渐移动到最终位置（x: 0）。

退场时则相反，{ x: 200 } 表示组件从最终位置向右移动 200 像素后消失。

关于坐标系统的理解： 在 ArkUI 中，位移的单位是 vp（virtual pixel，虚拟像素）。translate 方法的坐标轴以组件的最终位置为原点：

x 为负值 → 从左侧入场
x 为正值 → 从右侧退场
y 为负值 → 从上方入场
y 为正值 → 从下方退场

为什么需要非对称？ 很多现实场景中，组件的入场和退场使用相同的方向会带来视觉上的"折返"感。例如，一个通知从右侧滑入后，又从右侧滑出，用户会感觉通知是"缩回去"了，而不是"走完了"。而从左侧滑入、从右侧滑出则给用户一种"贯穿"的流畅感。

适用场景： 页面内的横幅通知（从左侧滑入、从右侧滑出）、列表项的滑动删除提示、横向滚动的轮播图切换。

5.4 场景四：缩放 + 透明度组合 ------ .scale().combine(.opacity)

核心代码：

typescript 复制代码

if (this.showScale) {
  Text('缩放 + 淡入淡出组合效果 🔄')
    .transition(
      TransitionEffect.scale({ x: 0, y: 0 })
        .combine(TransitionEffect.opacity(0))
        .animation({ duration: 500, curve: Curve.FastOutSlowIn })
    )
}

技术解析：

这是 TransitionEffect 组合能力的典型体现。TransitionEffect.scale({ x: 0, y: 0 }) 定义了组件从零大小（完全缩小）过渡到完整大小，而 .combine(TransitionEffect.opacity(0)) 叠加了透明度变化。

当这两个效果组合时，组件入场时从"透明且缩小"变为"不透明且完整大小"，退场时则反向进行。这种组合效果在视觉上比单纯的淡入淡出或缩放更有张力。

关于 scale 的参数说明：

{ x: 0, y: 0 }：宽度和高度都从 0 开始缩放，效果类似"从点展开"
{ x: 0, y: 1 }：宽度从 0 开始，高度不变，效果类似"从左侧展开"
{ x: 1, y: 0 }：高度从 0 开始，宽度不变，效果类似"从上往下展开"
{ x: 1.5, y: 1.5 }：从比实际大小更大的尺寸缩放回来，产生"弹入"效果

最佳实践： 在组合缩放和透明度时，建议将 .opacity(0) 一起组合。因为单纯的缩放（特别是从 0 开始）会让组件看起来像是"凭空出现"，加上透明度后过渡更加自然。

适用场景： 点赞动画（小红心跳出）、图片网格中的图片展开、拍照按钮的点击反馈。

5.5 场景五：旋转 + 位移 + 透明度三合一

核心代码：

typescript 复制代码

if (this.showRotate) {
  Text('旋转 + 位移 + 淡出 🎉')
    .transition(
      TransitionEffect.rotate({ angle: 180 })
        .combine(TransitionEffect.translate({ y: 50 }))
        .combine(TransitionEffect.opacity(0))
        .animation({ duration: 600, curve: Curve.FastOutSlowIn })
    )
}

技术解析：

这是本实战中组合程度最高的一个示例，同时使用了旋转、位移和透明度三种效果。TransitionEffect.rotate({ angle: 180 }) 定义了组件绕 Z 轴（垂直于屏幕方向）旋转 180 度。

关于 rotate 的参数矩阵：

参数	说明	默认值
`angle`	旋转角度（度）	必填
`x`	旋转轴 X 分量	0
`y`	旋转轴 Y 分量	0
`z`	旋转轴 Z 分量	1（默认绕 Z 轴）
`centerX`	旋转中心 X（百分比或 vp）	组件中心
`centerY`	旋转中心 Y（百分比或 vp）	组件中心

当 z: 1 时，组件绕垂直于屏幕的 Z 轴旋转，效果类似翻牌。如果设置 x: 1，则组件绕水平轴旋转，效果类似前后翻转。

组合效果的行为层次：

当三个效果通过 .combine() 组合时，它们是在同一个时间轴上并行播放的。具体到每个动画帧，ArkUI 会同时计算旋转角度、位移距离和透明度值，然后将它们叠加到组件上。这种并行性意味着用户会看到组件一边旋转、一边向下移动、一边变透明------三个变化在 600 毫秒内同时完成。

适用场景： 成就徽章弹出、游戏中的奖励展示、卡片翻转特效。

5.6 场景六：完全非对称过渡

核心代码：

typescript 复制代码

if (this.showAsymmetric) {
  Text('入场是缩放，退场是滑出 ⭐')
    .transition(
      TransitionEffect.asymmetric(
        // 入场：从右上角缩放+位移进入
        TransitionEffect.translate({ x: 100, y: -80 })
          .combine(TransitionEffect.scale({ x: 0, y: 0 }))
          .combine(TransitionEffect.opacity(0))
          .animation({ duration: 500, curve: Curve.FastOutSlowIn }),
        // 退场：向左滑出并淡出
        TransitionEffect.translate({ x: -200 })
          .combine(TransitionEffect.opacity(0))
          .animation({ duration: 350, curve: Curve.Linear })
      )
    )
}

技术解析：

这是所有示例中最具表现力的一个。它不仅入场和退场使用了完全不同的视觉效果，而且入场效果本身也由三种效果组合而成。

入场阶段 使用 translate({ x: 100, y: -80 }) 将组件的起始位置定在右下角，然后通过缩放和透明度的配合，让组件看起来像是从右下角"弹入"到中心位置。

退场阶段 则简化为只向左滑出并淡出，持续时间为 350 毫秒（比入场的 500 毫秒更短），曲线也换成了 Curve.Linear。

为什么退场可以比入场更短？ 这是一个心理学考量。用户对于"退出"通常期待快速完成，短暂的退场时长不会让用户感到等待，反而会提升操作手感。而对于"进入"，略微延长的动画能给用户足够的时间感知新出现的内容。

设计原则： 入场的动画应当引人注目但不过度张扬，退场的动画应当简洁快速不拖沓。

适用场景： 自定义的模态弹窗、引导页面的卡片切换、消息气泡的弹出与收回。

六、TransitionEffect 高级话题

6.1 子树的过渡动画传播

当在 if 条件渲染中同时出现多个组件时，过渡动画行为有一个重要的规则需要理解：

typescript 复制代码

if (this.flag) {
  Column() {                       // ← 根节点
    Row() {
      Image(...).id("image1")     // ← 子节点，有自己的 transition
        .transition(TransitionEffect.OPACITY)
    }
    Image(...).id("image2")       // ← 子节点，有自己的 transition
      .transition(TransitionEffect.scale({ x: 0, y: 0 }))
    Text("view")                  // ← 子节点，无 transition
  }
  .id("column1")
  .transition(TransitionEffect.opacity(0.99))  // ← 根节点的 transition
}

规则如下：

当 if 条件变为 true，整棵子树的所有节点被一起插入视图树
根节点 （上面的 Column）如果配置了 .transition()，会被优先应用
子节点 如果配置了各自的 .transition()，覆盖根节点的效果
没有配置 .transition() 的子节点（如上面的 Text("view")），默认继承根节点的过渡效果

这个传播机制意味着：如果你的子树中绝大多数组件使用同样的过渡效果，只需在根节点设置一次即可，个别需要定制化的子节点再单独设置。

6.2 TransitionOptions 与 TransitionEffect 的关系

在 API 10 之前，ArkTS 使用 TransitionOptions 接口来定义过渡效果：

typescript 复制代码

.transition({ type: TransitionType.Insert, opacity: 0 })

这种方式需要在 animateTo 闭包中触发：

typescript 复制代码

animateTo({ duration: 500 }, () => {
  this.show = !this.show;
})

从 API 10 开始，TransitionOptions 被标记为 deprecated，取而代之的是 TransitionEffect 类。两者最大的区别在于：

TransitionOptions 是被动的，需要配合 animateTo 的驱动
TransitionEffect 是声明式 的，动画参数直接定义在过渡效果上，无需 animateTo

如果你的项目是基于 API 24 的新项目，应当完全使用 TransitionEffect 而非 TransitionOptions。

6.3 Dialog 和 PromptAction 中的 TransitionEffect

TransitionEffect 不仅用于组件的条件渲染过渡，还可以用于自定义弹窗 （CustomDialog）和提示框（PromptAction）：

typescript 复制代码

// 在自定义弹窗中使用
customDialog.show({
  builder: ...,
  transition: TransitionEffect.move(TransitionEdge.BOTTOM)
    .animation({ duration: 300, curve: Curve.EaseOut }),
  maskTransition: TransitionEffect.opacity(0)
    .animation({ duration: 300 })
})

// 在 PromptAction 中使用
promptAction.showDialog({
  ...
  transition: TransitionEffect.scale({ x: 0, y: 0 })
    .combine(TransitionEffect.opacity(0))
    .animation({ duration: 200 })
})

6.4 卡片组件中的过渡动画

HarmonyOS NEXT 对 ArkTS 卡片（Widget）场景也全面支持了过渡动画。在 API 12+ 中，ArkTS 卡片内可以使用 TransitionEffect 实现流畅的组件过渡效果。这让桌面小部件的交互动效提升到了新的层次。

七、性能优化与最佳实践

7.1 避免过度组合

虽然 .combine() 非常强大，但建议不要在单个过渡中组合超过 3-4 种效果。过多的并行动画会增加 UI 渲染线程的负担，特别是在低端设备上可能导致掉帧。

反例：

typescript 复制代码

// 不推荐：四种效果并行，可能有性能压力
TransitionEffect.scale({ x: 0 })
  .combine(TransitionEffect.translate({ x: 100, y: 50 }))
  .combine(TransitionEffect.rotate({ angle: 360 }))
  .combine(TransitionEffect.opacity(0))

正例：

typescript 复制代码

// 推荐：如果确实需要多种效果，适当降低动画复杂度
TransitionEffect.scale({ x: 0 })
  .combine(TransitionEffect.opacity(0))
  .animation({ duration: 400 })

7.2 选择合适的动画时长

不同的交互场景对动画时长的感知是不同的：

场景	推荐时长	说明
按钮反馈	100-200ms	必须极快，不让用户等待
列表项插入	200-300ms	适中，保证流畅感
面板弹出	300-500ms	给用户足够的时间感知
成就展示	500-800ms	允许一定程度的"炫耀"
引导动画	800-1200ms	带有叙述性，需要更长时间

7.3 利用 TransitionEffect 预置常量

框架提供了几个预置的静态常量，使用它们比手动构造更高效：

常量	等效	推荐场景
`TransitionEffect.OPACITY`	`.opacity(0)`	通用淡入淡出
`TransitionEffect.SLIDE`	左右非对称滑入滑出	横向切换
`TransitionEffect.SLIDE_SWITCH`	缩放 + 滑动（600ms 内置）	轮播图切换
`TransitionEffect.IDENTITY`	无过渡	条件性禁用动画

7.4 合理使用 transition 结束回调

在 API 12+ 中，可以利用 onFinish 回调在动画结束时执行清理或联动操作：

typescript 复制代码

.transition(
  TransitionEffect.OPACITY.animation({ duration: 300 }),
  (transitionIn: boolean) => {
    if (!transitionIn) {
      // 退场动画结束，执行清理
      this.releaseResource();
    }
  }
)

但需要注意：结束回调应当只设置在子树的根节点上，因为只有根节点的退场动画结束后，子节点才会被真正从视图树中移除。

八、过渡动画设计原则

8.1 统一性

应用中所有同类型的过渡动效应保持一致的时长和曲线。例如，所有的 Toast 提示都使用 300ms 的淡入淡出，所有的底部弹窗都使用 400ms 的 move(BOTTOM)。统一的动画语言可以让用户建立起对应用的"肌肉记忆"。

8.2 层次性

多个组件同时出现时，考虑使用阶梯动画 （staggered animation），让组件逐个入场而不是同时出现。虽然 ArkTS 的 TransitionEffect 本身不直接支持延迟队列，但可以通过不同 duration 和 delay 的组合来模拟：

typescript 复制代码

// 第一组：立即入场，较长时间
Item1.transition(TransitionEffect.OPACITY.animation({ duration: 400 }))

// 第二组：延迟 100ms 入场，时间稍短
Item2.transition(TransitionEffect.OPACITY.animation({ duration: 300, delay: 100 }))

// 第三组：延迟 200ms 入场，时间更短
Item3.transition(TransitionEffect.OPACITY.animation({ duration: 250, delay: 200 }))

8.3 克制性

动画不是越多越好。高价值的动画应该留给对用户有直接意义的状态变更，而不是每一次微小的 UI 刷新。过度使用过渡动画会让界面显得"漂浮"，影响操作效率。

九、完整源码解读

以下是 TransitionDemo.ets 的完整结构分析，方便读者对照参考。

9.1 状态管理

typescript 复制代码

@State showOpacity: boolean = false;
@State showSlide: boolean = false;
@State showScale: boolean = false;
@State showRotate: boolean = false;
@State showAsymmetric: boolean = false;
@State showMove: boolean = false;

每个状态变量独立控制一个过渡示例。这种设计使得每个示例互不干扰，用户可以单独体验每种效果。

9.2 布局结构

typescript 复制代码

Scroll() {
  Column({ space: 16 }) {
    // 标题
    // 说明
    // 示例 1~6（各占一个 Column 卡片）
    // 知识点总结
  }
}

使用 Scroll + Column 的布局模式，保证了内容的可滚动性，避免了在屏幕较小设备上的内容溢出。

9.3 每个示例的统一结构

typescript 复制代码

Column({ space: 8 }) {               // 卡片容器
  Text('标题')                        // 示例标题
  Button('显示/隐藏')                 // 控制按钮
  if (condition) {                   // 条件渲染
    Text('动画内容')
      .transition(...)               // 过渡效果
  }
}
.padding(12)
.backgroundColor('#F5F5F5')          // 浅灰背景卡片
.borderRadius(16)

9.4 路由注册

在 main_pages.json 中注册页面路由：

json 复制代码

{
  "src": ["pages/Index", "pages/TransitionDemo"]
}

十、总结与展望

10.1 关键要点回顾

通过本文的深入分析与实战演练，我们系统地学习了 HarmonyOS NEXT 中组件过渡动画的完整知识体系：

过渡动画的本质 ：组件挂载/卸载时的视觉平滑过渡，由 @State + if 条件渲染触发
TransitionEffect 的核心能力：opacity（透明度）、translate（位移）、scale（缩放）、rotate（旋转）、move（边缘滑入）、combine（效果组合）
非对称过渡 ：通过 TransitionEffect.asymmetric(enter, exit) 实现入场和退场不同效果
动画参数控制 ：使用 .animation({ duration, curve, delay }) 链式配置
组合效果 ：使用 .combine() 叠加多个 TransitionEffect
子树的动画传播：根节点配置的 transition 会传递给未单独配置的子节点

10.2 与主流平台的对比

特性	HarmonyOS ArkTS	Android Jetpack Compose	SwiftUI
过渡 API	`TransitionEffect`	`AnimatedVisibility`	`.transition()` / `.animation()`
组合方式	`.combine()`	`EnterTransition + fadeIn() + slideIn()`	`.opacity().scale()` 链式
非对称过渡	`asymmetric(enter, exit)`	分别传入 enter/exit 参数	无需额外 API，自动处理
内置预置效果	4 个（OPACITY/SLIDE/...）	多个预置效果	多个预置效果
全局性	无需 import，全局可用	需要 import	需要 import

可以看出，ArkTS 的 TransitionEffect 在设计上吸收了各平台的长处，特别是全局可用性 和**.combine() 组合语法**是其独特优势。

10.3 未来展望

随着 HarmonyOS NEXT 的持续演进，过渡动画体系也在不断增强。展望未来，以下几个方向值得期待：

更丰富的预置效果 ：类似 Android 的 springEffect() 或 iOS 的 .interactiveSpring() 的物理弹簧效果
动画编排：更简洁的阶梯动画（staggered animation）API
共享元素过渡增强 ：跨页面的共享元素过渡（geometryTransition）能力提升
手势驱动的过渡动画：与手势系统更紧密的集成，实现"跟随手指"的过渡效果

鸿蒙原生 ArkTS 过渡动画完全指南：从入门到精通 TransitionEffect 实战