文章目录前言效果展示实现原理代码详解基础淡入淡出 缩放组合隐藏时的占位提示控制按钮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.selectedIndexthis.visibletrue})Button(滑入显示).onClick((){this.visibletrue})Button(淡出隐藏).onClick((){this.visiblefalse})}.width(100%).justifyContent(FlexAlign.SpaceEvenly).margin({top:16})TransitionEffect 有哪些效果ArkUI 内置了这些TransitionEffect效果说明常用参数TransitionEffect.OPACITY透明度渐变0→1 或 1→0TransitionEffect.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就能覆盖绝大部分场景。实际开发中建议给每个需要频繁显示/隐藏的面板都加上过渡效果哪怕是简单的透明度渐变体验也会好很多。
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.selectedIndexthis.visibletrue})Button(滑入显示).onClick((){this.visibletrue})Button(淡出隐藏).onClick((){this.visiblefalse})}.width(100%).justifyContent(FlexAlign.SpaceEvenly).margin({top:16})TransitionEffect 有哪些效果ArkUI 内置了这些TransitionEffect效果说明常用参数TransitionEffect.OPACITY透明度渐变0→1 或 1→0TransitionEffect.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就能覆盖绝大部分场景。实际开发中建议给每个需要频繁显示/隐藏的面板都加上过渡效果哪怕是简单的透明度渐变体验也会好很多。
