image

1.前言

此刻深圳大雨瓢潑，周圍一片黑壓壓的。對于這樣的日子，果斷從冰箱里面拿出肥宅快樂水，打開電腦查看最近更新的番劇，舒服窩在沙發(fā)里真是美滋滋。

但是不知道大雨原因，網(wǎng)絡(luò)加載一直時(shí)好時(shí)壞，看的賊憂傷，所以臨時(shí)暫停，先緩沖一下。而此時(shí)快樂水中的氣泡不斷在底下冒出、爆炸，整個(gè)房間彌漫著快樂的氣息。所以此景就著快樂水，就順便寫一下作為切圖仔我平日是如何快樂的處理加載動(dòng)畫。

image

2.加載動(dòng)畫誕生的背景

在講加載動(dòng)畫之前，讓我們簡單回顧一下加載動(dòng)畫的背景。

因?yàn)闉g覽器解析網(wǎng)頁的順序是從上往下執(zhí)行，所以在這個(gè)頁面加載的過程中，用戶必須得等待頁面加載完成才能正常訪問這個(gè)網(wǎng)頁。

在這個(gè)用戶等待過程中，用戶看到或得到是什么呢？

• 白屏
• 單調(diào)的DOM結(jié)構(gòu)點(diǎn)
• 零散的空白圖片
• 有界面單卻無法響應(yīng)相關(guān)操作
• ......

這樣用戶體驗(yàn)是糟糕的，為了改善用戶體驗(yàn)，這個(gè)時(shí)候前端工程師閃亮登場了。

但是由于網(wǎng)絡(luò)是不穩(wěn)定的，而且每個(gè)人的網(wǎng)絡(luò)速率也是各不相同。同理你的項(xiàng)目網(wǎng)站，靜態(tài)資源的大小也各不相同。不穩(wěn)定的因素有很多種，所以針對資源加載的不同場合，衍生出兩種流派來處理網(wǎng)頁資源加載問題。

一派為懶加載，一派為預(yù)加載。

免責(zé)提示

懶加載和預(yù)加載方法博客，已經(jīng)超級多了。所有本人在此不詳細(xì)敘說了，因?yàn)楸酒┛偷闹攸c(diǎn)是動(dòng)畫形式。思考動(dòng)畫與懶加載和預(yù)加載如何完美的配合，錦上添花達(dá)到一個(gè)更好的用戶體驗(yàn)，以及對于加載動(dòng)畫的應(yīng)用思考。

意思就是寫的得略粗糙，別噴我菜！

3.懶加載中動(dòng)畫處理

懶加載目前主要應(yīng)用的場景，主要以電商一類網(wǎng)站居多。就是當(dāng)用戶首次該訪問網(wǎng)站的時(shí)候，網(wǎng)頁只對當(dāng)前可視區(qū)域的資源進(jìn)行加載，而其他頁面例如圖片等相關(guān)資源則不加載，需要用戶滑動(dòng)到相應(yīng)的可視區(qū)域之后，再加載該區(qū)域的資源。

這里我們訪問兩大電商網(wǎng)站京東、天貓，鼠標(biāo)向下滾動(dòng)觸發(fā)懶加載行為來舉例說明：

京東商城懶加載等待效果：

image

天貓商城懶加載等待效果：

image

PS：這里兩大商城直接用的粗暴用的的GIF圖片，雖然GIF圖片資源占用的比CSS3動(dòng)畫要大，但是兼容性卻比CSS3好，不同情況取舍是不同的。

同時(shí)天貓的一個(gè)小細(xì)節(jié)貌似更加貼心。天貓中間的banner區(qū)域，放了一個(gè)天貓模特?fù)Q裝的GIF圖片。專門用來緩沖banner區(qū)域的圖片預(yù)加載時(shí)空白感，而京東的banner部分卻沒有這個(gè)小細(xì)節(jié)。

京東的banner界面

image

天貓的banner界面

image

一句話就是，電商大公司懶加載基本上GIF圖片。

4.預(yù)加載之后動(dòng)畫

前面懶加載加載一部分，然后根據(jù)需求用戶的行為再相應(yīng)加載。畢竟這個(gè)商品圖片多，圖片資源數(shù)量屬于無限大，所以全部加載一次性加載是不可能的。

前面電商網(wǎng)站之所以采取懶加載，是因?yàn)橐粋€(gè)電商網(wǎng)站頁面展示的商品太多了。拿天貓首頁來說，天貓一個(gè)首頁至少7-8屏頁面長度那么長，每一屏的上面圖片數(shù)量都不少。如果說一次性全部加載，那還沒有等頁面加載完，用戶就直接關(guān)掉網(wǎng)站去別的網(wǎng)站了。

但是一些類似H5宣傳網(wǎng)站，H5小游戲，如果采用懶加載就會(huì)有問題了。比如用戶控制一個(gè)小人運(yùn)動(dòng)，但是走一會(huì)就因?yàn)橘Y源加載問題卡住，走一會(huì)就加載卡住，那估計(jì)很多用戶會(huì)直接煩躁的直接關(guān)掉網(wǎng)站，那這樣估計(jì)產(chǎn)品老哥馬上提刀來找你了。

因此對于用戶行為交互作為重心，而靜態(tài)資源又不像電商網(wǎng)站一樣成千上萬數(shù)量的H5，會(huì)優(yōu)先把一些靜態(tài)資源通提前加載完畢，保證后續(xù)用戶行為體驗(yàn)的流暢性。這種方案又被稱為預(yù)加載。

然后配合預(yù)加載的動(dòng)畫，常見的組合方案就是百分比+進(jìn)度條，根據(jù)資源onload加載情況，來告知用戶資源加載情況，已經(jīng)何時(shí)能夠正常體驗(yàn)這個(gè)H5。

image

（PS：其實(shí)H5完全就只是HTML第5版本的一個(gè)標(biāo)準(zhǔn)而已，但是因?yàn)橐恍I銷原因?qū)е拢琀5給很多非技術(shù)人員第一印象，就是指在移動(dòng)端通過動(dòng)畫、視頻、游戲等相關(guān)進(jìn)行品牌傳播，推廣，商品展示的一類新奇的網(wǎng)站了。emmmmmmm）

5.一板斧--循環(huán)動(dòng)畫

在前面無論是懶加載還是預(yù)加載，都會(huì)涉及到一些動(dòng)畫作為視覺鋪墊。都屬于加載動(dòng)畫兩板斧類型，那么接下來首先講的就是一板斧--循環(huán)動(dòng)畫

畢竟要是還不講解加載動(dòng)畫，估計(jì)各位看官都要拿斧頭到我出租屋了。

image

許多物體的變化，都可以分解為連續(xù)重復(fù)而有規(guī)律的變化。因此在動(dòng)畫制作中，可以盡制作幾幅畫面，然后像走馬燈一樣重復(fù)循環(huán)使用，長時(shí)間播放，這就是循環(huán)動(dòng)畫。

image

同理包括京東閃光動(dòng)畫，天貓的換裝動(dòng)畫也是屬于循環(huán)動(dòng)畫的一種。

image

image

雖說這兩個(gè)直接是粗暴上了GIF圖，但是這也是歸屬循環(huán)動(dòng)畫的一種，前端用css3也是可以實(shí)現(xiàn)的。

說了這么多，沒有代碼。感覺怪怪的，先上一個(gè)吃熱狗的循環(huán)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>

效果圖如下：

image

比如借鑒這種風(fēng)格，就可以做出一種別樣的循環(huán)動(dòng)畫，兩張圖片的大小加起來不超過10KB。

案例demo已經(jīng)上傳github，有興趣的朋友可以通過文末github地址查看

6.二板斧--過程動(dòng)畫

過程動(dòng)畫，是隨口叫的。畢竟動(dòng)畫出來的可比前端早，所以我就隨便取的名字。錯(cuò)了，可以留言指點(diǎn)一下。

什么叫過程，就是類似像進(jìn)度條一樣，只有進(jìn)度條加載完了之后，我們就知道這個(gè)加載過程完成了。
過程動(dòng)畫也是如此，過程動(dòng)畫只執(zhí)行一次，通過動(dòng)畫巧妙的反饋整個(gè)資源的加載，這種就適合資源比較多的項(xiàng)目。

這里像進(jìn)度條一類的demo，已經(jīng)很多了。我就不一一講解，這里拿17年騰訊視頻《忘憂鎮(zhèn)》舉例子說明吧：

這個(gè)忘憂鎮(zhèn)視頻當(dāng)時(shí)號稱全網(wǎng)第一個(gè)，交互式劇場。就是整個(gè)視頻播放，整個(gè)電視劇情走向會(huì)隨著你的交互，而產(chǎn)生不同的結(jié)局。當(dāng)時(shí)第一個(gè)解鎖的劇情就是趙麗穎的陪伴

image

當(dāng)時(shí)17年10月下旬出來的，這個(gè)H5好像就點(diǎn)擊破千萬級別，把以前游戲場景中的情況部分搬到H5，的確產(chǎn)生了不少口碑。要知道，后面的交互式的美劇，《黑鏡：潘達(dá)斯奈基》也才是18年末出來的。

emmm，不扯遠(yuǎn)了。讓我們先看看，《忘憂鎮(zhèn)》這個(gè)H5的加載動(dòng)畫是如何顯示的？

image

當(dāng)時(shí)我看到這個(gè)過程動(dòng)畫，但是一下就驚住了。這個(gè)加載動(dòng)畫的實(shí)現(xiàn)難度并不高，獲取加載的進(jìn)度信息，然后用canvas繪制到上面去。真可謂簡約不簡單，優(yōu)點(diǎn)真是創(chuàng)意無極限很棒。

這里估計(jì)有人要問了，如果說我的預(yù)加載資源很少。大概1s就刷的加載完成，那么這樣加載太快就會(huì)導(dǎo)致過程動(dòng)畫執(zhí)行太快，結(jié)果用戶體驗(yàn)感反倒不好, 但是我又想擁有類似這樣的拔劍過程動(dòng)畫，來增強(qiáng)我項(xiàng)目中的特效。

的確，過程動(dòng)畫針對預(yù)加載資源比較大的時(shí)候，才能發(fā)揮它的足夠優(yōu)勢。如果說預(yù)加載速度很快，我一般建議采用的做法是：

循環(huán)動(dòng)畫 + 過程動(dòng)畫

在預(yù)加載的時(shí)候，先將過程動(dòng)畫隱藏起來，然后調(diào)用循環(huán)動(dòng)畫。因?yàn)?code>循環(huán)動(dòng)畫，一秒內(nèi)至少循環(huán)好幾遍。所以短時(shí)間的動(dòng)畫，循環(huán)動(dòng)畫體驗(yàn)效果最佳。然后等待資源加載完成之后，隱藏循環(huán)動(dòng)畫,再將過程動(dòng)畫顯示出來，作為開場動(dòng)畫顯示出來。

這里上一個(gè)修改版CSS3拔劍動(dòng)畫，完全可以用來

  <title>忘憂鎮(zhèn)拔劍CSS3動(dòng)畫</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>

感興趣的小伙伴可以去《忘憂鎮(zhèn)》官網(wǎng)體驗(yàn)一波17年的前端對于動(dòng)畫和視頻的處理：
里面有許多動(dòng)畫模式，都可以借鑒參考。

移動(dòng)端傳送門

PC端傳送門

安利一波，希望騰訊視頻大佬看見了不要律師函警告我。

7.小結(jié)

簡單來說，加載動(dòng)畫兩板斧

①循環(huán)動(dòng)畫 ②過程動(dòng)畫

個(gè)人推薦應(yīng)用場景如下：

• 當(dāng)做視頻處理，或者類似ajax后臺數(shù)據(jù)這一類無法精準(zhǔn)的獲取資源加載過程。就采用基礎(chǔ)版的循環(huán)動(dòng)畫，這樣是不錯(cuò)解決方案。
• 當(dāng)預(yù)加載的資源很大，以當(dāng)前環(huán)境的平均網(wǎng)速的情況下加載時(shí)長超過3S以上的，建議像《忘憂鎮(zhèn)》一樣采用過程動(dòng)畫。
• 當(dāng)預(yù)加載的資源很小，以當(dāng)前環(huán)境的平均網(wǎng)速的情況下加載時(shí)長超過3S以上的。建議采用類似吃熱狗那種循環(huán)動(dòng)畫，因?yàn)槿绻捎?code>過程動(dòng)畫，就會(huì)在導(dǎo)致過程動(dòng)畫執(zhí)行太快，過程動(dòng)畫的優(yōu)勢發(fā)揮不出來。所以這個(gè)時(shí)候循環(huán)動(dòng)畫最適合不過，千萬不要不做處理，畢竟幾秒的白屏界面或者直接DOM結(jié)構(gòu)的界面，會(huì)給用戶體驗(yàn)大大折扣。
• 若預(yù)加載資源很小，但是又想放上創(chuàng)意不錯(cuò)的過程動(dòng)畫。那就建議將過程動(dòng)畫修改一下，改為CSS3作為H5頁面首次訪問的開場動(dòng)畫。例如前面預(yù)加載你放上簡單的基礎(chǔ)版循環(huán)動(dòng)畫或者一個(gè)循環(huán)動(dòng)畫GIF版本，之后頁面加載完成之后，就將這個(gè)過程動(dòng)畫插入進(jìn)來，作為該項(xiàng)目的入場動(dòng)畫。

個(gè)人碎碎叨叨

這次博客感覺，混亂的狠，更多的偏向理論層。時(shí)隔差不多
一年寫博客，總感覺缺了點(diǎn)什么?；厥照疽呀?jīng)躺了幾篇寫了一大半的博客，算了就這么著，這篇先湊合算四月份開張第一篇吧。

博客中兩個(gè)DEMO的線上地址：github傳送門

我是車大棒，我為我自己插眼。

image