资源

【前端 | Lottie】如何将AE动画渲染到网页上？_哔哩哔哩_bilibili

源码链接：https://pan.baidu.com/s/1hCJ8AQff9XA-IJaWWaE4rw 提取码：jiej (其中包含 AE 文件、源码以及 bodymovin 压缩包，包内带有安装说明）

lottie 代码文档：http://airbnb.io/lottie/#/web

lottie AE 兼容表：http://airbnb.io/lottie/#/supported-features

lottie官网：https://lottiefiles.com/

正文

AE

webp

将 bodymovin 插件置入 C:\Program Files (x86)\Common Files\Adobe\CEP\extensions\ 下。

webp

首选项 - 脚本和表达式 - 允许脚本写入文件和访问网络 打勾。

webp

打开案例工程，选中动画，设置输出文件夹，点击 渲染 即可生成 data.json，这个文件表示了整个动画。

webp

可以在设置中生成 Demo。

Html

引入 lottie.min.js：bodymovin - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

将动画加载到 DOM 上：

<div id="animation_box" style="background: #000;"></div>

<script>
    let ani = lottie.loadAnimation({
        container: document.getElementById('animation_box'),
        renderer: 'svg',
        loop: true,
        autoplay: true,
        path: 'data.json'
    });
</script>

从 Web 中可以看到配置的各种用法。