資源描述：
《App加載動畫知識體系：交互、視覺都需要掌握！.doc》由會員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在學(xué)術(shù)論文-天天文庫。
1、App加載動畫知識體系：交互、視覺都需要掌握！ 我大膽預(yù)測了一下，以后App的加載動畫都應(yīng)該遵循越來越簡潔的設(shè)計原則，突出內(nèi)容，去掉無用的、過渡的形式設(shè)計。也許無文字提示的加載動畫確實是一個流行趨勢！ 對于視覺設(shè)計師來說，其實我們有很大的優(yōu)勢，如果我們的思維邏輯清晰并且樂于總結(jié)，那么我們總結(jié)的內(nèi)容將不僅僅只是一個大的分類總結(jié)，還能夠提供一些具體的執(zhí)行方法，并且將執(zhí)行過程中踩到的坑和大家一起分享討論?！ 〗裉煳乙窒淼氖顷P(guān)于加載動畫的知識體系及簡單的制作方法，至于特殊場景總結(jié)不全之處，還請批判指正?！ 〈缶V如下：加載動畫存在
2、的意義加載動畫的使用場景前段開發(fā)實現(xiàn)動畫的方法工作中輸出加載動畫的方法與步驟制作加載動畫時的注意事項加載動畫的流行趨勢 一、加載動畫存在的意義 眾所周知，app服務(wù)器在加載數(shù)據(jù)的時候需要用戶等待一段時間，為了緩解用戶等待過程中的焦慮情緒，設(shè)計者可以采用加載動畫的方式來緩解用戶的等待時間，使整個等待過程變得更加友好、流暢?！ ∫粋€好的加載動畫分為兩個層次：第一個層次是滿足用戶的基本心理預(yù)期，緩解等待的焦慮；第二個層次是要給出用戶一定的驚喜，甚至讓用戶對加載動畫抱有期待、好奇的心理。 這里我們暫時先只討論第一個層次的內(nèi)容，因為這
3、已經(jīng)能夠滿足大多數(shù)app的需求了。至于如何做出讓用戶驚喜的加載動畫（如餓了么、京東的加載動畫），我們可以另外討論?！ 《?、加載動畫的使用場景 查閱大量關(guān)于加載的資料后，發(fā)現(xiàn)很多教程與文章都是從樣式的維度來分類的，今天我們換個維度，從使用場景出發(fā)，來打造屬于我們自己的加載動畫設(shè)計體系?！ 〖虞d動畫的常見使用場景一共分為以下5種：下拉刷新加載切換新頁面數(shù)據(jù)加載頁面上拉加載頁面局部加載啟動頁加載 我們還是一個一個來了解： 1.下拉刷新加載 下拉刷新可以讓用戶在看到本地數(shù)據(jù)的同時去重新加載數(shù)據(jù)，以確保用戶可以看到最新的內(nèi)容?！ ∠?/p>
4、拉加載一般分為兩種形式：動畫加文字（如今日頭條下拉加載樣式）、純動畫（如網(wǎng)易郵箱）?！ ∪缦聢D： 2.切換新頁面數(shù)據(jù)加載 當(dāng)切換到新頁面時，常常會有加載數(shù)據(jù)的時候，這也是加載動畫使用最多的場景，市面上的加載樣式也是多種多樣，如：白屏加載、toast加載、進(jìn)度條加載、導(dǎo)航欄加載等等?！ ?.頁面上拉加載 當(dāng)一個頁面數(shù)據(jù)量過大時，服務(wù)器不會一次性將內(nèi)容全部加載，而是加載一部分，只有當(dāng)用戶向上拉動頁面時，才會加載更多，如下圖： 上拉加載的樣式不會過于復(fù)雜，一般采用比較簡單的轉(zhuǎn)圈動畫來實現(xiàn)?！ ?.頁面局部加載
5、常見的局部加載場景有視頻列表、加載圖片的占位圖等，如下圖： 5.啟動頁加載 為了緩解用戶啟動app時的等待時間，有些app會將啟動頁設(shè)計成一個加載動畫，如京東、百度貼吧等，不僅使等待時間變得有趣，并且增加了品牌記憶，達(dá)到了一箭雙雕的效果?！ ∪?、前端開發(fā)實現(xiàn)動畫的方法 1.調(diào)取系統(tǒng)自帶樣式 系統(tǒng)自帶樣式比較簡單，iOS系統(tǒng)的樣式是一個菊花，安卓系統(tǒng)的是一個轉(zhuǎn)圈的圓線。 2.設(shè)計師直接提供gif動圖 這種提供gif的方法，一般適用于比較大場景的加載動畫，如啟動頁。 需要注意的是原生系統(tǒng)是不支持gif控件的，iO
6、S需要調(diào)取網(wǎng)頁的gif，而安卓需要調(diào)取播放器才能實現(xiàn)動動畫的展現(xiàn)，所以如果不是特殊場景，一般不推薦使用gif控件來實現(xiàn)動畫?！ ?.前端自己將動畫用代碼寫出來 最常用的一種方式就是讓前端哥哥自己將動畫寫出來，當(dāng)然這時候你還是要做出一個示范動畫，并告知動畫的規(guī)則是怎樣的（下文會詳細(xì)說明）?！ ∷摹⒐ぷ髦休敵黾虞d動畫的方法與步驟 講了這么多內(nèi)容其實只是讓大家對整個加載動畫的全局有個認(rèn)知，在執(zhí)行過程中有理有據(jù)，避免無從下手的情況出現(xiàn)。換句話說，在了解以上內(nèi)容后，至少我們知道了某種場景下該做什么，至于怎么做，我用一個下拉刷新的動畫實例
7、來具體講解一下輸出加載動畫的過程?！ ?.確定使用場景與實現(xiàn)方法使用場景：下拉刷新實現(xiàn)方式：前端代碼實現(xiàn) 2.設(shè)計師制作下拉刷新動畫，并透徹理解動畫機(jī)制 動畫如下圖（參考QQ郵箱下拉加載）： 制作過程中，我們可以優(yōu)先考慮加入品牌元素在動畫中，如品牌logo、品牌顏色、品牌名稱，這些都可以融入到加載動畫當(dāng)中。 3.輸出加載動畫的規(guī)范 如下圖： 首先你需要將動畫本身的規(guī)則寫出來，如我們目前制作的這三個小球，一個循環(huán)內(nèi)平均有6個關(guān)鍵節(jié)點，每個節(jié)點需要0.3秒，也就是循環(huán)一次需要1.8秒，我們將其動作全部分解輸出給開發(fā)
8、，并將圓球的大小、顏色等信息注明，這樣開發(fā)看到規(guī)則后就會一目了然，保證動畫的還原度?！ ∪欢@僅僅只是做了動畫本身的規(guī)則，我們還需要考慮動畫與頁面間的關(guān)系，例如下圖是一個下拉松開手指后，頁面正在加載的狀態(tài)，我們不僅要考慮正在加載的狀態(tài)，還要考慮其下
