lottie 基础使用 web

思路

• 首先需要ui提供做成动画的json文件，ui实现通常使用的工具是AE（这个具体操作步骤基本可以搜索到）
• 发给前端之后，通过lottie库，把json格式的文件，最终渲染成svg格式或者是canvas的动画

实现

cdn

  <!--********** lottie **********-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.10/lottie.min.js"></script>

html

  <div id="lottieEarth" class="w-100 h-100 position-absolute lottieEarth"></div>

js

  bodymovin.loadAnimation({
    container: document.getElementById(
'lottieEarth'), // 指定容器
    renderer: 'svg', // 使用 SVG 渲染器
    loop: true, // 是否循环播放
    autoplay: false, // 是否自动播放
    path:'./img/jishu/data.json', // JSON 文件路径
    name: 'lottieEarth'
  });

lottie主要有八种方法

• lottie.play() 动画开始
• lottie.stop() 动画结束
• lottie.setSpeed()
• lottie.setDirection()
• lottie.searchAnimations()
• lottie.loadAnimation()
• lottie.destroy() 动画销毁
• lottie.registerAnimation()
• lottie.setQuality()

使用

比如一个hover事件触发

• jquery

  $(‘lottieEarth’).hover(() => {
    lottie.play(‘lottieEarth’)
  }, () => {
    lottie.stop(‘lottieEarth’)
  })
  

demo