製作動畫的素材和資源

菲一菲發表於2018-09-20

通過Lottie將 AE 動畫轉換成web原生動畫

1、如果電腦沒有AE就安裝AE,AE的版本需要是AE CC2014或以上。(以AE CC2018 為例)

2、安裝Bodymovin外掛。

3、匯出JSON

  • 開啟AE ,點選 '編輯'->'首選項'->勾選 '允許指令碼寫入檔案和訪問網路',點確認。
  • 開啟下載好的AE原始檔。
  • 點選'視窗'->'擴充'->Bodymovin,在Bodymovin的視窗中選中要匯出的動畫並選擇匯出的位置點選render.

4、在web上展示出來。

  • 將匯出的JSON和ottie-web的專案中'buildplayer'目錄下的lottie.js複製到你的網頁的根目錄中
  • 新建個HTML檔案程式碼如下:
  • <body>
    <div class="stage"> </div>
    <script src="./lottie.js"></script>
    <script>
     var stage = document.querySelector('.stage');
     lottie.loadAnimation({
           container: stage,   //包含動畫的DOM元素
           renderer: 'svg',  
           loop: true, 
           autoplay: true, 
           path: './data.json',   //動畫的路徑
     })
    </script>
    </body>

    開啟網頁就能看到動畫動起來了。
    儘管是完成了,但是本人遇到個BUG無法解決:在AE中開啟動畫的原始檔有些地方原本是彩色的,但匯出後那個地方卻是黑白的。
    望知道解決辦法的大佬說明一下如何解決這個BUG。

canvas的很多例子,在這個網站可以直接拿去使用

https://codepen.io/charlespina/pen/XXrPMB

相關文章