使用css實現(xiàn)android系統(tǒng)的loading加載動畫

發(fā)布時間：2019-07-25 14:53:38 作者：佚名

我要評論

這篇文章主要介紹了使用css實現(xiàn)android系統(tǒng)的loading加載動畫,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下

web常用的loading圖標有2種, 一種是ios的"菊花", 一種是android的"環(huán)". 今天我們用svg實現(xiàn)android的"環(huán)"動畫, 下節(jié)課實現(xiàn)ios的"菊花".

注意 : gif幀數(shù)少的原因, 實際動畫效果是很平滑

的.

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你可以根據(jù)實際需要調(diào)整), 定義環(huán)的圓心坐標為 25,25 , 半徑為20 (算下 周長大概為125 , 后面會用到), 顏色為 currentColor 獲取父元素的color屬性的值, 環(huán)的寬度為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的虛線:

試想一下, 如果環(huán)也用虛線表示, 并且讓 單位實線 部分的長度在環(huán)的周長范圍內(nèi)變化,這不就實現(xiàn)了(半環(huán)/滿環(huán)等形態(tài)), 下面分別是 stroke-dasharray 的值為 25, 200 / 50, 200 / 100, 200

:

注意 : 這里的 200

是隨意定義的, 表示虛線的間隙, 只要值大于環(huán)的周長即可.

stroke-dashoffset

偏移, 值為正數(shù)的時候, 虛線逆時針回退, 負數(shù)順時針前進(左圖的stroke-dashoffset:0, 環(huán)的起點在3點方向, 右圖設(shè)置為-10以后, 環(huán)的起點被順時針偏移了一段距離):

因為動畫中, 環(huán)在增加長度的同時 尾部在收縮長度 , 所以需要配合 stroke-dashoffset

實現(xiàn).

動畫的3個關(guān)鍵時刻

**0%**的時刻

讓圓環(huán)只呈現(xiàn)一個點, 為了讓循環(huán)一周后動畫不突兀(你可以改成0對比下效果).

**50%**的時刻

為了讓圓環(huán)呈現(xiàn)80%的環(huán), 所以設(shè)置實線部分長度為100(125*0.8, 125是周長): stroke-dasharray: 100, 200; , 同時尾部在收縮, 所以設(shè)置 stroke-dashoffset: -45; .

**100%**的時刻

回到一個點的狀態(tài), 和0%狀態(tài)一致, 這樣動畫循環(huán)起來不突兀, 但是從50%到100%的動畫只是"尾部收縮", 所以我們用 stroke-dashoffset:-124 實現(xiàn), 125-124=1 正好是一個像素, 好了動畫到此就實現(xiàn)完畢了.

整體旋轉(zhuǎn)

為了和安卓系統(tǒng)的動畫一致, 讓整體也進行旋轉(zhuǎn). 這里代碼比較簡單不贅述.

animation屬性的擴展

如果大家仔細看過css的 animation 的文檔, 會發(fā)現(xiàn) animation 可以同時支持多個過度動畫, 比如 animation: color 6s ease-in-out infinite, dash 1.5s ease-in-out infinite; , 用","分割多個動畫.

所以我們其實還可以對上面的動畫進行擴展, 比如 旋轉(zhuǎn)的同時還有顏色變化 :

&-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框架.

總結(jié)

以上所述是小編給大家介紹的使用css實現(xiàn)android系統(tǒng)的loading加載動畫,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！