Lottie Web

Lottie是Airbnb开源的跨平台动画渲染库，解析After Effects通过Bodymovin导出的JSON文件，在Android、iOS、Web和Windows上原生播放矢量动画，无需GIF或视频。

核心优势

Lottie以轻量JSON文件承载复杂矢量动画，在动画还原度和文件大小上优于CSS动画、GIF和帧动画。

• 文件体积小：JSON文本格式通常仅几十KB，远小于GIF或视频序列
• 矢量无损：任意分辨率下不失真，完美适配Retina屏
• 跨平台一致：同一JSON在iOS、Android、Web上呈现效果完全统一
• 硬件加速：底层调用Core Animation（iOS）和Canvas（Web），CPU/内存占用低

Web端使用方式

Web端主要通过lottie-web库或社区增强版@lottiefiles/dotlottie-web实现，支持原生JS及Vue、React等框架。

• 安装：npm install lottie-web 或 @lottiefiles/dotlottie-web
• 加载：lottie.loadAnimation({ container, renderer: 'svg', loop, autoplay, path: 'data.json' })
• 控制API：animation.play() / stop() / setSpeed() / setDirection() / goToAndStop() / destroy()
• 框架组件：Vue用<DotLottieVue>，React用<DotLottieReact>，直接传入src和loop/autoplay属性

兼容性与注意事项

Lottie-web在移动端兼容性良好，但部分老旧系统存在限制。

• iOS：支持9.0+，但9.0~9.2版本WebView对SVG支持不完善，可能导致动画异常
• Android：支持4.4+，4.4版本WebView对某些SVG属性支持不足
• 硬件依赖：动画性能高度依赖设备硬件加速，不支持时可能出现卡顿
• 渲染器选择：Web端可选'svg'、'canvas'或'html'渲染器，svg模式兼容性出色

常见问题

Q1：Lottie动画的JSON文件如何生成？

A1：在Adobe After Effects中安装Bodymovin插件，将动画导出为JSON格式，即可被Lottie库解析播放。

Q2：Lottie-web在React中如何集成？

A2：安装@lottiefiles/dotlottie-react后，使用<DotLottieReact src="path/to/animation.lottie" loop autoplay />组件即可。

更多同类工具与网站,可在动画库分类继续挑选。

信息核实于 2026年7月,具体以官网为准。