lottie web簡單使用

https://github.com/airbnb/lottie-web

https://cdnjs.com/libraries/bodymovin

https://codepen.io/airnan/project/editor/ZeNONO

 

搞到一個json文件先

效果確實很細膩

簡單代碼

    const root = document.getElementById("root")
    lottie.loadAnimation({
      container: root, // the dom element that will contain the animation
      renderer: "canvas", // canvas / svg
      loop: true,
      autoplay: true,
      path: "/file/lottie/b/data.json", // the path to the animation json
      // 可以直接使用json對象, 如果需要動態修改可以使用這種方法
      //  animationData: animationData, // the animation data
    })