小編給大家分享一下使用css實(shí)現(xiàn)android系統(tǒng)的loading加載動(dòng)畫，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

10年積累的網(wǎng)站設(shè)計(jì)、成都網(wǎng)站設(shè)計(jì)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先建設(shè)網(wǎng)站后付款的網(wǎng)站建設(shè)流程，更有沁源免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

web常用的loading圖標(biāo)有2種, 一種是ios的"菊花", 一種是android的"環(huán)".

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

的.

xml(svg)

首先我們定義svg的畫布尺寸為50x50 , 在瀏覽器中縮放為36x36 顯示(這個(gè)36你可以根據(jù)實(shí)際需要調(diào)整), 定義環(huán)的圓心坐標(biāo)為25,25 ,半徑為20 (算下周長大概為125 , 后面會(huì)用到), 顏色為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; // 端點(diǎn)是圓形
            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" 表示實(shí)線部分為50, 間隙20的虛線:

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

:

注意 : 這里的200

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

stroke-dashoffset

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

因?yàn)閯?dòng)畫中, 環(huán)在增加長度的同時(shí)尾部在收縮長度 , 所以需要配合stroke-dashoffset

實(shí)現(xiàn).

動(dòng)畫的3個(gè)關(guān)鍵時(shí)刻

**0%**的時(shí)刻

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

**50%**的時(shí)刻

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

**100%**的時(shí)刻

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

整體旋轉(zhuǎn)

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

animation屬性的擴(kuò)展

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

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

&-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;
            }
        }
    }

以上是“使用css實(shí)現(xiàn)android系統(tǒng)的loading加載動(dòng)畫”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站標(biāo)題：使用css實(shí)現(xiàn)android系統(tǒng)的loading加載動(dòng)畫-創(chuàng)新互聯(lián)
URL網(wǎng)址：http://weahome.cn/article/dgsojo.html