Airbnb 開發(fā)的這個動效神器，可以幫你輕松讓動效落地，今天來個教程讓大家學(xué)一下。
在沒有 Lottie 之前，一般都是通過給 PNG 序列圖，或者是開發(fā)自己寫，當(dāng)然這些動畫一般都是比較簡單的，如果遇到復(fù)雜的動畫，開發(fā)一般都會拒絕掉，理由一般都是這個沒法實現(xiàn)，這個動畫需要很多時間，版本迭代周期緊，這個版本沒法實現(xiàn)了，要不以后有空給你看看吧。不過自從有了 Lottie，再也不用擔(dān)心了，一般的動畫開發(fā)都能高效快速的給你高保真還原。
由 Airbnb 開發(fā)的 Lottie 是一個將 After Effects 動畫提供給任意一個 iOS，macOS，Android 還有 React Native 原生 APP 的文件庫。這些動畫通過一個叫 Bodymovin 的開源 After Effects 插件，以 JSON 文件的形式進(jìn)行輸出。Lottie 通過 JSON 格式下載動畫數(shù)據(jù)并實時提供給開發(fā)者。
1. 功能性(Functional)
優(yōu)化用戶對界面的感知，使其感到更輕快更全面。
引起用戶的注意。
提供(用戶操作后的)視覺(功能)反饋，并為下一步的跳轉(zhuǎn)做準(zhǔn)備。
2. 物理性(Material)
在一致的動畫原則和物理的(符合物理定律的)UI模型基礎(chǔ)上構(gòu)建動畫。
定義屏幕和UI元件之間的空間相對關(guān)系，他們的相對高度，權(quán)重以及速度。
3. 趣味性(Delightful)
在上面兩個部分都滿足的情況下，加入一些有趣的動畫。
使它感覺獨特，能在諸多動畫中能讓人眼前一亮。
娛樂用戶，并讓他們一想到動畫就能想到該產(chǎn)品或者反之。
第一步：安裝 bodymovin 插件
如果你還沒安裝 AE，那你先暫停一會，去安裝一下AE 再繼續(xù)。這里重點講解一下如何安裝 bodymovin 插件。
Mac用戶：
打開安裝器 ZXP Installer，拖動 bodymovin.zxp 到安裝器上。
安裝過程中會先看到 updating，耐心等待一分鐘左右，看到 The extension was successfully installed! 則表示插件安裝成功了，然后你可以在 ZXP installer 里面看到這個插件已經(jīng)存在了，具體可以看下圖。
Windows 用戶：GitHub 網(wǎng)站的方法安裝
第二步：如何導(dǎo)出 json 動畫文件
打開AE，首選項—常規(guī)，將允許腳本寫入文件和訪問網(wǎng)絡(luò)選項勾選上。
窗口—擴(kuò)展—Bodymovin，選擇好合成和保存路徑后，點擊 Render 導(dǎo)出 data.jason 文件，再把該文件交給 iOS 開發(fā) (其他同理)，具體如下圖。
這里設(shè)置選擇 Demo ，可以導(dǎo)出html文件，在瀏覽器查看動畫效果。選擇 Glyphs 將字體轉(zhuǎn)換成圖形形狀。
導(dǎo)出文件
第三步：交付加載動畫
如果你上面的步驟全部都走通了，下面我們開始做一個簡單的動畫，來加深一下理解，如果講的不太好，或者有不對的地方，希望留言指出~
實現(xiàn)的效果
AE新建畫板
通過 iOS 開發(fā)那里得知，AE 畫板的尺寸等于 iOS 開發(fā)的一倍圖尺寸，所以我直接新建了 50x50px 的畫板大小，這樣的話，最終實現(xiàn)的效果跟自己做的尺寸大小會一模一樣。不過你們可以先做動畫，然后通過新建預(yù)合成縮放到新建的 50x50px 的畫板即可。(如果你聽不懂，說明你需要學(xué)習(xí)一下 AE 的基礎(chǔ)知識了，參考：https://uiiiuiii.com/aftereffects)
時間設(shè)置
動畫的效果是通過走線動畫完成，最終給了20幀，我設(shè)置的動畫是 25 幀/秒，換算成時間就是800ms。
導(dǎo)出設(shè)置
記得一定要將合成修建至工作區(qū)域，否則開發(fā)那邊的動畫就會出現(xiàn)消失一段時間的情況，必須讓你的動畫能完整的來回，不要有多余的空白區(qū)域。
開發(fā)設(shè)置
這里要先聲明一點，我這里的動畫是不需要交互的動畫，其實 lottie 調(diào)用的 json 動畫文件是可交互的。lottie 本身會提供一個 progress 的參數(shù)，相當(dāng)于動畫的進(jìn)度條，這個數(shù)值是可以用代碼來控制的，能和手勢等各種操作綁定，做到直接控制動畫的播放進(jìn)度。比如下拉刷新動畫就可以通過 lottie 實現(xiàn)。
調(diào)節(jié) lottie 動畫的速度，也就相當(dāng)于調(diào)節(jié)動畫完成的時間，所以你可以坐在開發(fā)旁邊慢慢的調(diào)節(jié)動畫直到你滿意為止。
調(diào)節(jié)動畫的大?。簩挾群透叨?，同理你也可以讓開發(fā)給你調(diào)節(jié)動畫的大小，還是讓你滿意為止。
不是所有的動效 lottie 都能實現(xiàn)，希望可以認(rèn)識到這一點，如果不清楚是否可以實現(xiàn)，可以先熟讀 lottie-ios 的官方文檔。
有些可交互的動畫可以通過分段來實現(xiàn)，可以給開發(fā) 2 個及以上的 json 文件，然后拼接在一起即可。
Lottie V 2.0.3 還不支持的動畫有: 合并形狀、表達(dá)式、3D圖層、單獨修剪多重形狀
以上就是類似于app界面加載動畫設(shè)計知識的內(nèi)容，如果想要了解關(guān)于網(wǎng)站內(nèi)容運(yùn)營及網(wǎng)站設(shè)計基礎(chǔ)知識，可直接點擊查看
