lottie 动画快速上手-一一网

前言

为了前端性能优化，使用lottie动画代替传统css动画…

使用

第一步引入 lottie 加载库，下载 lottie.js 库到项目中 [下载链接]；
第二步将动画源文件引入到项目中，一般为json格式文件[UI会提供或者自己开发 -.- ]；
第三步将 lottie.js 和 json格式动画文件引入到html中；
第四步创建animation对象，指定渲染容器。

示例

第一步&第二步

第三步

将动画文件赋值给变量 animationData

<body>
<div id="app">
  <div id="loader-wrapper">
    <div id="loader"></div>
  </div>
</div>

<script type="text/javascript" src="<%= BASE_URL %>cdn/lottie.min.js"></script>
<script type="text/javascript" src="<%= BASE_URL %>data.json"></script>
<script>
  var animation = lottie.loadAnimation({
    container: document.getElementById('loader'), // 指定动画渲染的容器
    renderer: 'svg',
    loop: true, // 循环播放
    autoplay: true,  // 自动播放
    animationData: animationData  // 动画源文件，即 animationData 变量
  })
</script>
</body>
复制代码