摘要:在研究的過(guò)程中,發(fā)現(xiàn)有大神用在上實(shí)現(xiàn)了它。由制定,是一個(gè)開(kāi)放標(biāo)準(zhǔn)。省略這時(shí),你就能看到線(xiàn)段周而復(fù)始地從一根細(xì)線(xiàn)變?yōu)橐粋€(gè)圓圈。這次感覺(jué)是不是很相像了,只是現(xiàn)在它的開(kāi)口一直處于一個(gè)位置,就沒(méi)什么魔性了。
相信這個(gè) loading 的標(biāo)志大家都很熟悉,是不是很和諧?
額...有毒,看得停不下來(lái)。既然,那么神奇,我就好奇地研(goo)究(gle)了一下。
原來(lái)它是 Material Design Progress(谷歌網(wǎng)站,你懂得)的一種 —— Circular。
在研究的過(guò)程中,發(fā)現(xiàn)有大神用 CSS + SVG 在 codePen 上實(shí)現(xiàn)了它。接著,就一步步來(lái)看這個(gè)魔性的 loading 是如何實(shí)現(xiàn)的。
既然,它是一個(gè)頁(yè)面元素,那么,就先看看它的 dom 結(jié)構(gòu)。
可以看到,結(jié)構(gòu)很簡(jiǎn)單,是一個(gè) div 標(biāo)簽包裹一個(gè) svg 標(biāo)簽(circle 是 svg 中的一個(gè)預(yù)定義形狀,后面再講)。div 大家都很熟悉,那么,svg 是什么哪?
可縮放矢量圖形(英語(yǔ):Scalable Vector Graphics,SVG)是一種基于可擴(kuò)展標(biāo)記語(yǔ)言(XML),用于描述二維矢量圖形的圖形格式。SVG由W3C制定,是一個(gè)開(kāi)放標(biāo)準(zhǔn)。 ——wikipedia
同其他圖像格式相比,svg 的主要優(yōu)勢(shì)在于:它是可伸縮的,即縮小、放大都不會(huì)影響顯示的質(zhì)量。
知道了,svg 標(biāo)簽是什么,那其中的 viewBox 屬性又是用來(lái)干什么的?
viewBoxThe viewBox attribute allows you to specify that a given set of graphics stretch to fit a particular container element. ——MDN
我的理解就是,選中 svg 中的一部分作為內(nèi)容的顯示區(qū)域來(lái)進(jìn)行放大或縮小來(lái)適應(yīng)整個(gè) svg 的大小。(如果還是不太明白的,可以查看張?chǎng)涡翊笊竦奈恼拢蜗笊鷦?dòng))
viewBox 的值是 4 個(gè)數(shù)字并用逗號(hào)分割,分別對(duì)應(yīng)原 svg 圖的 x 坐標(biāo),y 坐標(biāo),寬度,高度。通過(guò)這 4 個(gè)值就能在原 svg 圖中劃出一個(gè)矩形,然后將它縮放至現(xiàn)有 svg 的大小。
circle明白了 svg 是用于描述圖形,那該如何將圖形畫(huà)于其中哪?
svg 提供了一些預(yù)定義形狀,除了之前用到的 circle,還有:
矩形
橢圓
線(xiàn)
折線(xiàn)
多邊形
路徑
這里只用到了 circle,對(duì)其他有興趣的可以直接點(diǎn)鏈接了解。
circle 的屬性很簡(jiǎn)單,cx, cy 和 r,對(duì)應(yīng)圓心的 x 坐標(biāo),y 坐標(biāo)和半徑。
那例子中的就是畫(huà)一個(gè)以 (25, 25)為圓心,半徑為 20 的圓。
fill 屬性用來(lái)填充,這里 fill="none" 就是沒(méi)有填充色。
ok。這樣圓就完成了,但如果你也在一邊嘗試的話(huà)會(huì)發(fā)現(xiàn),界面上依舊是一片空白。
別著急,剛剛只是前戲,正戲現(xiàn)在才開(kāi)始。
stroke從最初的圖中可以看到,并不是要畫(huà)一個(gè)圓,而是畫(huà)一段線(xiàn),這段線(xiàn)圍繞一個(gè)圓來(lái)運(yùn)動(dòng)。
畫(huà)好了圓,給它加上外邊線(xiàn)不就有了一個(gè)圍繞圓的線(xiàn)了么,這就要用到 stroke。
The stroke attribute defines the color of the outline on a given graphical element. The default value for the stroke attribute is none. ——MDN
也就是給圖形的外線(xiàn)框添加顏色。
這時(shí),你就能看到一個(gè)藍(lán)色的細(xì)環(huán)了。但是,太細(xì)了,可以通過(guò) stroke-width 調(diào)整。
the stroke-width attribute specifies the width of the outline on the current object. Its default value is 1. If a
is used, the value represents a percentage of the current viewport. If a value of 0 is used the outline will never be drawn. ——MDN
剛才,覺(jué)得太細(xì)就是因?yàn)?stroke-width 的默認(rèn)值是 1。這里將 stroke-width 設(shè)定成 5%,使用百分比的好處是:當(dāng)它做成組件后,只需控制 svg viewport 的大小,線(xiàn)寬會(huì)自動(dòng)調(diào)整粗細(xì)。
于是,代碼又變成了這樣
loading 中的線(xiàn)段并不是一直保持環(huán)裝,而是長(zhǎng)短會(huì)變化,這該如何控制哪?
答案是:stroke-dasharray。
the stroke-dasharray attribute controls the pattern of dashes and gaps used to stroke paths. ——MDN
也就是說(shuō),它是用來(lái)一組值來(lái)表示設(shè)置環(huán)繞在形狀外部的虛線(xiàn)間隔。當(dāng)這組值是偶數(shù)時(shí),那么,它就分別表示線(xiàn)段長(zhǎng),間距長(zhǎng)...,并以此類(lèi)推。當(dāng)它為奇數(shù)時(shí),系統(tǒng)會(huì)默認(rèn)追加相同的設(shè)置到末尾,使它成為偶數(shù),然后再按偶數(shù)時(shí)的處理方式,如 5,3,2 就是 5,3,2,5,3,2。
你會(huì)想,虛線(xiàn)和 loading 有啥關(guān)系,loading 是一條線(xiàn)啊?沒(méi)錯(cuò),一開(kāi)始我也是這樣想的。
但,大神就想到了,如果將虛線(xiàn)的第一部分設(shè)定的足夠長(zhǎng),那么它在可視范圍內(nèi)就是一條實(shí)線(xiàn)。于是,通過(guò)控制第一段實(shí)線(xiàn)的長(zhǎng)度,也就控制了整條線(xiàn)段的長(zhǎng)度。
因?yàn)?,線(xiàn)段變長(zhǎng)變短是一個(gè)過(guò)程,這就要用到動(dòng)畫(huà)。
.loader{ // 省略... circle{ animation: circle-dash 2s ease-in-out infinite; } } @keyframes circle-dash{ 0% { stroke-dasharray: 1, 125; } 100% { stroke-dasharray: 125, 125; } }
這時(shí),你就能看到線(xiàn)段周而復(fù)始地從一根細(xì)線(xiàn)變?yōu)橐粋€(gè)圓圈。但這有突然閃屏的感覺(jué),和所要的結(jié)果不同,再修改一下動(dòng)畫(huà),讓線(xiàn)段成為圓圈后再退回成一根細(xì)線(xiàn)。
@keyframes circle-dash{ 0% { stroke-dasharray: 1, 125; } 50% { stroke-dasharray: 125, 125; } 100% { stroke-dasharray: 1, 125; } }
是不是和結(jié)果越來(lái)越像了,但還是不對(duì),loading 中的線(xiàn)段沒(méi)有給人有倒退的感覺(jué),那該如何做?
那就要使用 stroke-dashoffset,通過(guò)設(shè)定該屬性線(xiàn)段的開(kāi)始位置,來(lái)作出線(xiàn)段在不斷前行的假象。
the stroke-dashoffset attribute specifies the distance into the dash pattern to start the dash. ——MDN
再修改一下,剛剛的動(dòng)畫(huà)。
@keyframes circle-dash{ 0% { stroke-dasharray: 1, 125; stroke-dashoffset: 0; } 50% { stroke-dasharray: 100, 125; stroke-dashoffset: -25px; } 100% { stroke-dasharray: 100, 125; stroke-dashoffset: -125px; } }
這次感覺(jué)是不是很相像了,只是現(xiàn)在它的開(kāi)口一直處于一個(gè)位置,就沒(méi)什么魔性了??梢酝ㄟ^(guò)讓整個(gè)圓形旋轉(zhuǎn)起來(lái),這樣圓的開(kāi)口的位置也就會(huì)不斷變化了。
.circular{ animation: rotate 2s linear infinite; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
Finish!來(lái)看看最后的結(jié)果。(額,不支持 CodePen,可以到我的博客或直接到 CodePen 上查看)
stroke 還有幾個(gè)其他相關(guān)的屬性,比如,stroke-linecap 可以用來(lái)改變線(xiàn)頭的形狀,其他還有 stroke-linejoin, stroke-miterlimit, stroke-opacity。
最后模擬 Material Design 的 loading 就這樣完成了,并應(yīng)用到了我的博客中,比如,首頁(yè)的文章列表的懶加載。
最近,因工作需要搭了一個(gè) React 全家桶 + Ant.Design 的腳手架,有興趣的可以看看。
最后不得不吐槽一句,React + Redux 相對(duì)于 vue 2 + vuex 用起來(lái)真心累...
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/111535.html
摘要:自定義簡(jiǎn)單的如果你想自定義啟動(dòng)界面或頂部導(dǎo)航欄的,你需要在主題的根目錄下創(chuàng)建一個(gè)文件夾,將自定義的和圖片放在里面。你可以通過(guò)變量來(lái)定制頂部導(dǎo)航欄的高度。如果圖片的高度比頂部導(dǎo)航欄的高度小,那么會(huì)垂直居中顯示。 本文譯自 openstack-horizon 官方文檔 主題 從 Kilo 版本開(kāi)始,Horizon 支持通過(guò)主題來(lái)定制樣式。主題內(nèi)包含一個(gè) _variables.scss 文件...
摘要:總體來(lái)看,整個(gè)設(shè)計(jì)系統(tǒng)由和一些相關(guān)的組成。主流風(fēng)格目前業(yè)界廣泛使用的包括等等。是對(duì)某一類(lèi)問(wèn)題解決方案的抽象。這些共同構(gòu)成了表單數(shù)據(jù)提交場(chǎng)景下的。是一系列的基礎(chǔ)原件。的基本組成便是。值的可配置化是設(shè)計(jì)系統(tǒng)客制化的重要組成部分。 簡(jiǎn)介 設(shè)計(jì)系統(tǒng)的產(chǎn)生是為了某領(lǐng)域內(nèi)產(chǎn)品在不同平臺(tái)和設(shè)備上都保持設(shè)計(jì)和交互風(fēng)格的統(tǒng)一。既然是一個(gè)系統(tǒng) ,那必須具有相應(yīng)的完整性。它為產(chǎn)品設(shè)計(jì),產(chǎn)品內(nèi)容等方面提供相應(yīng)...
摘要:更多參考通過(guò)庫(kù)掌握函數(shù)組件有些時(shí)候,我們想要?jiǎng)討B(tài)的加載一些組件按需加載,比如在一個(gè)單頁(yè)面應(yīng)用中頁(yè)面的組件頁(yè)面的組件頁(yè)面的組件只有真正要實(shí)例化當(dāng)前頁(yè)面的時(shí)候,才會(huì)去加載相應(yīng)的組件。 react 前端項(xiàng)目技術(shù)選型、開(kāi)發(fā)工具、周邊生態(tài) 聲明:這不是一篇介紹 React 基礎(chǔ)知識(shí)的文章,需要熟悉 React 相關(guān)知識(shí) 主架構(gòu):react, react-router, redux, redux...
摘要:更多參考通過(guò)庫(kù)掌握函數(shù)組件有些時(shí)候,我們想要?jiǎng)討B(tài)的加載一些組件按需加載,比如在一個(gè)單頁(yè)面應(yīng)用中頁(yè)面的組件頁(yè)面的組件頁(yè)面的組件只有真正要實(shí)例化當(dāng)前頁(yè)面的時(shí)候,才會(huì)去加載相應(yīng)的組件。 react 前端項(xiàng)目技術(shù)選型、開(kāi)發(fā)工具、周邊生態(tài) 聲明:這不是一篇介紹 React 基礎(chǔ)知識(shí)的文章,需要熟悉 React 相關(guān)知識(shí) 主架構(gòu):react, react-router, redux, redux...
閱讀 1658·2019-08-30 15:55
閱讀 981·2019-08-30 15:44
閱讀 873·2019-08-30 10:48
閱讀 2045·2019-08-29 13:42
閱讀 3190·2019-08-29 11:16
閱讀 1268·2019-08-29 11:09
閱讀 2060·2019-08-26 11:46
閱讀 620·2019-08-26 11:44