為什么推薦

記得在會議上，演講結(jié)束后，有人問了一個我一直想問的問題：

Adobe推出了HTML5動畫設(shè)計軟件An（Adobe CC）。 為什么不使用An而是使用這個方法呢？

發(fā)言者回答說An的前身是Flash，它生成的H5動畫是用js編寫的（使用庫），后期修改和維護(hù)會比較復(fù)雜。

確實(shí)，使用之后不難看出，它的靈活性確實(shí)很高，而且json形式的動畫遠(yuǎn)比js寫的動畫更適合跨平臺。 給我留下了深刻的印象，我給了它10086個贊。

學(xué)習(xí)總結(jié)不足：

1.如果渲染的動畫是AE中創(chuàng)建的矢量元素，則直接生成json代碼。 如果動畫中有導(dǎo)入的位圖，則編號的圖像文件將導(dǎo)出到圖像文件夾中。

2.在AE中制作動畫時，注意合成嵌套不要過多。 某些動畫可能無法在本機(jī)環(huán)境中渲染。

3、使用AE的朋友可能會注意到，上面的WD動畫使用了修剪路徑的效果。 這里提醒一下，使用該效果時，不建議同時修改start、end等多個參數(shù)。 渲染出來的效果會稍微有偏差。 那么路徑動畫的值越大，誤差可能就越大，需要手動調(diào)整。

4、原生環(huán)境運(yùn)行json動畫時，啟動有延遲。 因此，不適合在對動畫時間有精確要求的項(xiàng)目中使用。

5. 5.0以下的機(jī)型將不支持SVG動畫，所以連接時需要做好準(zhǔn)備。

優(yōu)勢：

凱撒的歸凱撒，上帝的歸上??帝。 讓設(shè)計和開發(fā)各自專注于自己的領(lǐng)域，而不必?fù)?dān)心動畫實(shí)現(xiàn)過程中的一些復(fù)雜的細(xì)節(jié)。 而且只要保存了AE源文件，我們就可以隨時導(dǎo)出替換json文件，方便動畫調(diào)試。 了解一些基本前端代碼的朋友甚至可以發(fā)揮想象力調(diào)試一些有趣的原型動畫。 一組json文件可以同時滿足不同Web原生環(huán)境的動畫制作需求。

相信會持續(xù)迭代升級，開放更多定制參數(shù)。 如果您有興趣，請下載并嘗試一下。

生產(chǎn)要領(lǐng)

由于是用來適配移動圖書館的，所以最好只在PC上使用。 如果您想在多個版本上使用它，您需要選擇正確的版本。

如果你不是做移動開發(fā)的，可以忽略下面的一半，但是建議閱讀下面的繪圖要點(diǎn)。

入門、使用前需要確認(rèn)的事項(xiàng)

? 請確認(rèn)好你們使用的bodymovin版和兩個客戶端不同的版本

不一定是最新版本適用，這是一個誤區(qū)。 因?yàn)槭嵌喽藚f(xié)同工作，這里可能有最新版本的5.5.6，但是并不代表端就可以部署并使用最新版本的json文件，所以在使用之前，一定要確認(rèn)設(shè)計師和客戶可以使用。 的版本. 我將在下面發(fā)布我找到的最后一個版本以確認(rèn)作為示例供您參考。 那么您可以在哪里找到并測試適合您的版本呢？ 接下來我給大家解釋一下。

? 如何找到合適的插件版本？ AE使用的各種版本可以在上面找到。 下載各個版本只需下載對應(yīng)的壓縮包，然后解壓即可找到對應(yīng)的你想要的插件。

插件下載：

? 如何找到適合您的程序版本？

其實(shí)具體這個我也不清楚，但是我們自己的程序看看他們的相關(guān)資料。 我相信程序員總會有辦法的。 這是它們對應(yīng)的 URL。

安卓：

iOS：

? 如何測試版本之間的兼容性？

  大原則：一個版本的bodymovin輸出的json文件可以在兩個客戶端app上運(yùn)行，并且它的動畫和設(shè)計效果是一樣的，就代表它們兼容。   測試的時候，你需要準(zhǔn)備iOS和安卓兩個不同機(jī)型的手機(jī)，然后分別下載他們對應(yīng)的軟件即可。iOS的叫「Lottie preview」，安卓的叫「Lottie」。若最終手機(jī)上看到的效果是和自己原效果一樣，那就代表這個動畫生成的json文件可以在這些版本的客戶端上使用。因?yàn)槭謾C(jī)可以看到，就代表當(dāng)前客戶端app的版本可以編譯到這個版本的json文件。    如果高版本的bodymovin輸出的json文件客戶端app運(yùn)行不到，那就試試低一點(diǎn)的版本吧。   ? 怎么下載較早之前的iOS/安卓Lottie app？

當(dāng)我們遇到應(yīng)用市場正式發(fā)布的應(yīng)用版本不適合我們的動畫json文件時，我們?nèi)绾握业街暗膽?yīng)用包進(jìn)行測試呢？ 答案還是在上面找到的。 因?yàn)樽钚掳姹镜膇OS與我第一次測試時的版本完美匹配，所以我沒有太多檢查。 以下是查找 應(yīng)用程序包的方法：

 1. 找到Lottie-Android的GitHub網(wǎng)址，點(diǎn)擊release   ：https://github.com/airbnb/lottie-android

 2.查看對應(yīng)的版本有無apk包下載

? 如何檢查該json 文件的當(dāng)前版本？

再次強(qiáng)調(diào)一下，json文件的版本等于版本。 那么如果你目前只有一個json文件并且你不知道它是什么版本，你如何檢查它呢？ 很簡單，用代碼編輯器打開就知道是什么版本了。 如果您的計算機(jī)上沒有安裝任何代碼編輯器，也可以通過在筆記本中打開來查看。

繪圖前

? 請仔細(xì)閱讀官方文檔，它不支持所有動畫效果的輸出。

試用之前，老板讓我先試試我們的常規(guī)動畫，看看有沒有不能輸出的動畫。 然后我嘗試了我們自己的動畫中常用的漸變、描邊、透明度和模糊。 結(jié)果插件最終導(dǎo)出只支持兩個。 因此，在使用之前，一定要測試一下是否能夠達(dá)到你的效果。 并且一定要閱讀官網(wǎng)上寫的特效支持文檔！ 查看不同終端支持的效果是否相同！

支持導(dǎo)出效果：#/-

? 不支持AE表情輸出

其實(shí)這個和第二點(diǎn)是一樣的，官方文檔也這么說。 但因?yàn)檫@個很重要，所以必須提醒大家，不要踩到陷阱啦~如果想要做出抖動效果，自己K幀就可以了。 如果你要做循環(huán)效果sketch怎么導(dǎo)出ai文件，就交給程序吧！ 因?yàn)檗D(zhuǎn)成json文件后，程序就有了更大的發(fā)揮空間。 （循環(huán)、換色等程序可以幫助你）如果你想和程序員溝通，強(qiáng)烈建議不同的客戶閱讀文檔。 我會給你一個網(wǎng)站，然后讓你的客戶得到他們需要的東西。

文檔官網(wǎng)：#/

? 檢查測試是否支持特殊畫面效果

這里所說的圖片特效是指你畫的或者ai中的圖片是否可以支持導(dǎo)出，以及圖片導(dǎo)出后是否會出現(xiàn)錯位效果。 這一步非常重要。 如果在不知道自己常用的特效是否支持的情況下就貿(mào)然投入，以后會浪費(fèi)更多的時間。 以下是我老板要求我確認(rèn)的內(nèi)容。 你可以參考一下。 （和往常一樣，我崇拜這里的老板）。

創(chuàng)建動畫之前

? 使用 AE 中的“從矢量圖層創(chuàng)建形狀”使動畫材質(zhì)可編碼

我們通常使用AI或者AI繪制動畫圖片，然后導(dǎo)入到AE中。 但最好的解決辦法是在AE中重新繪制圖像。 要在AE中重繪，您需要使用“從矢量圖層創(chuàng)建形狀”。 因?yàn)樵O(shè)計師把圖片“畫”進(jìn)AE后，連圖片包都不需要了。 他只需創(chuàng)建一個動畫和一段代碼即可。 這樣就節(jié)省了大量的溝通時間，解決了適配問題。 這里有兩種方法供您參考。

  1. sketch導(dǎo)出svg格式后轉(zhuǎn)成.ai文件

第一種方法比較復(fù)雜，但是不會出錯。 其實(shí)就是把剪切出來的圖片轉(zhuǎn)成ai格式導(dǎo)入到ae中然后創(chuàng)建形狀。 不過，經(jīng)過這樣處理并導(dǎo)入AE后，形狀可以保留更多的編輯效果。 具體步驟如下：

         1.sketch里面把切圖導(dǎo)出svg格式          2.svg轉(zhuǎn)成.ai格式導(dǎo)進(jìn)去AE          3.使用AE的「從矢量圖層創(chuàng)建形狀」重新繪制     2. 使用「AEUX」插件

這仍然支持導(dǎo)出相對簡單的圖形。 但是，當(dāng)遇到比較復(fù)雜的圖形時，比如使用布爾運(yùn)算繪制的圖形，會出現(xiàn)一些奇怪的問題，比如缺少效果，所以你應(yīng)該檢查一下哪一種更適合你。 下面將提供插件下載鏈接和教程 URL。

:

? 剪切前請先將動畫尺寸確定為@1x 尺寸。

由于是矢量動畫，程序可以自動適應(yīng)不同的模型。 因此，你需要養(yǎng)成一些設(shè)計習(xí)慣。 確定材質(zhì)后，確定動畫的尺寸@1x。

導(dǎo)出動畫后

? 如何檢查你的動畫效果是否完美輸出？

將動畫導(dǎo)出為json文件后，可以將自己的json文件放在上面看看效果。 進(jìn)入并下載客戶端后，您可以直接掃碼在手機(jī)上看到您的動畫效果sketch怎么導(dǎo)出ai文件，超級方便！

給

:

? 提高動畫通過率的技巧

你認(rèn)為這個網(wǎng)站只能上傳一個json文件嗎？ 把包含圖片和json文件的壓縮包丟進(jìn)去，就可以運(yùn)行了。 但是，您可以在網(wǎng)站上看到這些圖像文件，但掃描二維碼后在客戶端上將無法看到這些圖像。 這種方式最適合交付給PM和老板時展示給他們看。 保真度越高，越容易提高通過率~

附加參考信息：

如有侵權(quán)請聯(lián)系刪除！