Lottie 动画 参考链接已经失效

可以使用 犸良 制作一些动画，或者使用 AE 制作了动画之后导出为 json 文件在页面之中展示。

使用方法

首先引入 Lottie.js

  <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.4.3/lottie.min.js"></script>

并且在页面上创建一个 div 用于播放动画

  <div id="lottie"></div>

然后调用

  bodymovin.loadAnimation({
    container: document.getElementById('lottie'), // 获取播放容器div
    renderer: 'svg',
    loop: true,// 是否循环播放
    autoplay: true,// 是否自动播放
    path: 'data.json' // lottie.json 的地址
  });

具体可以参考以下链接

测试

lottie 系列文章(一)：lottie 介绍

lottie 系列文章(二)：lottie 最佳实践