技術標籤：筆記前端

Lottie是可應用於Android,iOS, Web和Windows的庫，通過Bodymovin解析AE動畫，並匯出可在移動端和web端渲染動畫的json檔案。換言之，設計師用AE把動畫效果做出來，再用Bodymovin匯出相應地json檔案給到前端，前端使用Lottie庫就可以實現動畫效果。

中文文件

前端使用lottie

npm install lottie-web

import lottie from "lottie-web";
import animationData from "./assets/data.json";

const animation = lottie.loadAnimation({
  container: document.getElementById("svgContainer"), // 要包含該動畫的dom元素
  animationData: animationData, // 動畫json檔案路徑
  loop: true, // 是否迴圈播放
  renderer: "svg", // 渲染方式，svg、canvas、html（輕量版僅svg渲染）
  autoplay: true, // 是否自動播放
});
 

loadAnimation引數

方法

Lottie動畫監聽

// 動畫播放完成觸發
animation.addEventListener("complete", () => {});

// 當前迴圈播放完成觸發 
animation.addEventListener("loopComplete", () => {});
    
// 播放一幀動畫的時候觸發 
animation.addEventListener("enterFrame", () => {});

• complete
• loopComplete
• enterFrame
• segmentStart
• config_ready(初始配置完成)
• data_ready（所有動畫資料載入完成）
• DOMLoaded（元素已新增到DOM節點）
• destroy