欧美成人午夜免费全部完,亚洲午夜福利精品久久,а√最新版在线天堂,另类亚洲综合区图片小说区,亚洲欧美日韩精品色xxx

UI設(shè)計(jì)之2分鐘看懂用Lottie實(shí)現(xiàn)App加載動(dòng)畫

2018-03-27 14:45:19 2036瀏覽

在沒有 Lottie 之前，一般都是通過給 PNG 序列圖，或者是開發(fā)自己寫，當(dāng)然這些動(dòng)畫一般都是比較簡單的，如果遇到復(fù)雜的動(dòng)畫，開發(fā)一般都會(huì)拒絕掉，理由一般都是這個(gè)沒法實(shí)現(xiàn)，這個(gè)動(dòng)畫需要很多時(shí)間，版本迭代周期緊，這個(gè)版本沒法實(shí)現(xiàn)了，要不以后有空給你看看吧。不過自從有了 Lottie，再也不用擔(dān)心了，一般的動(dòng)畫開發(fā)都能高效快速的給你高保真還原。

什么叫 Lottie ？

由 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ā)者。

相關(guān)學(xué)習(xí)鏈接

Lottie官方：Lottie 官方地址

bodymovin：GitHub 地址

lottie-ios：GitHub 地址

lottie-android：GitHub 地址

動(dòng)效為何如此重要？

1、功能性（Functional）

? 優(yōu)化用戶對界面的感知，使其感到更輕快更全面。

? 引起用戶的注意。

? 提供（用戶操作后的）視覺（功能）反饋，并為下一步的跳轉(zhuǎn)做準(zhǔn)備。

GIF

2、物理性 (Material)

? 在一致的動(dòng)畫原則和物理的（符合物理定律的）UI模型基礎(chǔ)上構(gòu)建動(dòng)畫。

? 定義屏幕和UI元件之間的空間相對關(guān)系，他們的相對高度，權(quán)重以及速度。

GIF

3、趣味性 (Delightful)

? 在上面兩個(gè)部分都滿足的情況下，加入一些有趣的動(dòng)畫。

? 使它感覺獨(dú)特，能在諸多動(dòng)畫中能讓人眼前一亮。

? 娛樂用戶，并讓他們一想到動(dòng)畫就能想到該產(chǎn)品或者反之。

GIF

第一步：安裝 bodymovin 插件

如果你還沒安裝 AE，那你先暫停一會(huì)，去安裝一下AE 再繼續(xù)。這里重點(diǎn)講解一下如何安裝 bodymovin 插件。

相關(guān)下載鏈接

ZXP Installer：見附件（Mac）

bodymovin：GitHub 地址

Mac用戶：

1、打開安裝器 ZXP Installer，拖動(dòng) bodymovin.zxp 到安裝器上；

2、安裝過程中會(huì)先看到 updating，耐心等待一分鐘左右，看到 The extension was successfully installed! 則表示插件安裝成功了，然后你可以在 ZXP installer 里面看到這個(gè)插件已經(jīng)存在了，具體可以看下圖。

Windows 用戶：自己看這個(gè) GitHub 網(wǎng)站的方法安裝吧，對不住了~

第二步：如何導(dǎo)出 json 動(dòng)畫文件

1、打開AE，首選項(xiàng)—常規(guī)，將允許腳本寫入文件和訪問網(wǎng)絡(luò)選項(xiàng)勾選上。

2、窗口—擴(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è)簡單的動(dòng)畫，來加深一下理解，如果講的不太好，或者有不對的地方，希望留言指出或者加我微信交流~

實(shí)現(xiàn)的效果

左邊是靜態(tài)圖，右邊是實(shí)現(xiàn)的效果

AE新建畫板

通過 iOS 開發(fā)那里得知，AE 畫板的尺寸等于 iOS 開發(fā)的一倍圖尺寸，所以我直接新建了 50x50px 的畫板大小，這樣的話，最終實(shí)現(xiàn)的效果跟自己做的尺寸大小會(huì)一模一樣。不過你們可以先做動(dòng)畫，然后通過新建預(yù)合成縮放到新建的 50x50px 的畫板即可。（如果你聽不懂，說明你需要學(xué)習(xí)一下 AE 的基礎(chǔ)知識(shí)了，這里就不講解 AE 基礎(chǔ)知識(shí)了）

時(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ù)值是可以用代碼來控制的，能和手勢等各種操作綁定，做到直接控制動(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)畫的大小，還是讓你滿意為止。