1.前言
此刻深圳大雨瓢潑，周圍一片黑壓壓的。對於這樣的日子，果斷從冰箱裡面拿出肥宅快樂水，開啟電腦檢視最近更新的番劇，舒服窩在沙發裡真是美滋滋。
但是不知道大雨原因，網路載入一直時好時壞，看的賊憂傷，所以臨時暫停，先緩衝一下。而此時快樂水中的氣泡不斷在底下冒出、爆炸，整個房間瀰漫著快樂的氣息。所以此景就著快樂水，就順便寫一下作為切圖仔我平日是如何快樂的處理載入動畫。
2.載入動畫誕生的背景
在講載入動畫之前，讓我們簡單回顧一下載入動畫的背景。
因為瀏覽器解析網頁的順序是從上往下執行，所以在這個頁面載入的過程中，使用者必須得等待頁面載入完成才能正常訪問這個網頁。
在這個使用者等待過程中，使用者看到或得到是什麼呢？
- 白屏
- 單調的DOM結構點
- 零散的空白圖片
- 有介面單卻無法響應相關操作
- ......
這樣使用者體驗是糟糕的，為了改善使用者體驗，這個時候前端工程師閃亮登場了。
但是由於網路是不穩定的，而且每個人的網路速率也是各不相同。同理你的專案網站，靜態資源的大小也各不相同。不穩定的因素有很多種，所以針對資源載入的不同場合，衍生出兩種流派來處理網頁資源載入問題。
一派為懶載入，一派為預載入。
免責提示
懶載入和預載入方法部落格，已經超級多了。所有本人在此不詳細敘說了，因為本篇部落格的著重點是動畫形式。思考動畫與懶載入和預載入如何完美的配合，錦上添花達到一個更好的使用者體驗，以及對於載入動畫的應用思考。
意思就是寫的得略粗糙，別噴我菜！
3.懶載入中動畫處理
懶載入目前主要應用的場景，主要以電商一類網站居多。就是當使用者首次該訪問網站的時候，網頁只對當前可視區域的資源進行載入，而其他頁面例如圖片等相關資源則不載入，需要使用者滑動到相應的可視區域之後，再載入該區域的資源。
這裡我們訪問兩大電商網站京東、天貓，滑鼠向下滾動觸發懶載入行為來舉例說明：
京東商城懶載入等待效果：
天貓商城懶載入等待效果：
PS：這裡兩大商城直接用的粗暴用的的GIF圖片，雖然GIF圖片資源佔用的比CSS3動畫要大，但是相容性卻比CSS3好，不同情況取捨是不同的。
同時天貓的一個小細節貌似更加貼心。天貓中間的banner區域，放了一個天貓模特換裝的GIF圖片。專門用來緩衝banner區域的圖片預載入時空白感，而京東的banner部分卻沒有這個小細節。
京東的banner介面
天貓的banner介面
一句話就是，電商大公司懶載入基本上GIF圖片。
4.預載入之後動畫
前面懶載入載入一部分，然後根據需求使用者的行為再相應載入。畢竟這個商品圖片多，圖片資源數量屬於無限大，所以全部載入一次性載入是不可能的。
前面電商網站之所以採取懶載入，是因為一個電商網站頁面展示的商品太多了。拿天貓首頁來說，天貓一個首頁至少7-8屏頁面長度那麼長，每一屏的上面圖片數量都不少。如果說一次性全部載入，那還沒有等頁面載入完，使用者就直接關掉網站去別的網站了。
但是一些類似H5宣傳網站，H5小遊戲，如果採用懶載入就會有問題了。比如使用者控制一個小人運動，但是走一會就因為資源載入問題卡住，走一會就載入卡住，那估計很多使用者會直接煩躁的直接關掉網站，那這樣估計產品老哥馬上提刀來找你了。
因此對於使用者行為互動作為重心，而靜態資源又不像電商網站一樣成千上萬數量的H5，會優先把一些靜態資源通提前載入完畢，保證後續使用者行為體驗的流暢性。這種方案又被稱為預載入。
然後配合預載入的動畫，常見的組合方案就是百分比+進度條，根據資源onload載入情況，來告知使用者資源載入情況，已經何時能夠正常體驗這個H5。
5.一板斧--迴圈動畫
在前面無論是懶載入還是預載入，都會涉及到一些動畫作為視覺鋪墊。都屬於載入動畫兩板斧型別，那麼接下來首先講的就是一板斧--迴圈動畫
畢竟要是還不講解載入動畫，估計各位看官都要拿斧頭到我出租屋了。
許多物體的變化，都可以分解為連續重複而有規律的變化。因此在動畫製作中，可以盡製作幾幅畫面，然後像走馬燈一樣重複迴圈使用，長時間播放，這就是迴圈動畫。
視訊緩衝,資料請求這種情況下最為常見。這種動畫的迴圈次數取決於使用者的，自身的網路狀態。網路越快，該動畫存在時間就越短。
同理包括京東閃光動畫，天貓的換裝動畫也是屬於迴圈動畫的一種。
雖說這兩個直接是粗暴上了GIF圖，但是這也是歸屬迴圈動畫的一種，前端用css3也是可以實現的。
說了這麼多，沒有程式碼。感覺怪怪的，先上一個吃熱狗的迴圈DEMO給大家吧。
<style>
.demo{
position: relative;
margin: 100px auto;
width: 800px;
height: 138px;
border: 1px solid #ccc;
overflow: hidden;
}
.wsc{
z-index: 1;
position: absolute;
left: 0;
top: 0;
width: 132px;
height: 138px;
background: url('./img/wsc.png') no-repeat;
}
.hot-dog{
position: absolute;
width: 103px;
height: 58px;
right: 0;
top: 35px;
background: url('./img/hot-dog.png') no-repeat;
}
.first{
-webkit-animation: move 1.5s infinite linear;
animation: move 1.5s infinite linear;
}
.second{
-webkit-animation: move 1.5s 0.3s infinite linear;
animation: move 1.5s infinite 0.3s linear;
}
.three{
-webkit-animation: move 1.5s 0.6s infinite linear;
animation: move 1.5s infinite 0.6s linear;
}
.four{
-webkit-animation: move 1.5s 0.9s infinite linear;
animation: move 1.5s infinite 0.9s linear;
}
.five{
-webkit-animation: move 1.5s 1.2s infinite linear;
animation: move 1.5s infinite 1.2s linear;
}
@-webkit-keyframes move {
0%{
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(-720px, 0, 0);
transform: translate3d(-720px, 0, 0);
}
}
</style>
</head>
<body>
<div class="demo">
<div class="wsc"></div>
<div class="hot-dog first"></div>
<div class="hot-dog second"></div>
<div class="hot-dog three"></div>
<div class="hot-dog four"></div>
<div class="hot-dog five"></div>
</div>
</body>
複製程式碼效果圖如下：
比如借鑑這種風格，就可以做出一種別樣的迴圈動畫，兩張圖片的大小加起來不超過10KB。
案例demo已經上傳github，有興趣的朋友可以通過文末github地址檢視
6.二板斧--過程動畫
過程動畫，是隨口叫的。畢竟動畫出來的可比前端早，所以我就隨便取的名字。錯了，可以留言指點一下。
什麼叫過程，就是類似像進度條一樣，只有進度條載入完了之後，我們就知道這個載入過程完成了。 過程動畫也是如此，過程動畫只執行一次，通過動畫巧妙的反饋整個資源的載入，這種就適合資源比較多的專案。
這裡像進度條一類的demo，已經很多了。我就不一一講解，這裡拿17年騰訊視訊《忘憂鎮》舉例子說明吧：
這個忘憂鎮視訊當時號稱全網第一個，互動式劇場。就是整個視訊播放，整個電視劇情走向會隨著你的互動，而產生不同的結局。當時第一個解鎖的劇情就是趙麗穎的陪伴
當時17年10月下旬出來的，這個H5好像就點選破千萬級別，把以前遊戲場景中的情況部分搬到H5，的確產生了不少口碑。要知道，後面的互動式的美劇，《黑鏡：潘達斯奈基》也才是18年末出來的。
emmm，不扯遠了。讓我們先看看，《忘憂鎮》這個H5的載入動畫是如何顯示的？
當時我看到這個過程動畫，但是一下就驚住了。這個載入動畫的實現難度並不高，獲取載入的進度資訊，然後用canvas繪製到上面去。真可謂簡約不簡單，優點真是創意無極限很棒。
這裡估計有人要問了，如果說我的預載入資源很少。大概1s就刷的載入完成，那麼這樣載入太快就會導致過程動畫執行太快，結果使用者體驗感反倒不好, 但是我又想擁有類似這樣的拔劍過程動畫，來增強我專案中的特效。
的確，過程動畫針對預載入資源比較大的時候，才能發揮它的足夠優勢。如果說預載入速度很快，我一般建議採用的做法是：
迴圈動畫 + 過程動畫
在預載入的時候，先將過程動畫隱藏起來，然後呼叫迴圈動畫。因為迴圈動畫，一秒內至少迴圈好幾遍。所以短時間的動畫，迴圈動畫體驗效果最佳。然後等待資源載入完成之後，隱藏迴圈動畫,再將過程動畫顯示出來，作為開場動畫顯示出來。
這裡上一個修改版CSS3拔劍動畫，完全可以用來
<title>忘憂鎮拔劍CSS3動畫</title>
<style>
.demo{
margin: 100px auto;
position: relative;
width: 1000px;
height: 200px;
background: #000;
overflow: hidden;
-webkit-animation: fadeOut 1s 3s ease both;
animation: fadeOut 1s 3s ease both;
}
.left{
z-index: 1;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 179px;
height: 60px;
background: url('./img/left.png') no-repeat center / contain;
}
.right{
position: absolute;
top: 52%;
left: -8px;
transform: translate3d(0, -50%, 0);
width: 370px;
height: 74px;
background: url('./img/right.png') no-repeat center / contain;
-webkit-animation: move 2s 0.5 ease both;
animation: move 2s 0.5s ease both;
}
@-webkit-keyframes move {
0%{
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0);
}
100% {
-webkit-transform: translate3d(100px, -50%, 0);
transform: translate3d(100px, -50%, 0);
}
}
@-webkit-keyframes fadeOut {
0%{
opacity: 1;
}
100% {
opacity: 0;
}
}
</style>
</head>
<body>
<div class="demo">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
複製程式碼感興趣的小夥伴可以去《忘憂鎮》官網體驗一波17年的前端對於動畫和視訊的處理： 裡面有許多動畫模式，都可以借鑑參考。
安利一波，希望騰訊視訊大佬看見了不要律師函警告我。
7.小結
簡單來說，載入動畫兩板斧
①迴圈動畫 ②過程動畫
個人推薦應用場景如下：
- 當做視訊處理，或者類似ajax後臺資料這一類無法精準的獲取資源載入過程。就採用
基礎版的迴圈動畫，這樣是不錯解決方案。 - 當預載入的資源很大，以當前環境的平均網速的情況下載入時長超過3S以上的，建議像《忘憂鎮》一樣採用
過程動畫。 - 當預載入的資源很小，以當前環境的平均網速的情況下載入時長超過3S以上的。建議採用類似吃熱狗那種
迴圈動畫，因為如果採用過程動畫，就會在導致過程動畫執行太快，過程動畫的優勢發揮不出來。所以這個時候迴圈動畫最適合不過，千萬不要不做處理，畢竟幾秒的白屏介面或者直接DOM結構的介面，會給使用者體驗大大折扣。 - 若預載入資源很小，但是又想放上創意不錯的過程動畫。那就建議將
過程動畫修改一下，改為CSS3作為H5頁面首次訪問的開場動畫。例如前面預載入你放上簡單的基礎版迴圈動畫或者一個迴圈動畫GIF版本，之後頁面載入完成之後，就將這個過程動畫插入進來，作為該專案的入場動畫。
個人碎碎叨叨
這次部落格感覺，混亂的狠，更多的偏向理論層。時隔差不多 一年寫部落格，總感覺缺了點什麼。回收站已經躺了幾篇寫了一大半的部落格，算了就這麼著，這篇先湊合算四月份開張第一篇吧。
部落格中兩個DEMO的線上地址：github傳送門
我是車大棒，我為我自己插眼。
