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