將 After Effect 轉 svg 的工具套件- bodymovin

After Effect 是很多人在製作動畫時的好幫手，而 svg 的動畫近年來也在網頁上有越來越吃重的表現，但以往 AE 只能輸出影片，手寫 svg 動畫又太耗時，而現在有 bodymovin 這個工具就可以幫我們同時解決這兩個問題了。

首先先到這邊下載套件

下面有幾個安裝的方法，安裝完後把 AE 製作好的動畫依指定的格式匯出就可以了。

接著到網頁開發者這端，將 js plugin 讀入：

接著像這樣把 AE 匯出的 json 檔讀入就可以了。

lottie.loadAnimation({
  container: element, // the dom element that will contain the animation
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'data.json' // the path to the animation json
});

官方有提供一些既有的 json 檔讓大家測試：LottieFiles

codepen 也有一些範例可以給大家看

See the Pen
The Chameleon from Null Island by kittons (@airnan)
on CodePen.