文章目录前言animateTo让状态变化自带缓动transition组件进出场的灵魂geometryTransition跨页面共享元素实战串联商品列表到详情页的完整效果几点经验前言动画是 App 质感的分水岭。同样的功能加上丝滑的转场和恰到好处的动效用户感知上就是高级。HarmonyOS 7 在动画能力上做了一次大升级animateTo更稳定了transition支持不对称动画geometryTransition终于能跨页面做共享元素转场了。这篇把这三个 API 全过一遍最后用一个商品列表到详情页的实战案例串起来。animateTo让状态变化自带缓动animateTo的用法很简单——把状态修改的代码包进去框架自动给你加动画。但很多人只拿它做显隐切换太浪费了。它能驱动任何数值型状态的变化配合State可以做到很多效果Componentstruct CounterAnimation{Statecount:number0StatescaleValue:number1Staterotation:number0build(){Column({space:20}){Text(${this.count}).fontSize(60).fontWeight(FontWeight.Bold).scale({x:this.scaleValue,y:this.scaleValue}).rotate({angle:this.rotation})Button(点我 1).onClick((){animateTo({duration:400,curve:Curve.EaseOut,iterations:1,// 动画结束的回调onFinish:(){// 弹回效果animateTo({duration:200,curve:Curve.EaseIn},(){this.scaleValue1})}},(){this.count1this.scaleValue1.3this.rotation360})})}.width(100%).height(100%).justifyContent(FlexAlign.Center)}}每次点击数字会放大旋转然后弹回原位。这种奖励感的微交互对用户体验提升很大。有个容易踩坑的点animateTo的回调函数里只能修改State、Prop、Link这些响应式变量。如果你改的是普通变量动画不会触发。transition组件进出场的灵魂transition给组件的创建和销毁加动画。基础用法大家都会这里重点讲不对称转场——入场和出场用不同的动画效果。Componentstruct ToastNotification{Stateshow:booleanfalsebuild(){Column(){Button(显示通知).onClick((){this.show!this.show})if(this.show){Row(){Text(✓ 操作成功).fontSize(16).fontColor(#FFFFFF)}.padding(16).borderRadius(12).backgroundColor(#333333)// 不对称转场从底部滑入淡出消失.transition(TransitionEffect.translate({y:80}).opacity(0).animation({duration:400,curve:Curve.FastOutSlowIn}).combine(TransitionEffect.scale({x:0.8,y:0.8})),TransitionEffect.opacity().animation({duration:300,curve:Curve.EaseIn}))}}}}transition接受两个参数第一个是入场效果第二个是出场效果。两个可以完全不同这就是不对称转场。上面这个例子里通知从底部滑入并放大消失时直接淡出。再来看一个更高级的——结合asymmetric和自定义曲线.transition(asymmetric(// 入场从左侧弹入 缩放TransitionEffect.translate({x:-200}).scale({x:0.5,y:0.5}).animation({duration:500,curve:Curve.EaseOutBack}),// 出场向右滑出 缩小TransitionEffect.translate({x:200}).scale({x:0.5,y:0.5}).opacity(0).animation({duration:400,curve:Curve.EaseIn})))Curve.EaseOutBack会在末尾有一个轻微回弹做卡片列表的时候用这个曲线特别有弹性感。geometryTransition跨页面共享元素这才是重头戏。共享元素转场就是列表里的小图点开变成详情页的大图那种效果。之前只能在同一个页面里用sharedTransition跨页面搞不定。HarmonyOS 7 的geometryTransition解决了这个问题。核心思路给两个页面的对应元素设置相同的geometryTransitionID框架会自动计算位置差补间动画。列表页的商品卡片Componentstruct ProductCard{Propproduct:ProductItembuild(){Column(){Image(this.product.coverUrl).width(120).height(120).borderRadius(8)// 关键设置共享元素 ID.geometryTransition(product-cover-${this.product.id})Text(this.product.title).fontSize(14).maxLines(2).geometryTransition(product-title-${this.product.id})}.onClick((){RouterManager.getInstance().push(ProductDetail,{id:this.product.id})})}}详情页的对应元素Componentstruct ProductDetailPage{StateproductId:stringStateproduct:ProductItemnewProductItem()build(){Scroll(){Column(){Image(this.product.coverUrl).width(100%).height(300)// 和列表页相同的 ID.geometryTransition(product-cover-${this.productId})Text(this.product.title).fontSize(22).fontWeight(FontWeight.Bold).geometryTransition(product-title-${this.productId})// 详情页的其他内容...this.DetailContent()}}}BuilderDetailContent(){Column({space:16}){Text(¥${this.product.price}).fontSize(28).fontColor(#FF4D4F)Text(this.product.description).fontSize(14).fontColor(#666666)}.padding(16)// 详情内容用 transition 淡入.transition(TransitionEffect.opacity().animation({duration:300,delay:200}))}}注意几个要点两边的geometryTransitionID 必须完全一致跳转必须用NavPathStack的pushPathrouter 模块不支持详情页的非共享内容建议加delay等共享元素动画快结束时再淡入视觉上更连贯。实战串联商品列表到详情页的完整效果把上面三个能力组合起来做一个完整的转场效果。列表页用transition做卡片入场跳转时用geometryTransition做共享元素过渡详情页内容用animateTo做数字动画// 详情页的价格跳动动画Componentstruct PriceAnimator{StatedisplayPrice:number0ProptargetPrice:number0aboutToAppear(){// 延迟触发等共享元素转场完成setTimeout((){animateTo({duration:800,curve:Curve.EaseOutCubic},(){this.displayPricethis.targetPrice})},350)}build(){Text(¥${this.displayPrice.toFixed(2)}).fontSize(32).fontWeight(FontWeight.Bold).fontColor(#FF4D4F)}}用户从列表点进详情页商品封面从小图平滑放大到大图标题位置自然移动价格从 0 跳到实际金额其他内容依次淡入。整个流程不到一秒但用户感知到的就是流畅和精致。几点经验animateTo的duration别太长200-400ms 是甜区。超过 500ms 用户就会觉得慢。geometryTransition目前对复杂布局的支持还有限共享元素最好是简单的矩形图片和文字。嵌套太深的容器做共享元素位置计算可能会飘。转场动画别叠加太多效果。一个共享元素 一个淡入就够了效果越多越容易翻车尤其在低端机上。动画是锦上添花不是越多越好。该快的地方快按钮反馈 100ms该慢的地方慢页面转场 350ms节奏感比炫酷效果更重要。