Lottie 演示 · 设计师动画播放器
After Effects → Lottie JSON → Web，设计动画直接落地网页，无需重新用代码手写补间。lottie-web 是开源免费播放器，本页用 6 组独立 demo 复刻 LottieFiles 官网展示的典型应用场景。
开源 / 免费播放器
AE 导出标准
Loading / Onboarding / 反馈
lottie-web 5.12.2
1. 基础播放控制面板
最常见的 Lottie 使用姿势：play() / pause() / stop()，配合 setSpeed() 调节倍速、setDirection() 切换正反向播放。
动画数据：手写内联的圆环 Loading Spinner（stroke-dash 旋转），90 帧 / 3 秒一圈，循环播放。
2 & 3. Hover 触发 / Click 触发播放
图标类 Lottie 动画最常见的两种交互：鼠标悬停自动播放（离开时反向收回），或点击后播放一次并停在末帧 —— 常用于点赞、收藏、通知铃铛等微交互。
Hover 触发（鼠标移入播放，移出反向收回）
Click 触发（点击播放一次，定格末帧，再点重播）
Click 触发（摇铃通知，点击播放一次）
4. Loop 模式对比
同一份三点 Loading 动画，分别用 loop: true（无限循环）、loop: false（只播一遍后停住）、loop: 2（播放固定次数后停住）三种配置对比。
loop: true 无限循环loop: false 播放一遍即停loop: 2 播放两遍即停5. 滚动进度绑定动画帧
动画本身不自动播放（autoplay: false），而是把「舞台在视口中的滚动进度」实时映射到 anim.goToAndStop(frame, true)，实现类似 LottieFiles 官网首屏「滚动驱动进度环」的效果。慢慢滚动本区域上下查看变化。
滚动进度：0% · 帧 0 / 100
6. Loading / Success / Error 三态动画
异步请求最典型的 Lottie 场景：发起请求时播放 Loading，返回后无缝切换到 Success 或 Error 动画 —— 三个动画预先加载好，用显隐切换代替反复创建销毁实例。
Loading…