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