引言转场动画可以提升用户交互体验在页面跳转、组件切换时添加转场可以让交互过程更流畅。HarmonyOS 为开发者提供了丰富的转场动效 API可以轻松实现各种转场效果。本节课将系统讲解转场动画的概念、分类以及基础转场和高级模板化转场的开发方法。核心内容转场动画基础概念转场动画定义对将要出现或消失的组件、页面添加动画效果实现页面/组件间的平滑过渡提升用户交互体验让体验更连贯流畅。转场动画分类对比对比维度基础转场动画高级模板化转场动画目标简化组件显隐管理提供通用过渡效果实现复杂交互逻辑提升视觉沉浸感应用场景单一组件出现/消失跨页面元素联动多组件协同动画实现复杂度简单单接口调用复杂需组合 API 或跨页面协调基础转场适用于单组件显隐开发难度低高级转场适用于复杂跨页面交互开发难度高。高级模板化转场分类高级模板化转场用于实现复杂场景的视觉过渡包含三种转场能力导航转场页面路由的默认转场方式对应一个界面消失、另一个界面出现的动画效果专门用于常规页面切换。共享元素转场一镜到底界面切换时对两个页面中相同/相似元素做位置和大小匹配的过渡动画让页面切换更丝滑也被称为一镜到底。模态转场新界面覆盖在旧界面之上的转场动画旧界面不会消失弹框是典型的模态转场案例。基础转场核心接口transitiontransition是基础的组件转场接口用于实现单个组件出现/消失时的动画效果。其参数TransitionEffect可以通过函数形式指定不同的转场效果。接口定义接口名称参数类型参数描述transitionTransitionEffect10设置组件插入显示和删除隐藏的过渡效果transition12(TransitionEffect, OptionalTransitionFinishCallback)设置过渡效果额外增加转场动画结束回调不对称转场可以为组件出现和消失分别设置不同的转场效果通过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组件实现页面路由导航自带默认转场效果。开发步骤定义路由栈变量控制界面跳转。跳转时将目标页面入栈自动触发转场动画完成页面切换。共享元素转场开发实现不同页面间相同元素的丝滑过渡。原理给两个页面的目标组件设置相同的共享元素 ID当页面切换时系统自动添加过渡动画实现丝滑转场也可结合基础转场效果丰富动效。模态转场开发新页面覆盖旧页面的转场形式支持全模态、半模态等多种接口。以半模态为例定义布尔变量控制半模态页面显示状态。通过点击事件修改变量打开半模态。在builder中自定义半模态内容。关闭时修改变量为false即可触发关闭转场。总结本节课系统讲解了 HarmonyOS 转场动画的核心知识转场动画概念与分类分为基础转场动画单组件显隐开发简单和高级模板化转场动画跨页面复杂交互开发难度高两类。基础转场核心接口transition通过TransitionEffect配置转场效果支持不对称转场asymmetric和转场结束回调。TransitionEffect常用接口opacity透明度取值范围 [0,1]、translate平移、scale缩放正负值效果不同、rotate旋转、move边缘滑入、asymmetric不对称、combine链式组合、animation动画参数配置。高级模板化转场三种类型导航转场页面路由切换、共享元素转场一镜到底相同 ID 匹配、模态转场新界面覆盖旧界面。