Jancie: 大家好，很高興看到今天的采訪內(nèi)容，在過去，在Android、iOS、React Native app中創(chuàng)建復雜動畫是一件較為困難的事情，需要為不同尺寸的手機準備不同的圖片，或者寫很多難以維護的代碼，一般都是通過給 PNG 序列圖，或者是開發(fā)自己寫這樣對程序員哥哥們來說其實是需要很大的工作量的，也使得很多app放棄了使用動畫這一表現(xiàn)力的方式，但現(xiàn)在有了這個強大的動畫庫將使得動畫實現(xiàn)變得無比輕松，那么他是誰？？接下來我們有請Lottie～
Lottie：還是有點小緊張呢，哈哈，大家好，我是 Airbnb 開源的一個動畫渲染庫，同時支持 Android、iOS、React Native 平臺。支持實時渲染After Effects動畫，使得app中使用動畫可以像使用靜態(tài)資源一樣簡單。使用的話要從bodymovie(開源的 After Effects 插件)導出的json數(shù)據(jù)來作為動畫數(shù)據(jù)。那我畫個圖給大家看，方便理解啊：
設(shè)計師使用 After Effects 制作漂亮的動畫，并導出json文件給開發(fā)者，程序員哥哥再也不用辛苦去創(chuàng)建它了
由于動畫由JSON驅(qū)動，因此它們的體積非常小，可是復雜程度可以很高哦，是不是很棒！
可以播放動畫，調(diào)整大小，循環(huán)，加快速度，減慢速度，顛倒速度，甚至交互式地清理動畫。
使用場景有很多：
啟動動畫：典型場景是APP logo動畫的播放
上下拉刷新動畫：所有APP都必備的功能，利用 Lottie 可以做的更加簡單酷炫了
加載動畫：典型場景是網(wǎng)絡(luò)請求的loading動畫
提示動畫：典型場景是空白頁的提示
按鈕動畫：典型場景如switch按鈕、編輯按鈕、播放按鈕等按鈕的切換過渡動畫
禮物動畫：典型場景是直播類APP的高級動畫播放
視圖轉(zhuǎn)場動畫
下面展示一下我的神奇能力吧～
鐺鐺鐺！重點來了，說了這么多，怎么安裝這個神奇的軟件呢！
下面是分割線，一步步跟我來～
第一步：安裝?bodymovin
Bodymovin是After Effects的一個插件，可以將json數(shù)據(jù)格式的動畫導出為Lottie使用。
Mac用戶：
1、打開安裝器?zxp installer，拖動 bodymovin.zxp 到安裝器上；
很快這個插件就會安裝成功了，然后你可以在 ZXP installer 里面看到這個插件已經(jīng)存在了～
第二步：那么我們來到AE去看看如何導出json文件吧
1.首先來到首選項--常規(guī)把腳本的權(quán)限打開
2.窗口—擴展—Bodymovin，選擇好合成和保存路徑后，點擊 Render 導出 data.jason 文件，再把該文件交給 iOS 開發(fā) （其他同理），具體如下圖。
這樣子就有這個插件在AE中顯示了，當然你可以把它移動到一個喜歡的位置方便操作
這里設(shè)置選擇 Demo ，可以導出html文件，在瀏覽器查看動畫效果。選擇 Glyphs 將字體轉(zhuǎn)換成圖形形狀。
這就是我們導出的文件啦，可以進行網(wǎng)頁預(yù)覽，json文件交付給開發(fā)
當然了這么強大的插件其實還會有一些限制的，有一些添加蒙版或者效果的動畫會不能正常展示，但是它所應(yīng)用的場景還是非常多，夠大家工作中使用，那么廢話不多說，我已經(jīng)看到你躍躍欲試的心??，快去體驗吧～
寫教程緣故也是因為自己剛開始接觸老鐵時，對于它的用處和安裝有很多不明白的地方，到處請教摸索也是花費了很多的時間，如果你也是剛開始使用，希望這篇文章可以幫助到你，需要的下載鏈接都在文章內(nèi)容里面，如果我有寫的那些不完善的地方可以加我的微信，咱們互相探討。
