以下言論僅代表個人觀點返干！在此感謝那些神一樣存在的大牛赌莺！
最近在設計圈里，空降了一個叫 Lottie的項目開源庫（背景就不介紹了例衍，感興趣的可以去調查一下）昔期！結合AE插件-Bodymovin可以實現(xiàn)一些酷炫吊炸天的動畫效果！最重要的是再也不用拎著刀和開發(fā)寶寶們決戰(zhàn)紫禁之巔了佛玄！
本人設計師一枚硼一，Lottie是代碼開發(fā)寶寶們研究的，所以這里主要介紹一下Bodymovin這個NB的插件梦抢，在應用中的一些問題和解決辦法般贼！
插件安裝地址：https://helpx.adobe.com/creative-cloud/kb/installingextensionsandaddons.html
這是原文地址：https://github.com/bodymovin/bodymovin
正好最近要上一版產(chǎn)品改版后的引導頁設計，正好驗驗貨奥吩，看看是不是如同傳說中的那般神奇哼蛆！于是乎：
作業(yè)流程
·根據(jù)PM提供的方案和策略，找放大點霞赫，梳理邏輯
·在AE中建立動畫
·利用AE中的bodymovin插件導出HTML和json文件
·交付開發(fā)
測試
經(jīng)過多輪測試腮介，發(fā)現(xiàn)以下問題
測試1：
問題--位圖無法顯示，遮罩蒙版失效端衰，包括文字叠洗！
解決--盡量采取路徑繪制，避免閉口路徑旅东，文字轉區(qū)灭抑！
測試2：
問題--導出圖片文件質量低
解決--ps中重新導出png，同命名替換
測試3：
問題--高斯模糊抵代、描邊不顯示腾节、漸變(外加的圖層樣式都不支持)
發(fā)現(xiàn)--AI格式的icon在AE中可以轉曲
通過路徑的繪制！整體質量提高荤牍！
支持的After Effects功能
圖層
*固態(tài)圖層
*形狀圖層
變換
*錨點
*位置
*縮放
*旋轉
*不透明度
描邊（形狀層）
*描邊顏色
*不透明度
*描邊寬度
*線段
*虛線
填充（形狀層）
*顏色
*不透明度
修剪路徑（形狀層）
*修剪路徑開始
*修剪路徑結束
*修剪路徑偏移
*路徑
*組變換（錨點案腺，位置，比例等）
*矩形（所有屬性）
*橢圓（所有屬性）
*一組中的多個路徑
關鍵幀插值
*線性插值
*貝塞爾曲線
*連續(xù)貝塞爾曲線
*自動貝塞爾曲線
*定格
當前不支持After Effects功能
* 圖像層
*文本（“可從文字創(chuàng)建形狀”）
* 攝像機燈光圖層
* 表達式
* 3d層
* 漸變（顏色濾鏡）
* 多邊形形狀（可以轉換為矢量路徑）
* 形狀疊加處相交無法使用（比如轉曲后的“口”導出后會呈實心矩形狀)
* 圖層形狀特效
建議
文件
如果你有任何圖像或AI圖層参淫，并且沒有轉換為形狀（我建議你轉換它們救湖，右鍵單擊每個圖層，并執(zhí)行：“從矢量圖層創(chuàng)建形狀”）涎才，他們將保存到相對于目標json文件夾的圖像文件夾鞋既。請小心不要覆蓋同一位置上的現(xiàn)有文件夾。
性能
盡量不要使用巨大的形狀在AE只掩蓋它的一小部分
數(shù)量很多的屬性會造成瀏覽器渲染速度下降（如將形狀的段數(shù)節(jié)點增加）
總結
整體來說還是非常棒的耍铜！畢竟現(xiàn)在還不是很完善邑闺，有些功能點還是不支持，但是相信棕兼，不就得將來來陡舅，這些就不再是問題了！要知道伴挚，在這之前靶衍，我可是通過畫動畫分解圖來和開發(fā)寶寶們溝通的灾炭！
適配方式是走的web頁的適配方式 ? 也就是加載的html頁面 ? 對于有的尺寸兩邊顯示不全的問題，是通過改變背景色來解決的Ｂ簟（這樣也就限制了一些設計元素）
iOS整體運行沒有問題蜈出！流暢！
安卓4.1.2以下版本有問題：2.3報了異常涛酗，白屏铡原！4.0比較卡！其它的還算順暢商叹！
有興趣的寶寶們燕刻，可以一起聊聊，本人也是個小書童剖笙，有大俠路過卵洗，還望指點一二！
