当设计师让实现一个动画，但是只给了一个json文件
使用插件 bodymovin.js
1.介绍：http://airbnb.io/lottie/web/web.html
2.安装：单页面使用只需直接引入即可1
2# 本地路径
<script src="js/bodymovin.js"></script>
使用npm安装1
2
3npm install bodymovin
# 引入 模块引入
import BodyMovin from 'bodymovin'
3.使用1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var animation = bodymovin.loadAnimation({
# Required 容器
container: document.getElementById('lottie'),
# Required json文件所存放的路径
path: 'data.json',
# Required 这个一般都是svg 后面两种方式canvas/html一定要去掉,
renderer: 'svg/canvas/html',
# Optional 参数是否循环加载动画
loop: true,
# Optional 是否自动播放动画
autoplay: true,
# Name for future reference. Optional.
name: "Hello World",
})
animation.play() //调用开始加载动画的方法
animation.stop() //调用停止加载动画的方法
