動效設計在app里的重要性湖苞，我想不用多說片部。懂的都懂......
設計好的動效讓開發(fā)照著寫代碼來實現(xiàn)拱烁，最后得到的效果往往不盡如人意疹瘦。簡單動效開發(fā)可以找模版來改崩哩，復雜點的找不到模版的就很難受了。寫吧拱礁，效果不行琢锋；導GIF吧辕漂，占內(nèi)存又不高清……有沒有什么更好的辦法呢呢灶？
當然有啊，社會在進步钉嘹，工具在發(fā)展……^_^
這也是我自己在網(wǎng)上查找資料對比總結(jié)以后得到的結(jié)果鸯乃。還是要感謝那些在網(wǎng)上無私奉獻自己知識的前輩們。整理在這也算是給自己做個筆記。作為UI設計師缨睡，動效確實不常做鸟悴，本人也確實出現(xiàn)了反復忘記的情況。最終決定做個自己吸收后的筆記奖年，免得下次要做的時候又忘了（熬夜加歲月不饒人细诸，記憶力衰退了）(/ω＼)
好了，廢話不多說陋守，我也懶得編了震贵，下面直接干貨吧
設備：MAC系統(tǒng)（我自己的是MacBook Pro 19款）
軟件：AE（網(wǎng)上說2017以上都可以，我自己的是2021）——因為我自己喜歡更新軟件水评，所以常用軟件基本都保持最新版本
插件（主角）：Bodymovin（5.7.6）
插件下載鏈接: https://pan.baidu.com/s/1ZFbJAs6mVwpZmummMsRZyw 提取碼: 9081
關(guān)于設備有一點需提醒～
為什么是MAC：并非是windows系統(tǒng)不支持導出json文件猩系。據(jù)交友群的A說，TA自己的win也是可以用Bodymovin插件導出json文件的中燥。只是這效果吧……由其是在處理漸變色導出的問題上寇甸，是相當困難，怎么個困難法疗涉，在下文的漸變色問題中會給大家解釋拿霉，所以推薦大家使用蘋果系統(tǒng)。本人也使用的Mac博敬，所以Windows的具體辦法友浸，本人懶，也沒去親測哈
導出json步驟
安裝或者更新AE：詳情略
安裝插件Bodymovin：詳情略（是真的跟著點就行）
打開插件：
窗口>>擴展>>Bodymovin(如果沒找到偏窝，那一定是沒安裝好)
重點來了伦意，導出設置
點擊設置后，默認勾選以下三項
勾選demo是為了能導出一個html文件用來檢查所導出的文件效果是不是你想要的硼补，畢竟json文件只是一堆代碼驮肉，看不懂。demo選項下的background color選項不要勾選已骇。其他選項的功能离钝，大家可以去研究研究
勾選好后，點擊“save”保存一下褪储。一般來說卵渴，只有勾選一次，它就會記錄你的選項鲤竹，下次就不用再勾選了浪读。為了以防萬一，可以點擊彈窗右上角的“Remember setting”記錄你的勾選項。
如果你還是擔心碘橘，那就關(guān)了它互订，再打開看看，TA有沒有勾選你上次勾選的項
設置好后點擊“render”開始導出痘拆，你會看到這個界面??
進度條跑完仰禽，則導出成功。通常來說纺蛆，進度條是很快的坟瓢，如果超過10分鐘，要么是你的項目是真的復雜犹撒，要么可能就有問題了折联。如果有問題建議檢查一下插件是否安裝正確
導出成功后，你會得到這么兩個文件
后綴為“.json”的文件就是需要交付給開發(fā)的识颊，直接引用即可诚镰，所以說動效的還原度肯定就是100%了！
demo文件中有一個“html”文件祥款。右鍵用瀏覽器打開它清笨，即可預覽導出的實際效果。
打開后刃跛，你會發(fā)現(xiàn)TA是沒有固定大小的抠艾。這是沒問題的，開發(fā)限制大小就行桨昙。
關(guān)于漸變色導出失敗變成黑白的問題
網(wǎng)傳辦法:修改代碼中的漸變色的值检号，你需要做的是把json文件用記事本的方式打開，從中找到你的漸變色的那串代碼蛙酪，然后把漸變的色彩值改了齐苛，漸變位置（0，1）改了桂塞“挤洌……我掙扎過，但是改完給開發(fā)說還是黑白的阁危，所以我也不知道我哪兒改錯了
另外一個辦法：
在AE工程文件中玛痊，將所有有漸變色的元素中，漸變屬性的地方名字改成“Gradient Fill 1”“Gradient Fill 2”“Gradient Fill 3”...這樣的命名狂打，這樣就能識別到漸變的命名了擂煞。
需要注意的是：命名不能重復。命名的位置要正確菱父，命名一定得在色彩設置的位置颈娜，改在形狀名稱位置是沒有效果的。
修改完成后浙宜，注意一定要保存一下工程文件再重新導出官辽。這樣就能得到想要的了。
另外提醒的是：如果AE源文件中有使用到png的素材也是可以應用這個插件導json文件的粟瞬。只是除了“json”這個文件還會到處一個“image”的文件夾同仆，這里面就是使用到的png素材，需要一并發(fā)給開發(fā)裙品。
原文鏈接：https://www.zcool.com.cn/article/ZMTM0OTU2OA
