Upwork收到一個工作邀請,雖然因為英文能力還不夠沒辦法接,卻因此找資料發現原來現在AE搭配plugin可以匯出向量動畫。上網找了一下相關文章,中文資料大多是在2021之後發佈,代表這東西還算新(至少不太舊),可以來摸摸看。以下是其他找到的資料筆記
英文資料:
- lottiefiles官方說明
- Export SVG Animation From After Effects (100% SVG File)
- After Effects SVG Animation Export / How to Export Lottie Animation
中文資料
- 讓插圖動畫不再又笨又重—利用AI+AE製作Lottie動畫(做法詳解)
- Lottie:讓 AE 動畫完美呈現於數位產品上
- After Effects動畫製作訣竅 | 快速匯入Illustrator,製作動畫無難度
幾個重點
- AE編輯動畫的時候要把置入的ai圖檔轉換成向量圖層:
預設不管置入什麼檔案,他匯出都是點陣圖檔,所以要做成向量動畫,或是直接在AE內編輯節點位置做動畫效果,圖層都要轉換成向量圖檔。我之前不知道可以這樣,總會覺得ai放到AE內可以做的動畫效果沒有An內來的彈性,如果可以編輯節點,那可以做的效果會多很多,即使不是用在做向量動畫也是會方便很多。 - AE要安裝Bodymovin的plugin:
這是可以把AE動畫匯出成不同的SVG動畫格式,上面英文參考資料有兩個影片,一個是匯出成SMIL格式,一個是匯出成Lottie Animation。都是透過這個套件去匯出的。
之前就有疑惑有些網站的向量動畫不知道是怎麼做的,總覺得不太可能是直接寫原始碼去做,當時也不知道相關資料。這次收到的工作邀請裡面提到Lottie Animation,才去查到相關的資訊。感覺這部份很適合我來看怎麼使用。