lottie 動畫設計（三）完結篇
這篇主要是講解如何使用AI / sketch 繪製圖像，並匯入到AE中製作和輸出的問題。文中的大部分案例都來自官網，藍字為自己補充說明
系列文章點選
ofollow,noindex" target="_blank">《lottie 動畫設計（一）》
這篇主要是講解如何使用AI / sketch 繪製圖像，並匯入到AE中製作和輸出的問題。
工作流程
第一步:設計動畫
軟體：AI/sketch 。
我們的動畫製作軟體是AE ,但AE並不是一個很好的向量圖繪製軟體，所以不必強求在AE中繪製需要的視覺元素。合理的搭配手中的軟體，提高自己的工作效率才是我們的目的~
1、將需要製作的動畫元素編組
2、選中編組匯出 SVG
3、使用AI 開啟匯出的 .SVG檔案 並另存為 .ai 檔案
4、在AE中匯入.ai檔案
5、建立合成，設定需要引數
合成大小與你的動畫元素儘量貼合，可以理解為切片大小。
6、將檔案轉化為形狀圖層
圖層→從向量圖層建立形狀
注意：不要使用PDF或者EPS格式匯入AE,因為有時候會將畫板路徑也拷貝到檔案中。在AI中設計的漸變效果在AE中無法識別，需要在AE中重新繪製。
7、製作動畫
動畫製作遵守上篇提到的各個平臺的支援效果來製作
8、輸出檔案
選中需要匯出的合成檔案→設定匯出路徑→點選render按鈕
10、下載lottie 預覽app 
11、使用app 掃描網站的二維碼，可以在手機上預覽，你設計的動畫
12、動畫測試沒有問題就可以把輸出的json檔案交付給開發使用了。
如果你想在自己的產品上使用這個框架，可以給你合作的開發推薦下面的幾個網址，檢視資料。
裡面有具體程式碼的呼叫方法~
GitHub :https://github.com/airbnb/lottie-android
GitHub :https://github.com/airbnb/lottie-ios
替補方案
手動地建立動畫：設計師通過iOS、Android工程師來，手動建立動畫是一個耗費鉅額時間的任務，它通常很難，甚至不能保證花費那麼多時間可以得到正確的動畫效果。 Facebook Keyframes： Keyframes是一個來自Facebook團隊，專門用來構建使用者介面的很棒的庫，然而，Keyframes並不支援一些Lottie所能支援的特性，比如： 遮罩，軌道蒙版，裁切路徑，虛線樣式等等。 Gifs：Gifs 資源是bodymovin JSON 檔案的兩倍還多，並且渲染的尺寸是固定的。同時不能放大來適應更大更高解析度的螢幕。 Png序列楨動畫： Png序列楨動畫 甚至比gifs更糟糕，它們的檔案大小通常是 bodymovin json檔案大小的30-50倍，並且也不能被放大。
Alternatives 為避免翻譯有誤差，所以原文如下
Build animations by hand. Building animations by hand is a huge time commitment for design and engineering across Android and iOS. It's often hard or even impossible to justify spending so much time to get an animation right. Facebook Keyframes. Keyframes is a wonderful new library from Facebook that they built for reactions. However, Keyframes doesn't support some of Lottie's features such as masks, mattes, trim paths, dash patterns, and more. Gifs. Gifs are more than double the size of a bodymovin JSON and are rendered at a fixed size that can't be scaled up to match large and high density screens. Png sequences. Png sequences are even worse than gifs in that their file sizes are often 30-50x the size of the bodymovin json and also can't be scaled up.
13、擴充套件閱讀:
Why is it called Lottie?
Lottie is named after a German film director and the foremost pioneer of silhouette animation. Her best known films are The Adventures of Prince Achmed (1926) – the oldest surviving feature-length animated film, preceding Walt Disney's feature-length Snow White and the Seven Dwarfs (1937) by over ten years The art of Lotte Reineger
為什麼叫Lottie？
Lottie以德國電影導演(剪影動畫的最早的開拓者)命名。 她最著名的電影是“阿赫邁德王子歷險記”(1926年) - 最古老的長篇動畫電影。比華特迪士尼的長篇電影白雪公主和七個小矮人(1937)早十多年The art of Lotte Reineger
動畫社群
官方動畫主頁：https://www.lottiefiles.com
國外動效設計網站推薦：
9 Squares: http://www.thisiscolossal.com/2015/04/9-squares-gif-collab/
Animography：https://animography.net/collections/typefaces
國外動畫設計師推薦： https://dribbble.com/animography
Motion corpse： https://www.behance.net/gallery/36796181/Motion-Corpse-5-Animation
最後：
Lottie這個工具的方法到這裡就全部寫完了，希望對你有所幫助(*^▽^*)
公眾號回覆【fox 】,可以下載 文末這隻小狐狸的所有工程檔案~
~隨緣點贊 福生無量~
公眾號【錦字回時】