文章目录前言为什么需要并行动画核心实现多个状态变量绑定同一个元素组件上的属性绑定同时变化一行代码触发五个动画扩散缩放效果飞入效果重置到初始状态动画曲线怎么选性能考量写在最后前言上一篇聊了串联动画就是让几个动画排队执行。这篇反过来——并行动画也就是在一次交互中让一个元素的缩放、旋转、颜色、透明度、位移等属性在同一时刻一起变化。这种效果在 Material Design 和 iOS 的转场动画里很常见比如点击卡片后它同时放大、旋转、变透明。在 HarmonyOS7 的 ArkUI 框架中实现起来出奇地简单——把多个状态变量的修改塞进同一个animateTo闭包就行了。为什么需要并行动画单独的属性变化往往看着很生硬。比如一个按钮点击后只是变大了没有任何旋转或颜色配合视觉上就会觉得少了点什么。并行动画能让交互更丰富、更有质感单一动画并行动画只放大放大 旋转 变色有弹性感只位移位移 透明度变化有飞入感只变色变色 缩放有呼吸感一句话总结并行动画让单个交互更有层次感。核心实现多个状态变量绑定同一个元素先看状态定义。一个卡片元素同时绑定了五个属性EntryComponentstruct ParallelAnimation{StatecardScale:number1StatecardRotate:number0StatecardColor:string#4D96FFStatecardOpacity:number1StatecardOffsetY:number0build(){Column(){// ...}}}这五个状态分别控制缩放、旋转角度、背景色、透明度和纵向偏移。组件上的属性绑定Column().width(80).height(80).backgroundColor(this.cardColor).borderRadius(16).scale({x:this.cardScale,y:this.cardScale}).rotate({angle:this.cardRotate}).opacity(this.cardOpacity).translate({y:this.cardOffsetY}).animation({duration:600,curve:Curve.EaseInOut})每个属性都绑定到对应的State变量上而.animation()统一设置了动画参数——600ms 持续时间、EaseInOut 曲线。这意味着只要这些属性值发生变化它们会按照同样的动画参数同步过渡。同时变化一行代码触发五个动画Button(同时变化).onClick((){animateTo({duration:600,curve:Curve.EaseInOut},(){this.cardScale1.2this.cardRotate45this.cardColor#FF6B6Bthis.cardOpacity0.7this.cardOffsetY20})})关键点五个赋值语句在同一个animateTo闭包里ArkUI 会在闭包执行完毕后检测到所有状态变化然后同时启动五个属性的过渡动画。扩散缩放效果只修改两个属性就能做出扩散消失的感觉Button(扩散缩放).onClick((){animateTo({duration:500,curve:Curve.EaseOut},(){this.cardScale1.5this.cardOpacity0.5})})放大到 1.5 倍的同时透明度降到 0.5视觉上就像卡片在扩散、消融。飞入效果这个更有意思——先把状态瞬间设置到起始位置不带动画然后用animateTo过渡到正常状态Button(飞入效果).onClick((){// 瞬间设置初始状态无动画this.cardScale0.2this.cardOffsetY-80this.cardOpacity0// 带动画过渡到目标状态animateTo({duration:700,curve:Curve.Ease},(){this.cardScale1this.cardOffsetY0this.cardOpacity1})})这里有个重要的写法前三行赋值在animateTo外面所以是瞬间完成的没有过渡动画。后面的animateTo闭包里的赋值才会有动画过渡。利用这个特性可以做到先跳到起始位置再飞到目标位置。重置到初始状态Button(重置).onClick((){animateTo({duration:500},(){this.cardScale1this.cardRotate0this.cardColor#4D96FFthis.cardOpacity1this.cardOffsetY0})})重置也是带动画的让元素平滑地回到初始状态。动画曲线怎么选不同的曲线给人的感觉差别很大曲线视觉效果适用场景Curve.Linear匀速运动旋转、持续运动Curve.EaseIn慢入快出元素离开视野Curve.EaseOut快入慢出元素进入视野Curve.EaseInOut慢入慢出通用最安全Curve.FastOutSlowIn快速弹出慢慢停弹性、弹跳效果说实话大部分场景用EaseInOut就够了。除非你特别清楚想要什么效果否则别纠结曲线选择。性能考量并行动画同时操作多个属性理论上比单一动画更耗资源。不过在 ArkUI 框架中这些属性变换都是 GPU 层面的操作缩放、旋转、透明度实际性能开销很小。但有一点要注意不要同时给太多元素做并行动画。如果一个列表有 50 个 item 同时做 5 个属性的并行动画渲染压力还是会比较大的。建议控制在 10 个以内。写在最后并行动画的核心思路就一个把多个状态变量的修改放在同一个animateTo闭包里。这种写法简单直接而且能组合出非常丰富的视觉效果。缩放 旋转 变色 弹性感位移 透明度 飞入感缩放 透明度 扩散感。多试几种组合你会发现并行动画的表现力远超想象。