引言

转场动画可以提升用户交互体验，在页面跳转、组件切换时添加转场可以让交互过程更流畅。HarmonyOS 为开发者提供了丰富的转场动效 API，可以轻松实现各种转场效果。本节课将系统讲解转场动画的概念、分类，以及基础转场和高级模板化转场的开发方法。

核心内容

转场动画基础概念

转场动画定义：对将要出现或消失的组件、页面添加动画效果，实现页面/组件间的平滑过渡，提升用户交互体验，让体验更连贯流畅。

转场动画分类对比：

对比维度	基础转场动画	高级模板化转场动画
目标	简化组件显隐管理，提供通用过渡效果	实现复杂交互逻辑，提升视觉沉浸感
应用场景	单一组件出现/消失	跨页面元素联动，多组件协同动画
实现复杂度	简单，单接口调用	复杂，需组合 API 或跨页面协调

基础转场适用于单组件显隐，开发难度低；高级转场适用于复杂跨页面交互，开发难度高。

高级模板化转场分类

高级模板化转场用于实现复杂场景的视觉过渡，包含三种转场能力：

1. 导航转场：页面路由的默认转场方式，对应一个界面消失、另一个界面出现的动画效果，专门用于常规页面切换。

2. 共享元素转场（一镜到底）：界面切换时，对两个页面中相同/相似元素做位置和大小匹配的过渡动画，让页面切换更丝滑，也被称为"一镜到底"。

3. 模态转场：新界面覆盖在旧界面之上的转场动画，旧界面不会消失，弹框是典型的模态转场案例。

基础转场核心接口：transition

transition 是基础的组件转场接口，用于实现单个组件出现/消失时的动画效果。其参数 TransitionEffect 可以通过函数形式指定不同的转场效果。

接口定义：

接口名称	参数类型	参数描述
transition	TransitionEffect（10+）	设置组件插入显示和删除隐藏的过渡效果
transition（12+）	(TransitionEffect, Optional<TransitionFinishCallback>)	设置过渡效果，额外增加转场动画结束回调

不对称转场：可以为组件出现和消失分别设置不同的转场效果，通过 TransitionEffect.asymmetric(effectIn, effectOut) 实现。若不设置不对称，则组件出现和消失使用相同转场效果。

TransitionEffect 常用接口

opacity（透明度转场）

设置转场时的透明度变化效果，参数为插入起点和删除终点的透明度值。取值范围为 [0, 1]，非法值处理规则：小于 0 按 0 处理，大于 1 按 1 处理。

@State flag: boolean = true;

build() {
    Column() {
        Button('hide / show')
            .width(120).height(30).margin(30)
            .onClick(() => { this.flag = !this.flag; })
        if (this.flag) {
            Image($r('app.media.test'))
                .width(200).height(200)
                .transition(TransitionEffect.opacity(0.5))
                .animation({ duration: 1000 })
        }
    }
    .width('100%')
}

translate（平移转场）

设置转场时的平移动画效果，参数 TranslateOptions 可设置 x、y、z 三个方向的平移距离。组件出现时从偏移位置平移回原位，消失时从原位平移到偏移位置。

.transition(TransitionEffect.translate({ x: 100, y: 100 }))
    .animation({ duration: 1000 })

scale（缩放转场）

设置转场时的缩放效果，参数 ScaleOptions 包含 x、y 方向缩放倍数，以及 centerX/centerY 缩放中心点坐标，默认中心点为组件中心（50%，50%）。

• 数值 > 1：放大

• 0 < 数值 < 1：缩小

• 数值 < 0：沿对应轴反方向缩放

// 左上角为中心点，xy 方向均缩小为 0.5 倍
.transition(TransitionEffect.scale({ x: 0.5, y: 0.5, centerX: 0, centerY: 0 }))
    .animation({ duration: 1000 })

rotate（旋转转场）

设置转场时的旋转效果，参数包含各轴旋转分量、旋转角度 angle 和中心点。angle 为正顺时针旋转，为负逆时针旋转。

move（边缘滑入滑出）

指定组件从屏幕边缘滑入/滑出的效果，本质是平移效果，参数可设置为上、下、左、右四个屏幕边缘。例如设置为 Top 则组件从顶部滑入滑出。

asymmetric（不对称转场）

分别为组件出现和消失指定不同的转场效果，参数为 appear 和 disappear 两个独立的转场效果对象。

TransitionEffect.asymmetric(effectIn, effectOut)

combine（链式组合）

对多个 TransitionEffect 进行链式组合，将多个转场效果叠加，形成复合转场。例如将平移和透明度效果组合，实现平移同时改变透明度的复合效果。

TransitionEffect.translate({ x: 100 }).combine(TransitionEffect.opacity(0.5))

animation（动画参数配置）

指定当前转场效果的动画参数，可配置动画时长、播放速度、曲线、延迟、播放次数、播放模式等，实现自定义动画节奏。

.transition(TransitionEffect.rotate({ angle: 180 })
    .animation({ duration: 2000, tempo: 1.2 }))

静态预置转场效果：TransitionEffect 还提供了预置的静态成员变量，可以快速实现基础转场，例如 TransitionEffect.IDENTITY（空转场）和 TransitionEffect.OPACITY（默认透明度转场）。

高级模板化转场开发思路

导航转场开发

使用 Navigation 组件实现页面路由导航，自带默认转场效果。开发步骤：

1. 定义路由栈变量控制界面跳转。

2. 跳转时将目标页面入栈，自动触发转场动画完成页面切换。

共享元素转场开发

实现不同页面间相同元素的丝滑过渡。原理：给两个页面的目标组件设置相同的共享元素 ID，当页面切换时系统自动添加过渡动画实现丝滑转场，也可结合基础转场效果丰富动效。

模态转场开发

新页面覆盖旧页面的转场形式，支持全模态、半模态等多种接口。以半模态为例：

1. 定义布尔变量控制半模态页面显示状态。

2. 通过点击事件修改变量打开半模态。

3. 在 builder 中自定义半模态内容。

4. 关闭时修改变量为 false 即可触发关闭转场。

总结

本节课系统讲解了 HarmonyOS 转场动画的核心知识：

1. 转场动画概念与分类：分为基础转场动画（单组件显隐，开发简单）和高级模板化转场动画（跨页面复杂交互，开发难度高）两类。

2. 基础转场核心接口 transition：通过 TransitionEffect 配置转场效果，支持不对称转场（asymmetric）和转场结束回调。

3. TransitionEffect 常用接口：opacity（透明度，取值范围 [0,1]）、translate（平移）、scale（缩放，正负值效果不同）、rotate（旋转）、move（边缘滑入）、asymmetric（不对称）、combine（链式组合）、animation（动画参数配置）。

4. 高级模板化转场三种类型：导航转场（页面路由切换）、共享元素转场（一镜到底，相同 ID 匹配）、模态转场（新界面覆盖旧界面）。