SuperAPI AI 工具集

example-lottie

设计与创作

查看项目

更新于 10-15 17:26

技能介绍

用途:将 Lottie(lottie-web)动画接入 Helios,使动画由 Helios 时间轴驱动同步渲染,而不是自行播放。

主要能力与用法:先用 lottie.loadAnimation 加载动画,配置 container、renderer(svg 或 canvas)、loop、autoplay,并关闭 autoplay,同时传入 animationData。随后通过 helios.subscribe 在每帧回调中取 currentFrame 与 fps,换算为毫秒 timeMs = (currentFrame / fps) * 1000,再调用 anim.goToAndStop(timeMs, false) 定位。第二个参数 false 表示按时间(毫秒)而非按帧定位。资料特别说明 Lottie 帧率与 Helios 帧率通常不同,因此按时间定位更安全平滑。

渲染器选择:svg 适合 DOM 模式下的清晰矢量;canvas 适合 Canvas 模式或复杂场景的性能表现。

限制:资料仅提供该示例与模式,其他配置、兼容性与性能细节暂未提供。