Loading作為一個(gè)常見，并且?guī)в信潘缘膭?dòng)畫，已經(jīng)被各路大神表現(xiàn)的淋漓盡至。那么如何在眾優(yōu)秀作品下，做出一個(gè)性化的Loading動(dòng)畫？

Loading種類：

1.狀態(tài)類（進(jìn)度條）：通常數(shù)據(jù)量很大，客戶端已知加載量，并能根據(jù)當(dāng)前加載速度計(jì)算出何時(shí)加載完成。

狀態(tài)型的Loading以進(jìn)度條類為基準(zhǔn)，可以為用戶提供預(yù)期時(shí)間，多伴隨百分比進(jìn)度出現(xiàn)。進(jìn)度條的形式以線性的形式出現(xiàn)，已知總量，降低用戶對(duì)期待時(shí)間的感受。無(wú)聊的等待會(huì)讓人厭煩，作為一個(gè)UI設(shè)計(jì)師需要關(guān)注每一個(gè)細(xì)節(jié)，尤其是用戶的情緒并將引導(dǎo)到加載后的頁(yè)面。

By Piotr Adam Kwiatkowski

2.無(wú)狀態(tài)類（菊花）：通常數(shù)據(jù)量比較小，客戶端無(wú)法預(yù)知加載量。

無(wú)狀態(tài)類的Loaing以菊花為代表，通常都是一組可以無(wú)限循環(huán)播放的動(dòng)畫。

無(wú)狀態(tài)類的Loaing如有需要可以做的特別一些：https://dribbble.com/search?q=loading

我們的App需要一個(gè)無(wú)狀態(tài)的Loading。

我始終相信設(shè)計(jì)的直覺(jué)很重要，抓住直覺(jué)的爆發(fā)點(diǎn)，是一個(gè)成熟設(shè)計(jì)師必備的素質(zhì)。于是先按照最初的想法快速做了一版。

相信很多人對(duì)這個(gè)Loaing眼熟，當(dāng)然，這肯定不是我們要的效果，不過(guò)在制作這Loading的時(shí)候不斷的推翻自己的想法，時(shí)而清醒時(shí)而模糊，感覺(jué)突然找到了方向但瞬間也可能煙消云散。這種不斷反復(fù)的過(guò)程中還是收獲了很多。

既然是無(wú)限，循環(huán)，表現(xiàn)上就不能過(guò)于缺乏趣味，這個(gè)度很難把握。形式感上面設(shè)計(jì)要簡(jiǎn)單，又要通過(guò)最直接的方法創(chuàng)造空間感，偶然間發(fā)現(xiàn)馬戲團(tuán)的拋球表演。突然間有了靈感，于是就沿著這個(gè)思路開始動(dòng)手設(shè)計(jì)：

我嘗試去直接模仿拋棄的運(yùn)動(dòng)，但是效果并不是很好，但是從Demo中可以看出，值得很入研究。

為此我們搜索了一下現(xiàn)實(shí)中的扔球效果：

經(jīng)過(guò)分析我們得出了第一條小球的運(yùn)動(dòng)路經(jīng)是一個(gè)無(wú)限的符號(hào)。

工作路經(jīng)確定后，導(dǎo)入C4D中進(jìn)行單球運(yùn)動(dòng)軌跡測(cè)

由于實(shí)例中，小球會(huì)受到重力以及加速度的影響，并非勻速運(yùn)動(dòng)，但在實(shí)際Loading制作過(guò)程中，為了視覺(jué)效果，我們希望小球做勻速運(yùn)動(dòng)

發(fā)現(xiàn)問(wèn)題：小球在中心焦點(diǎn)位置出現(xiàn)明顯卡頓

起初我們認(rèn)為是速度曲線沒(méi)有調(diào)整好所導(dǎo)致的，但我們嘗試幾版后發(fā)現(xiàn)并不是這樣，最后我們發(fā)現(xiàn)導(dǎo)致這個(gè)問(wèn)題的原因是路經(jīng)節(jié)點(diǎn)問(wèn)題。

調(diào)整節(jié)點(diǎn)

通過(guò)調(diào)整節(jié)點(diǎn)后，不難發(fā)現(xiàn)，中心焦點(diǎn)處的卡頓明顯不見了

為了加強(qiáng)透視效果，我們將球的大小和顏色進(jìn)行了關(guān)鍵幀處理，這已處理增加的景深對(duì)視覺(jué)的沖擊，使得空間感更強(qiáng)了。

看起來(lái)怪怪的。。。。。

為了使整個(gè)運(yùn)動(dòng)規(guī)律更加精準(zhǔn)，我們發(fā)現(xiàn)運(yùn)動(dòng)的起點(diǎn)距離是關(guān)鍵，不懈的追求完美的情況下，總是會(huì)有頓悟的時(shí)刻，幸運(yùn)的是找到了問(wèn)題的所在

三個(gè)球勻速運(yùn)動(dòng)的情況下，應(yīng)該保證每相鄰兩個(gè)球之間路經(jīng)上的距離是相同的。

藍(lán)藍(lán)設(shè)計(jì)( m.wnxcall.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)