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

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

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

注意 : 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)的圓心坐標(biāo)為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ù)的時候, 虛線逆時針回退, 負(fù)數(shù)順時針前進(jìn)(左圖的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)的動畫一致, 讓整體也進(jìn)行旋轉(zhuǎn). 這里代碼比較簡單不贅述.

animation屬性的擴(kuò)展

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

所以我們其實還可以對上面的動畫進(jìn)行擴(kuò)展, 比如旋轉(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;
            }
        }
    }

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

本文標(biāo)題：使用css實現(xiàn)android系統(tǒng)的loading加載動畫-創(chuàng)新互聯(lián)
轉(zhuǎn)載來于：http://www.rwnh.cn/article20/dgsojo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計公司、虛擬主機(jī)、品牌網(wǎng)站設(shè)計、定制網(wǎng)站、外貿(mào)建站、云服務(wù)器

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)