用 setTimeout 编排动画序列：HarmonyOS6 PC 串联动画的正确姿势

搞 HarmonyOS6 PC 端开发的过程中有一个动画需求几乎每个项目都会遇到但文档里几乎找不到完整方案——让几个动画按顺序依次执行。举个例子页面上有 4 个卡片要它们一个一个飞进来而不是一窝蜂同时出现。这种效果在引导页、数据面板加载、成就展示等场景里特别常见。问题来了animateTo()是个异步执行的函数它不会等你动画做完再往下走代码。你连着写 4 个animateTo()它们会同时触发根本不会排队。这篇文章就来聊怎么用setTimeout把动画串起来以及这个方案的一些坑和更优雅的替代方案。先看效果4 个方块依次进场直接上代码这个 Demo 实现了两种串联效果——“依次进场和波浪效果”。EntryComponentstruct SerialAnimationDemo{Statestep1:number0Statestep2:number0Statestep3:number0Statestep4:number0build(){Column(){Text(串联动画).fontSize(18).fontWeight(FontWeight.Bold).margin({bottom:8})Column(){Row({space:12}){ForEach([0,1,2,3],(idx:number){Column().width(60).height(60).backgroundColor(this.getColor(idx)).borderRadius(12).opacity(([this.step1,this.step2,this.step3,this.step4])[idx]).scale({x:([this.step1,this.step2,this.step3,this.step4])[idx],y:([this.step1,this.step2,this.step3,this.step4])[idx]}).animation({duration:400,curve:Curve.EaseOut})})}.width(100%).justifyContent(FlexAlign.Center)Row({space:10}){Button(依次进场).onClick((){this.step10;this.step20;this.step30;this.step40setTimeout((){animateTo({duration:400},(){this.step11})},0)setTimeout((){animateTo({duration:400},(){this.step21})},200)setTimeout((){animateTo({duration:400},(){this.step31})},400)setTimeout((){animateTo({duration:400},(){this.step41})},600)})Button(波浪效果).onClick((){for(leti0;i4;i){setTimeout((){animateTo({duration:300,curve:Curve.EaseOut},(){if(i0)this.step11if(i1)this.step21if(i2)this.step31if(i3)this.step41})setTimeout((){animateTo({duration:300},(){if(i0)this.step10if(i1)this.step20if(i2)this.step30if(i3)this.step40})},300)},i*150)}})Button(重置).onClick((){this.step10;this.step20;this.step30;this.step40})}.width(100%).justifyContent(FlexAlign.SpaceEvenly).margin({top:16})}.width(100%).backgroundColor(#FFFFFF).borderRadius(12).padding(16).margin({top:12})}.width(100%).height(100%).backgroundColor(#F5F6FA).padding(16)}getColor(index:number):string{constcolors[#FF6B6B,#FFA500,#FFD93D,#6BCB77]returncolors[index]}}代码拆解为什么这么写状态设计的思路4 个方块每个方块需要控制 opacity透明度和 scale缩放所以我定义了 4 个独立的状态变量step1到step4。每个方块同时绑定了 opacity 和 scale 两个属性。当 step 值从 0 变为 1 时方块从完全透明 缩放为零变为完全不透明 正常大小视觉上就是一个从小到大弹出来的效果。说实话用数组来做会更优雅但 ArkUI 的State对数组索引赋值的响应式追踪在某些场景下不够灵敏用独立变量是最稳的方案。.animation() 修饰器的作用每个方块上都挂了.animation({ duration: 400, curve: Curve.EaseOut })。这意味着当 step 值通过animateTo()改变时opacity 和 scale 的变化会自动做 400ms 的 EaseOut 过渡。这里没有用.animation()的 curve 来串联——真正控制时间轴的是animateTo()和setTimeout的配合。依次进场核心逻辑setTimeout((){animateTo({duration:400},(){this.step11})},0)setTimeout((){animateTo({duration:400},(){this.step21})},200)setTimeout((){animateTo({duration:400},(){this.step31})},400)setTimeout((){animateTo({duration:400},(){this.step41})},600)时间轴是这样的时间线 (ms): 0 ----200 ----400 ----600 ----800 ----1000 方块1: |动画| 方块2: |动画| 方块3: |动画| 方块4: |动画|每个方块间隔 200ms 启动但每个动画本身要 400ms。所以方块 1 的动画还没结束方块 2 就已经开始了。这种部分重叠的效果比一个做完再开始下一个更流畅视觉上不会有明显的等待感。如果你想要严格的前后衔接前一个做完再开始下一个把间隔改成 400ms 就行了setTimeout((){animateTo({duration:400},(){this.step11})},0)setTimeout((){animateTo({duration:400},(){this.step21})},400)setTimeout((){animateTo({duration:400},(){this.step31})},800)setTimeout((){animateTo({duration:400},(){this.step41})},1200)波浪效果嵌套 setTimeout波浪效果的逻辑更复杂一些——每个方块先放大再缩回去而且彼此之间有重叠for(leti0;i4;i){setTimeout((){// 第一步放大step 变 1animateTo({duration:300,curve:Curve.EaseOut},(){if(i0)this.step11if(i1)this.step21if(i2)this.step31if(i3)this.step41})// 第二步300ms 后缩回去step 变 0setTimeout((){animateTo({duration:300},(){if(i0)this.step10if(i1)this.step20if(i2)this.step30if(i3)this.step40})},300)},i*150)}时间轴变成了这样方块1: 放大|缩小| 方块2: 放大|缩小| 方块3: 放大|缩小| 方块4: 放大|缩小|每个方块在放大 300ms 后自动缩回去而下一个方块在 150ms 后就开始放大。效果就是波浪从左传到右。这里有个小技巧——嵌套的 setTimeout。外层 setTimeout 控制每个方块的启动时机内层 setTimeout 控制放大后多久缩回去。这种嵌套写法虽然可读性不太好但在 ArkUI 目前的动画 API 下是最直接的方案。setTimeout 精度问题真的靠谱吗坦白讲setTimeout 的精度在 JavaScript/ArkTS 运行时里是个老问题。规范保证的是至少延迟这么久而不是精确延迟这么久。也就是说setTimeout(fn, 200)的实际执行时间可能是 202ms、205ms极端情况下甚至可能 210ms。对于 UI 动画来说这个精度其实够用了。人眼对 10-20ms 的时间差基本无感而 setTimeout 在正常负载下的误差通常也就个位数毫秒。但如果你遇到了这些情况就要小心了大量动画同时排队如果一次排了 20 个 setTimeout主线程可能在密集触发时出现掉帧动画执行期间有重计算比如动画过程中在 doing 大量数据处理会抢占主线程需要严格同步的多设备动画这个场景 setTimeout 确实不够精确一个实际踩过的坑我曾经在一个 HarmonyOS6 PC 项目里遇到过这样的问题页面有 15 个列表项要依次入场每项间隔 80ms。在开发机上跑得挺好到了低配 PC 上前几个动画正常后面的明显卡顿和堆积。原因是每个animateTo()触发后ArkUI 框架要在渲染线程做插值计算15 个动画密集创建对渲染管线有一定压力。解决方案把间隔从 80ms 加大到 120ms同时把动画时长从 400ms 缩短到 250ms。总体时间差不多但每个动画的重叠更少渲染压力小了很多。更优雅的方案Promise 封装如果你觉得一堆 setTimeout 嵌套着太丑可以用 Promise 包装一下// 封装一个返回 Promise 的延迟函数functiondelay(ms:number):Promisevoid{returnnewPromise((resolve){setTimeout(()resolve(),ms)})}// 封装一个带动画的延迟函数functionanimateWithDelay(delayMs:number,duration:number,curve:Curve,action:()void):Promisevoid{returnnewPromise((resolve){setTimeout((){animateTo({duration:duration,curve:curve,onFinish:()resolve()},action)},delayMs)})}有了这个工具函数你就可以用 async/await 来写动画序列了asyncfunctionplayEntryAnimation(){// 方块1 先进场做完等它awaitanimateWithDelay(0,400,Curve.EaseOut,(){this.step11})// 方块1 做完后方块2 进场awaitanimateWithDelay(0,400,Curve.EaseOut,(){this.step21})// 然后方块3awaitanimateWithDelay(0,400,Curve.EaseOut,(){this.step31})// 最后方块4awaitanimateWithDelay(0,400,Curve.EaseOut,(){this.step41})}这种写法的好处是完全串行——前一个动画的 onFinish 触发后才开始下一个。时间控制最精确不会出现 setTimeout 的累积误差。但缺点是代码不够灵活。如果你想让动画有重叠像上面 Demo 里的效果就得组合使用 Promise.allasyncfunctionplayOverlapAnimation(){// 同时启动所有动画但各自有不同的延迟awaitPromise.all([animateWithDelay(0,400,Curve.EaseOut,(){this.step11}),animateWithDelay(200,400,Curve.EaseOut,(){this.step21}),animateWithDelay(400,400,Curve.EaseOut,(){this.step31}),animateWithDelay(600,400,Curve.EaseOut,(){this.step41}),])// 所有动画都完成后才会走到这里console.log(全部动画完成)}串联 vs 并联什么时候用哪种这个问题我觉得值得单独说一下因为很多开发者其实没有主动思考过。串联动画依次执行适合这些场景引导页的步骤说明——第一步讲完再讲第二步数据加载完成后的逐项展示——先出标题、再出图表、再出按钮成就/奖励的逐一揭晓——制造悬念感表单的分步填写——引导用户注意力并联/重叠动画同时或有重叠地执行适合这些场景页面整体入场——所有元素协调地出现列表项的交错入场——虽然每个都有延迟但彼此有重叠复杂的状态切换——颜色、大小、位置同时变化说实话实际项目里用得最多的其实是有延迟的重叠动画——就是上面 Demo 里依次进场那种写法。它既有串联的节奏感又不会因为完全串行而显得拖沓。关于动态列表项的串联动画Demo 里只有 4 个方块但如果你的列表项数量不固定呢比如从后端拿回来的数据可能有 3 条也可能有 20 条。这时候就不能硬编码step1, step2, step3, step4了得用数组StateitemOpacities:number[][]aboutToAppear(){// 根据数据量初始化状态数组this.itemOpacitiesnewArray(this.dataList.length).fill(0)}playSequentialAnimation(){constinterval100// 每项间隔 100msfor(leti0;ithis.dataList.length;i){setTimeout((){animateTo({duration:350,curve:Curve.EaseOut},(){this.itemOpacities[i]1})},i*interval)}}但这里有个坑ArkUI 的State装饰器对数组内部元素的修改在某些版本里可能不会触发响应式更新。解决方案是用一个新的数组替换旧数组setTimeout((){animateTo({duration:350,curve:Curve.EaseOut},(){constnewState[...this.itemOpacities]newState[i]1this.itemOpacitiesnewState})},i*interval)或者更保险的方式——使用ObjectLink或Observed装饰数据模型类让每个列表项自己管理自己的动画状态。这种方式在大型列表里性能更好因为不需要每次都替换整个数组。HarmonyOS6 PC 端的特别考虑PC 端和手机端在串联动画上有个关键区别PC 端屏幕大元素多。手机上做 4 个卡片的依次进场用户一眼就能看全。但在 HarmonyOS6 PC 端你可能面对的是 20 个列表项、3 列卡片网格、侧边栏 主内容区同时入场。几个经验控制总时长不管多少元素串联动画的总时长别超过 1.5-2 秒。用户不愿意等。分组入场把元素分成几个组组内并联组间串联。比如标题搜索框先进 → 卡片网格再进 → 底部操作栏最后进。可视区域优先只给当前可见区域的元素做入场动画滚动后才出现的元素可以用另一组延迟更短的动画。提供跳过机制如果是非首次进入页面考虑直接跳过入场动画或大幅缩短间隔。小结用 setTimeout 串联 animateTo 不是最优雅的方案但它是目前 HarmonyOS ArkUI 里最实用的方案。核心就三句话setTimeout 控制什么时候开始animateTo 控制怎么变两者嵌套实现先变这个再变那个Promise 封装可以让代码更干净但在需要动画重叠的场景下setTimeout 的时间轴编排反而更直观。做 HarmonyOS6 PC 开发动画编排能力是绕不过去的坎。把这个 Demo 里的两种效果都跑一遍改改参数试试 8 个方块、12 个方块的效果你对时间轴的感觉就出来了。