Lottie是一个适用于Web、Android、iOS、React Native和Window的库,它可以解析AE(Adobe After Effects)动画导出的JSON,并渲染成 SVG、Canvas 或 HTML 格式的动画。
<script src='https://path/to/lottie.min.js'></script>
<div id="stage"></div>
<script>
lottie.loadAnimation({
wrapper: document.getElementById("stage"),
animType: "svg",
loop: true,
path: "https://path/to/data.json"
});
</script>
其中,data.json 为动画数据,可以在下文提供的动画素材网站中找到大量的素材
js 代码库下载地址(两个库名不同,内容完全一样一样):
https://cdnjs.com/libraries/lottie-web
https://cdnjs.com/libraries/bodymovin
如果只使用了 svg 格式的动画,可以下载 lottie_light 版本的库,体积小很多
https://lottiefiles.com
该网站收集的大量的动画素材,支持在线对动画进行简单调整(如速度,颜色等),有免费的也有收费的。