成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

caige / 2126人閱讀

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

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

ios/android

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

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

demo

xml(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;
            }
        }
    }

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116140.html

相關(guān)文章

  • 如何"有計劃，高效率，優(yōu)簡歷"應(yīng)對面試

    摘要：雖然有了十全的計劃，但如何高效率去記住上面那么多東西是一個大問題，看看我是怎么做的。 前言 前一篇文章講述了我在三月份毫無準(zhǔn)備就去面試的后果，一開始心態(tài)真的爆炸，但是又不服氣，一想到每次回來后家人朋友問我面試結(jié)果的期待臉，越覺得必須付出的行動來證明自己了。 面經(jīng)傳送門：一個1年工作經(jīng)驗的PHP程序員是如何被面試官虐的？ 下面是我花費兩個星期做的準(zhǔn)備，主要分三部分： 有計劃——計劃好...

    gyl_coder 評論0 收藏0

  • "雙非"應(yīng)屆生校招如何獲得大廠青睞?（內(nèi)附前端大廠面經(jīng)+技術(shù)崗超全求職攻略）

    摘要：拿到秋招的同學(xué)，如確定入職需與用人單位簽署三方協(xié)議，以保證雙方的利益不受損失。當(dāng)然每個崗位所要求的側(cè)重點不同，但卻百變不離其宗。方法論要想達(dá)成某個目標(biāo)都有其特定的方法論，學(xué)習(xí)技術(shù)也不例外，掌握適當(dāng)?shù)膶W(xué)習(xí)方法才能事半功倍。 寫在前面的話 筆者從17年的2月份開始準(zhǔn)備春招，其中遇到不少坑，也意識到自己走過的彎路。故寫了這篇文章總結(jié)一番，本文適合主動學(xué)習(xí)的，對自己要學(xué)的課程不明確的，對面試有...

    jeffrey_up 評論0 收藏0

  • "雙非"應(yīng)屆生校招如何獲得大廠青睞?（內(nèi)附前端大廠面經(jīng)+技術(shù)崗超全求職攻略）

    摘要：拿到秋招的同學(xué)，如確定入職需與用人單位簽署三方協(xié)議，以保證雙方的利益不受損失。當(dāng)然每個崗位所要求的側(cè)重點不同，但卻百變不離其宗。方法論要想達(dá)成某個目標(biāo)都有其特定的方法論，學(xué)習(xí)技術(shù)也不例外，掌握適當(dāng)?shù)膶W(xué)習(xí)方法才能事半功倍。 寫在前面的話 筆者從17年的2月份開始準(zhǔn)備春招，其中遇到不少坑，也意識到自己走過的彎路。故寫了這篇文章總結(jié)一番，本文適合主動學(xué)習(xí)的，對自己要學(xué)的課程不明確的，對面試有...

    lindroid 評論0 收藏0

  • 《HelloGitHub》第 68 期

    摘要：整個項目簡單還具有實用價值，可作為的實戰(zhàn)項目學(xué)習(xí)的調(diào)試工具欄。查看文檔自動在個人首頁展示編程時長的工具。通過學(xué)習(xí)這些前沿的人工智能論文，提前了解在未來更多可能性可以將圖片和視頻轉(zhuǎn)換成漫畫風(fēng)格的工具。興趣是最好的老師，HelloGitHub 讓你對編程感興趣！簡介HelloGitHub 分享 GitHub 上有趣、入門級的開源項目。https://github.com/521xueweihan...

    番茄西紅柿 評論0 收藏2637

  • "instanceof 的原理是什么"？大聲告訴面試官，我知道！

    摘要：一是如何工作的在上是這樣描述的運算符用于測試構(gòu)造函數(shù)的屬性是否出現(xiàn)在對象原型鏈中的任何位置換句話說，如果，那么必須是一個對象，而必須是一個合法的函數(shù)。下面我們舉一個例子一步步來說明第一步每一個構(gòu)造函數(shù)都有一個屬性。 在 JavaScript 中，我們通常用 typeof 判斷類型，但是在判斷引用類型的值時，常常會遇到一個問題：無論引用的是什么類型的對象，都會返回 object(當(dāng)然還有...

    CompileYouth 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<