HarmonyOS7 转场动画 Transition：页面切换更顺滑

文章目录前言组件出现与消失的转场代码实现自定义转场方向与组合核心代码页面跳转转场完整示例转场不生效排查清单常见误区小白必踩完整可运行示例页面转场代码解析写在最后前言你有没有注意过好的 app 在页面之间切换、弹窗出现消失时不是啪地硬切而是有个淡入、滑入的过程这种过渡就叫转场动画。HarmonyOS 里做转场非常简单核心就一个.transition()修饰符。这篇文章我把组件出现/消失、页面跳转两种转场都讲了配代码你直接抄。组件出现与消失的转场最常见场景点按钮一个提示条从顶部滑下来再点它滑回去。关键是用状态控制组件是否存在再给它加转场。代码实现LocalshowTip:booleanfalsebuild(){Column(){Button(切换提示).onClick((){this.showTip!this.showTip})if(this.showTip){Text(这是一条温馨提示).fontSize(14).backgroundColor(#FFF3CD).padding(10).transition(TransitionEffect.SLIDE)// 滑入滑出}}}讲解if (this.showTip)控制这个 Text是否存在于组件树里。.transition(TransitionEffect.SLIDE)当组件出现或消失时自动播放滑入/滑出动画。注意transition只对组件的插入和删除生效。你用if控制存在性它就天然有了转场时机。直接改opacity是不会触发 transition 的。自定义转场方向与组合TransitionEffect还能组合多种效果比如淡入 从下方滑入核心代码.transition(TransitionEffect.OPACITY.combine(TransitionEffect.translate({y:30})).combine(TransitionEffect.scale({x:0.9,y:0.9})))OPACITY透明度过渡淡入淡出。.translate({ y: 30 })从下方 30vp 处滑入。.scale(...)带一点缩放显得更柔和。.combine(...)把多个效果叠加一次满足。页面跳转转场页面之间切换用Navigation的转场或在 push 时指定动画。简单起见给目标页的Entry组件加转场完整示例// 目标页面EntryComponentV2struct DetailPage{build(){Column(){Text(详情页).fontSize(24)}.width(100%).height(100%).transition(TransitionEffect.translate({x:100%}).animation({duration:300}))}}x: 100%表示从右边整屏宽度的位置滑入配合 300ms就是经典的新页面从右推入效果。转场不生效排查清单现象原因解决完全没动画没用if控制存在性用if/else控制组件增删只有淡入没滑动只写了 OPACITY用.combine(translate)动画卡顿duration 太长或组合过多精简效果控制在 300ms 内常见误区小白必踩误区说明不用if控制组件存在性transition只对组件的插入/删除生效直接改opacity不会触发转场。只写OPACITY没滑动想要滑入滑出用.combine(TransitionEffect.translate(...))叠加。duration 太长转场控制在 300ms 内太长显得拖沓体验反而差。下面这段代码可以直接复制到 DevEco Studio 里运行。建议你边读边敲改一改文末「动手改一改」里的参数亲眼看看效果。完整可运行示例页面转场用transition让组件出现/消失带过渡而不是直接闪现。代码解析// 配合 if 条件 animateTo 触发 transitionEntryComponentstruct TransDemo{Stateshow:booleanfalsebuild(){Column({space:20}){Button(this.show?隐藏:显示).onClick((){animateTo({duration:300},(){this.show!this.show})})if(this.show){Text(我带过渡出现了).fontSize(22).transition(TransitionEffect.OPACITY.animation({duration:300}))}}.width(100%).height(100%).justifyContent(FlexAlign.Center)}}你会看到什么点按钮文字以「淡入/淡出」的方式出现和消失而不是硬切。动手改一改把TransitionEffect.OPACITY改成TransitionEffect.SLIDE文字改为从侧边滑入。给 Text 同时叠两个 transitionOPACITY.combine(TransitionEffect.SLIDE)。把duration: 300改大看慢动作过渡。写在最后转场动画是性价比最高的体验优化——几行.transition()就能让 app 贵气不少。记住核心用if控制存在性来触发转场用combine叠加效果。把你项目里所有弹窗/提示的显隐都加上.transition(TransitionEffect.SLIDE)用户会明显觉得你的 app 更跟手、更顺。