今天將我們在工作中遇到的AE動效落地時經(jīng)常遇到的問題有哪些？該如何解決這些問題？進行集中的分析解答，以避免在后續(xù)的工作中即時避坑。
上次分享回顧：
常見問題列表：
Q1：Bodymovin導出lottie動畫，漸變色丟失問題？
Q2：導出lottie動畫，文字錯位或不顯示問題？
Q3：Sketch文件導入AE后圓角問題？
Q4：AE里如何單獨修改某個圓角大?。?/span>
Q5：如何將1個圖層/預合成拆分成多段/多個？
Q6：AE如何修改合成尺寸的問題？
Q7：升級了新Mac系統(tǒng)后打不開MOV/MP4文件？
Q8：AE元素中心點偏移，不在元素中心點的問題？
Q9：AE內如何斷開錨點的問題？
Q10：動畫有用到位圖，在導出lottie動畫時，如何導出只有一個.json文件的動畫？
Q1：Bodymovin導出lottie動畫，漸變色丟失問題？
解決方法：那是問題我們通常使用的 AE 都是中文版本，所以圖層屬性的命名默認也是中文的，只要我們把對應的圖層漸變屬性名稱“漸變填充”重命名為英文“Gradient Fill”，然后漸變色就正常了；
如果是“漸變描邊”則需要改為“Gradient Stroke”即可。
注意??：英文不用區(qū)分大小寫
命名更改后：
如果存在多個漸變效果，可以分別命名“Gradient Fill 1”“Gradient Fill 2”“Gradient Fill 3”...以此類推
Q2：Bodymovin導出lottie動畫，文字錯位或不顯示問題？
AE里面，用bodymovie導出動畫后發(fā)現(xiàn)文字總是對不齊、文本框移位、文字顯示不完全。尤其是兩個icon有前后關系疊加的時候容易出現(xiàn)錯位，是因為AE中有很多字體如果直接導出 json ，會出現(xiàn)不兼容問題。
其實在bodymovie的設置中，已經(jīng)有一個功能，是可以解決這個問題的，這個功能就是“字體圖形化”，但是在我使用過程中發(fā)現(xiàn)，這個功能有點不穩(wěn)定，有點挑文字，有的文字轉換很成功，有的文字還是會缺失或顯示不全全，所以我還是建議用以下2個解決方法：
解決方法1：在 sketch 中直接對文字進行轉曲；轉曲后文字變成了矢量圖形。
解決方法2：在AE中，選中文字圖層，右鍵>創(chuàng)建>從文字創(chuàng)建圖形即可。
Q3：Sketch文件導入AE后圓角問題？
解決方法：因為AE里形狀的四個圓角只能都是一樣，不能分別設置不同的圓角大小。如果要幾個圓角大小不一樣，要在導入AE之前先拼合下，導入之后不會出問題。
選中圖形，然后選擇“圖層 - 結合 - 拼合 ”
如果你是Figma文件導入AE，則需要：選中圖形 - 右鍵 - Flatten
Q4：AE里如何單獨修改某個圓角大??？
解決方法：AE的圓角大小只支持一個圓度，如果要更改圓度屬性，形狀的圓角都會一起變化，沒辦法單獨改變其中一個的圓角大?。蝗绻胍獑为毟钠渲幸粋€的圓角大小，就要進行以下操作：
1、先選中矩形路徑圖層 — 右鍵 — 轉換為貝塞爾曲線路徑
2、選中路徑，用選擇工具 (快捷鍵 V) , 在畫面視圖中框選需要更改的圓角
3、按下快捷鍵 CMD+T , 調出變形工具，跟其他軟件一樣，拖動操控點，就可以更改圓角啦。
Q5：如何將1個圖層/預合成拆分成多段/多個獨立的圖層？
有時候我們做效果時，經(jīng)常會需要把一個圖層或者預合成拆分從多段，需要的效果是上圖中：時間線前（標記1）和時間線后（標記2），然在1個圖層中的動畫，拆成2個圖層顯示，那改如此拆開呢？
其實很簡單，只需要選種圖層，將時間線拖到你需要拆開的位置，然后快捷鍵：Command+shift+D（win系統(tǒng)：command+shift+D），即可拆成2個圖層
Q6：AE如何修改合成尺寸的問題？
有時候我們做了一個動效，但是要修改下尺寸，或者下載的模板尺寸不是自己想要的。比如原尺寸是1280*720，現(xiàn)在想要改到1920*1080，直接在合成設置修改話
改完后發(fā)現(xiàn)，合成里的各個圖層尺寸并不能隨之更改，結果位置完全錯亂；接下來就得一個圖層一個圖層的調整，去重新適配新的合成尺寸，其實完全沒有這么做，太費時費力。
解決方法：其實AE里直接內置了一個腳本，可以很方便的解決這個頭疼的問題，我們可以在文件-Scripts（腳本），然后找到AE自帶的腳本：“Scale Composition”
打開Scale Composition后的選項是這樣的
三個選項分別代表新的縮放比例、新的合成寬度、新的合成高度，按需求選擇合適的即可。（指的都是等比縮放到相應的尺寸）
使用起來也非常簡單，總結一下：
1. 首先在項目面板選中要修改尺寸的合成
2. 設置好要修改的數(shù)值（比如這里我設置成了將新的合成寬度改為1920）
3. 最后點擊”Scale”按鈕即可
Q7：升級了新Mac系統(tǒng)后打不開MOV/MP4文件？
很多小伙伴在更新了最新的Mac OS系統(tǒng)后，發(fā)現(xiàn)AE導出的MOV格式視頻打不開，如下圖：
解決方法：導出的時候，更改下視頻編解碼器即可解決；在“輸出模塊設置 — 格式選項 — 視頻編解碼器” 選擇 “Apple ProRes 4444”
Q8：AE元素中心點偏移，不在元素中心點的問題？
如果你使用的是2018版本以上的AE，那么只需要在首選項里設置一下即可，首選項-常規(guī)-在新形狀圖層上居中放置錨點，下次繪制形狀時，中心點自動居中到圖形中心。
如果你使用的是2017及以前版本的AE，在繪制形狀圖層的時候，中心點默認是在畫板中間的，如下圖：
解決方法一：選擇平移(錨點)工具 快捷鍵 Y ，選中中心點，按住 cmd (win系統(tǒng)ctrl) + 鼠標左鍵，此時移動會自動吸附到此形狀的各個角跟中心點，在中心時松手即可。
解決方法二：使用 Motion 腳本快速居中中心點
Q9：AE內如何斷開錨點的問題？
在AI里面如果你畫完圖形之后，不要某些邊，可以用直接選擇工具選擇之后刪除即可；但是在AE里面刪除之后是不對的。
例如我要刪除一個圓形最下方的一個錨點，首先 選中圓形 — 找到圓形路徑 — 右鍵 轉換為貝塞爾曲線。
然后用選擇工具框選要刪除的錨點，刪除后變成了這樣子：
你會發(fā)現(xiàn)他們還是連在一起的，那么要怎么斷開？
繼續(xù)選中路徑屬性，框選工具框選這兩邊的錨點，右鍵 蒙版和路徑形狀 - 已關閉 取消勾選即可。
然后就會達到我們想要的理想的效果，如下圖
這里只是以圓形為例，其他任何圖形都可以用這種方法刪除錨點，然后斷開哦。
注：你也可以直接使用修剪路徑的方式，變成你想要的圖形
Q10：動畫有用到位圖，在導出lottie動畫時，如何導出只有一個.json文件的動畫？
當我們在動效中有用到位圖資源時，bodymovie默認導出動畫的最終文件為：1個json文件 + 1個images個文件，如下圖：
很多時候我們在做lottie動畫的和開發(fā)交付動畫效果的時候，開發(fā)那邊會說：“只要1個json文件就行”，那我們該如何處理呢？
其實在bodymovie的設置里面就有這樣一個功能，叫做“轉成base64—將圖片包含在json文件中”
只要勾選了這個選項后，我們導出后的文件就會只有一個.json的文件。
Q11：同一個json，iOS和Android設備不兼容json文件的問題？
同一個json文件，預覽沒有問題，但是在iOS和安卓設備上的效果不一致。
解決方案：部分安卓系統(tǒng)引用高版本 lottie 庫會出現(xiàn)不兼容問題，所以安卓需要導出舊版格式，但還是會出現(xiàn)不兼容問題，這里推薦降級方案，把 Body movin 版本號換成5.1.12版，基本可以解決問題。
輸出lottie的注意事項：
1、首先明確自己想要做什么動畫，在官方文檔上查詢lottie支持的屬性效果。
官方屬性查詢：http://airbnb.io/lottie/#/supported-features
lottie支持導出的AE屬性（中文文檔）：https://www.yuque.com/lottie/document/supported-features
2、為避免 Bodymovin 輸出后預覽出錯，所以在輸出前確保你的所有文件確保命名和圖層名為英文，避免包含中文、空格、特殊符號等等。
3、Bodymovin 輸出時根據(jù)實際情況勾選對應的輸出設置，如“圖片資源設置”“導出舊版本的 Json 格式”等。
4、導出后json文件一定要進行預覽自查，用 Bodymovin 導出文件后，上傳到https://lottiefiles.com/preview中進行預覽，可以手機掃碼二維碼在手機上預覽，檢測是否有問題。
Powered by Froala Editor
微信公眾號：UI嚴選
微信公眾號：UI嚴選
94
作品
7245
粉絲
20
關注
分享能獲取更多贊？
大牛，別默默的看了，快登錄幫我點評一下吧！:)
登錄 立即注冊