面試官: "用css實現android系統的loading動畫"

本文源碼: github.com/any86/5a.cs…

ios/android

web經常使用的loading圖標有2種, 一種是ios的"菊花", 一種是android的"環". 今天咱們用svg實現android的"環"動畫, 下節課實現ios的"菊花".

注意: gif幀數少的緣由, 實際動畫效果是很 平滑的.

demo

xml(svg)

<svg width="36" height="36" viewBox="0 0 50 50" class="a-loading-android">
    <circle cx="25" cy="25" r="20" fill="none" stroke="currentColor" stroke-width="5"></circle>
</svg>
複製代碼

首先咱們定義svg的畫布尺寸爲50x50, 在瀏覽器中縮放爲36x36顯示(這個36你能夠根據實際須要調整), 定義環的圓心座標爲25,25, 半徑爲20(算下周長大概爲125, 後面會用到), 顏色爲currentColor獲取父元素的color屬性的值, 環的寬度爲5像素, 看下在沒寫css前的效果:

scss

.a-loading {
    &-android {
        animation: rotate 2s linear infinite;
        transform-origin: center center;
        >circle {
            display: inline-block;
            animation: dash 1500ms ease-in-out infinite;
            stroke-linecap: round; // 端點是圓形
            color: currentColor;
        }

        @keyframes rotate {
            100% {
                transform: rotate(360deg);
            }
        }
        
        @keyframes dash {
            0% {
                stroke-dasharray: 1, 200;
            }

            50% {
                stroke-dasharray: 100, 200;
                stroke-dashoffset: -45;
            }

            100% {
                stroke-dasharray: 100, 200;
                stroke-dashoffset: -124;
            }
        }
    }
}
複製代碼

stroke-dasharray

先解釋stroke-dasharray, 他是用來定義虛線的, 好比stroke-dasharray="50, 20"表示實線部分爲50, 間隙20的虛線:

試想一下, 若是環也用虛線表示, 而且讓 單位實線部分的長度在環的周長範圍內變化,這不就實現了(半環/滿環等形態), 下面分別是 stroke-dasharray的值爲 25, 200/ 50, 200 / 100, 200:

注意: 這裏的 200是隨意定義的, 表示虛線的間隙, 只要值大於環的周長便可.

stroke-dashoffset

偏移, 值爲正數的時候, 虛線逆時針回退, 負數順時針前進(左圖的stroke-dashoffset:0, 環的起點在3點方向, 右圖設置爲-10之後, 環的起點被順時針偏移了一段距離):

由於動畫中, 環在增長長度的同時 尾部在收縮長度, 因此須要配合 stroke-dashoffset實現.

動畫的3個關鍵時刻

**0%**的時刻

讓圓環只呈現一個點, 爲了讓循環一週後動畫不突兀(你能夠改爲0對比下效果).

**50%**的時刻

爲了讓圓環呈現80%的環, 因此設置實線部分長度爲100(125*0.8, 125是周長): stroke-dasharray: 100, 200;, 同時尾部在收縮, 因此設置stroke-dashoffset: -45;.

**100%**的時刻

回到一個點的狀態, 和0%狀態一致, 這樣動畫循環起來不突兀, 可是從50%到100%的動畫只是"尾部收縮", 因此咱們用stroke-dashoffset:-124實現,125-124=1 正好是一個像素, 好了動畫到此就實現完畢了.

總體旋轉

爲了和安卓系統的動畫一致, 讓總體也進行旋轉. 這裏代碼比較簡單不贅述.

animation屬性的擴展

若是你們仔細看過css的animation的文檔, 會發現animation能夠同時支持多個過分動畫, 好比animation: color 6s ease-in-out infinite, dash 1.5s ease-in-out infinite;, 用","分割多個動畫.

因此咱們其實還能夠對上面的動畫進行擴展, 好比旋轉的同時還有顏色變化:

&-android {
        animation: rotate 2s linear infinite;
        transform-origin: center center;
        >circle {
            display: inline-block;
            // 增長顏色變化的代碼
            animation: color 6s ease-in-out infinite, dash 1.5s ease-in-out infinite; 
            stroke-linecap: round;
            color: currentColor;
        }

        @keyframes rotate {
            100% {
                transform: rotate(360deg);
            }
        }

        @keyframes dash {
            0% {
                stroke-dasharray: 1, 200;
            }

            50% {
                stroke-dasharray: 100, 200;
                stroke-dashoffset: -45;
            }

            100% {
                stroke-dasharray: 100, 200;
                stroke-dashoffset: -124;
            }
        }

        @keyframes color {

            0%,
            100% {
                stroke: #6b5c5b;
            }

            40% {
                stroke: #0057e7;
            }

            66% {
                stroke: #008744;
            }

            80%,
            90% {
                stroke: #ffa700;
            }
        }
    }
複製代碼

本文代碼參考iview, 一個vue框架.