用途:该技能面向已使用 Helios 的项目,说明如何在 Helios 时间轴驱动下同步渲染 Lottie(Bodymovin)JSON 动画。
主要能力:提供一套集成模式,把 lottie-web 加载的动画实例与 Helios 的帧推进绑定,使动画进度由 Helios 时间线决定,而不是依赖 Lottie 自身的自动播放。
使用方式:先引入 Helios 与 lottie-web 并加载动画数据,创建 Helios 实例(示例中 fps 为 30、duration 为 5),再通过 lottie.loadAnimation 加载动画;加载时需将 autoplay 设为 false,loop 设为 false,renderer 可选 'svg' 或 'canvas'。随后用 helios.subscribe 获取 currentFrame 与 fps,用 (currentFrame / fps) * 1000 换算为毫秒,并调用 anim.goToAndStop(timeMs, false) 跳转到对应时间。第二个参数设为 false 表示按时间(毫秒)而非按帧定位,因为 Lottie 内部帧率通常与 Helios 帧率不一致。
适用场景:需要在 Helios 驱动的渲染或播放流程中精确控制 Lottie 动画进度、要求动画与时间线可复现同步的场景。
限制与注意事项:应保持 autoplay 关闭,由 Helios 驱动;推荐按时间跳转而非映射帧号;svg 渲染适合 DOM 模式下的清晰矢量,canvas 渲染在 Canvas 模式或复杂场景下性能更好。示例源文件位于 examples/lottie-animation/。