面試官: "用css實(shí)現(xiàn)android系統(tǒng)的loading動(dòng)畫"

caige 發(fā)布于2019-08-30 15:44 / 2259人閱讀

摘要：源碼常用的圖標(biāo)有種一種是的菊花一種是的環(huán)今天我們用實(shí)現(xiàn)的環(huán)動(dòng)畫下節(jié)課實(shí)現(xiàn)的菊花注意幀數(shù)少的原因?qū)嶋H動(dòng)畫效果是很平滑的首先我們定義的畫布尺寸為在瀏覽器中縮放為顯示這個(gè)你可以根據(jù)實(shí)際需要調(diào)整定義環(huán)的圓心坐標(biāo)為半徑為算下周長(zhǎng)大概為后面會(huì)用

源碼: https://github.com/any86/any-...

ios/android

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

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

demo

xml(svg)

首先我們定義svg的畫布尺寸為50x50, 在瀏覽器中縮放為36x36顯示(這個(gè)36你可以根據(jù)實(shí)際需要調(diào)整), 定義環(huán)的圓心坐標(biāo)為25,25, 半徑為20(算下周長(zhǎng)大概為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í)線部分的長(zhǎng)度在環(huán)的周長(zhǎng)范圍內(nèi)變化,這不就實(shí)現(xiàn)了(半環(huán)/滿環(huán)等形態(tài)), 下面分別是stroke-dasharray的值為25, 200/ 50, 200 / 100, 200:

注意: 這里的200是隨意定義的, 表示虛線的間隙, 只要值大于環(huán)的周長(zhǎng)即可.

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)在增加長(zhǎng)度的同時(shí)尾部在收縮長(zhǎng)度, 所以需要配合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í)線部分長(zhǎng)度為100(125*0.8, 125是周長(zhǎng)): 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). 這里代碼比較簡(jiǎ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;
            }
        }
    }

本文代碼參考iview, 一個(gè)vue框架.

GPU云服務(wù)器云服務(wù)器 Quote quoted quot python b&quot&quot

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/116140.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

caige

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

二、Rdeis Jedis

閱讀 3162·2021-11-22 09:34
《C語(yǔ)言入門》掃雷小游戲C語(yǔ)言實(shí)現(xiàn)

閱讀 659·2021-11-22 09:34
Hostodo十月促銷：$45/年KVM-3GB/30G NVMe/5TB/三個(gè)機(jī)房

閱讀 2518·2021-10-08 10:18
糖果主機(jī)如何備案-域名沒主機(jī)怎么備案？

閱讀 3447·2021-09-22 15:57
云虛擬主機(jī)如何管理-虛擬主機(jī)怎么登陸圖解？

閱讀 2700·2021-09-22 15:25
圖標(biāo)文字對(duì)齊的幾種常見方法

閱讀 2507·2019-08-30 15:54
面試官: "用css實(shí)現(xiàn)android系統(tǒng)的loading動(dòng)畫"

閱讀 2260·2019-08-30 15:44
js獲取字符串的字節(jié)數(shù)(適合用于多行文字省略號(hào))

閱讀 1856·2019-08-29 11:18

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！