当前位置：首页 > news >正文

HarmonyOS7 TransitionEffect 实战：组件显示隐藏的过渡动画

news 2026/7/24 22:48:13

文章目录

- 前言
- 效果展示
- 实现原理
- 代码详解
- - 基础淡入淡出 + 缩放组合
  - 隐藏时的占位提示
  - 控制按钮
- 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}))))