故事背景
接到需求写一个关键帧动画，说到这个大神前端们脑海里似乎有了不少的方案了，是否是以下几种:
- css3 animation 0%~100% 显示不同的图片 或者translate图片的位置达到关键帧效果
- 通过js + 定时器 操作dom 达到关键帧效果
- canvas画布绘制
- 直接上gif
以上方式都存在一些性能上的缺陷 比如图片过大过多加载时候导致渲染较慢 gif无法定义播放时间，播放速度，是否轮询动画
优化方案-lottie实现帧动画
- 不在使用AE生成图片文件 使用用AE+BodyMovin导出动画JSON文件
- 引入lottie
- 根据api实例化
效果：
实现代码：
<!DOCTYPE html>
<html style="width: 100%;height: 100%">
<head>
<script src="https://shanbo-mall-pro.oss-cn-shanghai.aliyuncs.com/miniapp/lottie.js"></script>
</head>
<body style="background-color:#ccc; margin: 0px;height: 100%; font-family: sans-serif;font-size: 10px">
<div style="width:100%;height:100%;background-color:#333;" id="bodymovin"></div>
<script>
var animData = {
wrapper: document.getElementById('bodymovin'),
animType: 'html',
loop: true,
prerender: true,
autoplay: true,
path: 'https://shanbo-mall-pro.oss-cn-shanghai.aliyuncs.com/miniapp/data.json'
};
var anim = bodymovin.loadAnimation(animData);
</script>
</body>
</html>
