AE animation is displayed on the web side
- 1.手工：通过掌握的Web技术；(效率较低，且还原难度较大)
- 2.机械：通过工具进行导出；
机械实现：
-
Bodymovin 是 AE 的一个插件，用于将 AE 导出为 Web 动画（HTML、JSON、SVG 或 Canvas），仅支持 AE 部分特性。
-
lottie-web 是 Airbnb 团队的一个用于在 Web、Android、iOS 和 React Native 渲染 AE 动画的库。
实现前准备步骤：
1.下载安装AE，下载地址
2.下载Bodymovin插件
3.下载插件安装工具
4.制作AE动效或寻找合适的素材
导出步骤
1.编辑 => 首选项 => 常规 => 允许脚本写入文件和访问网络
2.导入素材，窗口 => 扩展 => Bodymovin
3.选中文件 => Render => 导出素材（JSON+images文件夹）
核心代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#container{
width: 300px;
height: 600px;
}
</style>
</head>
<body>
<!--容器-->
<div id="container">
</div>
<script src="https://cdn.bootcss.com/bodymovin/4.13.0/bodymovin.min.js"></script>
<script type="text/javascript">
var animation = bodymovin.loadAnimation({
container: document.getElementById('container'), // Required
path: 'data.json', // Required
renderer: 'svg/canvas/html', // Required
loop: true, // Optional
autoplay: true, // Optional
name: "Hello World", // Name for future reference. Optional.
})
</script>
</body>
</html>