前端动画框架 Lottie

Lottie是一个适用于Web、Android、iOS、React Native和Window的库，它可以解析AE（Adobe After Effects）动画导出的JSON，并渲染成 SVG、Canvas 或 HTML 格式的动画。

动画效果：

演示网址：

https://demo.1024i.com/lottie

核心代码：

<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 为动画数据，可以在下文提供的动画素材网站中找到大量的素材

相关资源：

官网网址：https://airbnb.io/lottie

js 代码库下载地址（两个库名不同，内容完全一样一样）：
https://cdnjs.com/libraries/lottie-web
https://cdnjs.com/libraries/bodymovin

如果只使用了  svg 格式的动画，可以下载 lottie_light 版本的库，体积小很多

动画素材：

https://lottiefiles.com
该网站收集的大量的动画素材，支持在线对动画进行简单调整（如速度，颜色等），有免费的也有收费的。