前言
在動(dòng)畫還原上研儒，設(shè)計(jì)師和開發(fā)都碰到過(guò)以下問(wèn)題：
1拼苍、動(dòng)效復(fù)雜徘郭，通過(guò)原生代碼還原動(dòng)畫非常耗時(shí)耗力
2来庭、設(shè)計(jì)師即使輸出完整的動(dòng)畫參數(shù)說(shuō)明肴盏，使用代碼還原動(dòng)效還原仍然會(huì)有偏差
有了大殺器Lottie和Bodymovin佛寿，可以完美解決以上問(wèn)題，讓我用一個(gè)詞來(lái)形容Lottie+Bodymovin組合，那就是“省心”舞肆。
一、什么是Lottie和Bodymovin？
Lottie是Airbnb開源的一套跨平臺(tái)（Web惠险、IOS十兢、Android宵呛、React Native）的動(dòng)畫庫(kù)，設(shè)計(jì)師在Adobe Effect制作動(dòng)畫之后，使用Lottie提供Body movin（AE插件）將動(dòng)畫導(dǎo)出帶有矢量動(dòng)畫信息的Json文件晋控，最后開發(fā)將Json文件放入App項(xiàng)目中，就可以將動(dòng)畫100%還原到產(chǎn)品中蝌焚。
對(duì)于不同的工作角色裹唆，Lottie+Bodymovin提供一套完整動(dòng)畫解決方案：
- 設(shè)計(jì)師，百分百還原設(shè)計(jì)師的腦洞和創(chuàng)意只洒，相信這是對(duì)設(shè)計(jì)師的最好嘉獎(jiǎng)
- 開發(fā)品腹，拋棄臃腫的代碼，如今只需要簡(jiǎn)單導(dǎo)入和有限的代碼就可以完成動(dòng)畫開發(fā)
- 項(xiàng)目管理红碑，不同擔(dān)心因?yàn)檫€原難題而影響了項(xiàng)目進(jìn)度
- 產(chǎn)品經(jīng)理，動(dòng)畫可以為產(chǎn)品錦上添花
二、跨平臺(tái)實(shí)現(xiàn)
對(duì)于不同設(shè)備析珊，開發(fā)小哥哥可以關(guān)注下面的項(xiàng)目了解進(jìn)行實(shí)現(xiàn)——
- Web頁(yè)面羡鸥，通過(guò)Airbnb的開源項(xiàng)目“l(fā)ottie-web”（https://github.com/airbnb/lottie-web）實(shí)現(xiàn)
- Android原生，通過(guò)Airbnb的開源項(xiàng)目“l(fā)ottie-android”（https://github.com/airbnb/lottie-android）實(shí)現(xiàn)
- IOS原生忠寻，通過(guò)Airbnb的開源項(xiàng)目“l(fā)ottie-ios”（https://github.com/airbnb/lottie-ios）實(shí)現(xiàn)
- React Native惧浴，通過(guò)Airbnb的開源項(xiàng)目“l(fā)ottie-react-native”（https://github.com/react-native-community/lottie-react-native）實(shí)現(xiàn)
下面重點(diǎn)介紹下AE插件Bodymvin的安裝～～
三、Bodymovin安裝和使用
首先你的電腦已經(jīng)安裝了AE奕剃，如果你的AE打開了衷旅，在安裝之前先將AE關(guān)閉。
第一步纵朋，安裝ZXP柿顶，為安裝Bodymovin插件到AE做準(zhǔn)備。
下載地址：https://aescripts.com/learn/zxp-installer/
第二步：下載最新的Bodymovin插件操软。
下載地址：https://github.com/airbnb/lottie-web/tree/master/build/extension
然后打開第一步下載的ZXP嘁锯，將Bodymovin拖動(dòng)進(jìn)去。
下面這張圖表示安裝完成聂薪。
第三步家乘，打開AE，AE進(jìn)行允許AE使用腳本設(shè)置藏澳，操作如下：
點(diǎn)擊“After Effects CC > 首選項(xiàng) > 常規(guī)”「Mac OS：快捷鍵Command+Option+;(分號(hào))仁锯；Win：Ctrl+Alt+;(分號(hào))」，選中“允許腳本寫入文件和訪問(wèn)網(wǎng)絡(luò)”翔悠，點(diǎn)擊確定业崖。
第四步，選擇AE窗口 > 擴(kuò)展 > Bodymovin凉驻，打開Bodymovin窗口腻要。
第五步，先選擇你要導(dǎo)出動(dòng)畫的存儲(chǔ)路徑涝登，然后點(diǎn)擊渲染即可將你選擇的合成動(dòng)畫導(dǎo)出為Json文件雄家。輸出Json后，可以點(diǎn)擊左上角的預(yù)覽（preview）按鈕胀滚，拖動(dòng)下面的滑塊進(jìn)行預(yù)覽趟济。
最后媳纬，將導(dǎo)出的Json文件或Json+images文件發(fā)給開發(fā)小哥哥去實(shí)現(xiàn)啦～～
四双肤、案例分享
前面有提到最后導(dǎo)出的可能是Json文件，也可能是Json文件加一個(gè)images包钮惠，所以分2種情況茅糜，如果在AE里直接繪制素材并制作動(dòng)畫，用Bodymovin導(dǎo)出的只是一個(gè)Json文件素挽；如果在AE中導(dǎo)入外部素材制作動(dòng)畫蔑赘，除了Json文件之外，還會(huì)有一個(gè)images圖片包生成预明，這個(gè)包包含了動(dòng)畫中的所有圖片素材缩赛。
下面根據(jù)這2種情況分享下實(shí)際應(yīng)用案例：
1、在AE里直接繪制素材制作動(dòng)畫
需求背景是需要首頁(yè)金剛區(qū)2個(gè)Icon入口（分別是支付寶支付和微信支付）合并為1個(gè)Icon入口撰糠，要素依然需要保留酥馍，同時(shí)需要讓用戶一看就知道這塊功能是移動(dòng)支付的入口。
其中一個(gè)方案是采用Logo平滑過(guò)渡的方式窗慎，預(yù)覽效果如下：
里面的元素是在AE里頭直接繪制的物喷，AE截圖如下。
最后用Bodymovin導(dǎo)出的就只有一個(gè)Json文件遮斥。
2峦失、導(dǎo)入外部素材在AE里頭制作動(dòng)畫
外部素材可以是ps文件、ai文件或者是png文件术吗。
以搖錢花搖一搖獲得獎(jiǎng)勵(lì)金動(dòng)效為例尉辑，動(dòng)畫預(yù)覽如下：
所有素材都是事先用ps繪制好再導(dǎo)入到AE中去制作動(dòng)畫的。
最后導(dǎo)出了Json文件+images包较屿。
總結(jié)
綜上隧魄，通過(guò)Lottie+Bodymovin來(lái)還原動(dòng)畫是非常省心的。
需要注意的一點(diǎn)是Lottie和Bodymovin還有一點(diǎn)點(diǎn)小瑕疵隘蝎，小部分AE屬性在各平臺(tái)存在兼容問(wèn)題购啄，也就是在AE里頭直接繪制使用的某些屬性在一些平臺(tái)不能被解析和還原，我在附錄中附上了Lottie和Bodymovin支持導(dǎo)出的AE屬性列表嘱么，不被支持的屬性可以先避免使用狮含。
不過(guò)，引用外部素材的話就可以放心使用了曼振，所以有些AE不被支持的屬性效果可以在PS或AI繪制好再導(dǎo)入AE中作為素材制作動(dòng)畫几迄。
附錄
Lottie和Bodymovin支持導(dǎo)出的AE屬性。
該表格英文版見：http://airbnb.io/lottie/#/supported-features
作者：辛小仲冰评，一名正在成長(zhǎng)的交互設(shè)計(jì)師映胁。微信公眾號(hào)：辛小仲。
本文由 @辛小仲 原創(chuàng)發(fā)布于簡(jiǎn)書甲雅。未經(jīng)許可解孙，禁止轉(zhuǎn)載坑填。
