HarmonyOS7 TransitionEffect 实战：组件显示隐藏的过渡动画
文章目录
- 前言
- 效果展示
- 实现原理
- 代码详解
- 基础淡入淡出 + 缩放组合
- 隐藏时的占位提示
- 控制按钮
- TransitionEffect 有哪些效果
- 不对称过渡 TransitionEffect.asymmetric
- 常见问题
- 写在最后
前言
App 里经常有这种需求：点击按钮，一个面板优雅地淡入出现；再点一下，面板缩小消失。不是简单的"有"和"无"的硬切，而是有一个过渡过程。
在 ArkUI 中，这个效果靠transition属性配合if-else条件渲染来实现。今天就来聊聊TransitionEffect的各种玩法，包括组合效果和不对称过渡。
效果展示
实现了一个可切换的内容面板：
- 显示时，面板从中心缩放展开并淡入
- 隐藏时，面板缩小并淡出
- 支持切换不同内容，每次切换都带过渡动画
实现原理
TransitionEffect是 ArkUI 专门为组件出现/消失设计的过渡效果。它和.animation()不一样——.animation()是属性值变化时的过渡，而transition是组件从无到有、从有到无时的过渡。
简单说就是：
.animation()→ 组件存在，属性变化时的动画.transition()→ 组件创建/销毁时的动画
代码详解
基础淡入淡出 + 缩放组合
if(this.visible){Column().width('100%').height(120).backgroundColor(PRESET_COLORS[this.selectedIndex%8].value).borderRadius(16).transition(TransitionEffect.OPACITY.animation({duration:400,curve:Curve.EaseInOut}).combine(TransitionEffect.scale({x:0,y:0}).animation({duration:400})))}拆解一下这段代码：
TransitionEffect.OPACITY：透明度从 0 过渡到 1（出现时）或从 1 过渡到 0（消失时）.animation({ duration: 400 })：为这个效果指定动画参数.combine(...)：组合另一个过渡效果——从 scale(0,0) 到 scale(1,1)
两个效果同时播放，就实现了"从中心缩放展开并淡入"的效果。
隐藏时的占位提示
当面板隐藏时，显示一个占位提示，它也有自己的过渡效果：
}else{Column().width('100%').height(120).backgroundColor('#E8E8E8').borderRadius(16).justifyContent(FlexAlign.Center)Column(){Text('内容已隐藏').fontSize(14).fontColor('#999999')}.transition(TransitionEffect.OPACITY.animation({duration:300}))}这个占位区域只用了透明度渐变，比主面板的过渡简单一些。
控制按钮
Row({space:10}){Button(this.visible?'隐藏':'显示').onClick(()=>{this.visible=!this.visible})Button('切换内容').onClick(()=>{this.selectedIndex++this.visible=true})Button('滑入显示').onClick(()=>{this.visible=true})Button('淡出隐藏').onClick(()=>{this.visible=false})}.width('100%').justifyContent(FlexAlign.SpaceEvenly).margin({top:16})TransitionEffect 有哪些效果
ArkUI 内置了这些TransitionEffect：
| 效果 | 说明 | 常用参数 |
|---|---|---|
TransitionEffect.OPACITY | 透明度渐变 | 0→1 或 1→0 |
TransitionEffect.translate() | 平移过渡 | { x: 100 }从右侧滑入 |
TransitionEffect.scale() | 缩放过渡 | { x: 0, y: 0 }从中心放大 |
TransitionEffect.rotate() | 旋转过渡 | { angle: 90 }旋转出现 |
TransitionEffect.move() | 位置移动过渡 | 基于组件位置变化 |
这些效果可以通过.combine()任意组合，实现复杂的过渡动画。
不对称过渡 TransitionEffect.asymmetric
如果想要出现和消失时用不同的效果呢？用asymmetric：
.transition(TransitionEffect.asymmetric(// 出现时的效果TransitionEffect.OPACITY.animation({duration:300}).combine(TransitionEffect.translate({y:-20}).animation({duration:300})),// 消失时的效果TransitionEffect.OPACITY.animation({duration:200}).combine(TransitionEffect.translate({y:20}).animation({duration:200}))))出现时从上方滑入 + 淡入（300ms），消失时向下方滑出 + 淡出（200ms）。不对称过渡让交互更自然，因为"出现"和"消失"在视觉上本来就不应该是对称的。
常见问题
Q: transition 不生效怎么办？
检查两点：
- 组件必须是在
if-else条件渲染中，@State变量控制显示/隐藏 - 状态变量的修改必须触发
build()重新渲染
Q: 能不能用.animation()替代transition？
不行。.animation()只在组件存在时生效，组件被销毁后属性变化就没有载体了。transition专门处理组件创建和销毁的过渡。
Q: 过渡动画的时长怎么选？
经验值：
- 出现动画：300-500ms，稍慢一点让用户注意到
- 消失动画：200-300ms，快一点不拖沓
写在最后
TransitionEffect是 ArkUI 里做组件出现/消失动画的利器。掌握combine组合和asymmetric不对称这两个关键 API，就能覆盖绝大部分场景。
实际开发中，建议给每个需要频繁显示/隐藏的面板都加上过渡效果，哪怕是简单的透明度渐变，体验也会好很多。