web常用的loading圖標有2種, 一種是ios的"菊花", 一種是android的"環". 今天我們用svg實現android的"環"動畫, 下節課實現ios的"菊花".
注意 : gif幀數少的原因, 實際動畫效果是很 平滑
的.
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你可以根據實際需要調整), 定義環的圓心坐標為 25,25 , 半徑為20 (算下 周長大概為125 , 后面會用到), 顏色為 currentColor 獲取父元素的color屬性的值, 環的寬度為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的虛線:
試想一下, 如果環也用虛線表示, 并且讓 單位實線 部分的長度在環的周長范圍內變化,這不就實現了(半環/滿環等形態), 下面分別是 stroke-dasharray 的值為 25, 200 / 50, 200 / 100, 200
:
注意 : 這里的 200
是隨意定義的, 表示虛線的間隙, 只要值大于環的周長即可.
stroke-dashoffset
偏移, 值為正數的時候, 虛線逆時針回退, 負數順時針前進(左圖的stroke-dashoffset:0, 環的起點在3點方向, 右圖設置為-10以后, 環的起點被順時針偏移了一段距離):
因為動畫中, 環在增加長度的同時 尾部在收縮長度 , 所以需要配合 stroke-dashoffset
實現.
動畫的3個關鍵時刻
**0%**的時刻
讓圓環只呈現一個點, 為了讓循環一周后動畫不突兀(你可以改成0對比下效果).
**50%**的時刻
為了讓圓環呈現80%的環, 所以設置實線部分長度為100(125*0.8, 125是周長): stroke-dasharray: 100, 200; , 同時尾部在收縮, 所以設置 stroke-dashoffset: -45; .
**100%**的時刻
回到一個點的狀態, 和0%狀態一致, 這樣動畫循環起來不突兀, 但是從50%到100%的動畫只是"尾部收縮", 所以我們用 stroke-dashoffset:-124 實現, 125-124=1 正好是一個像素, 好了動畫到此就實現完畢了.
整體旋轉
為了和安卓系統的動畫一致, 讓整體也進行旋轉. 這里代碼比較簡單不贅述.
animation屬性的擴展
如果大家仔細看過css的 animation 的文檔, 會發現 animation 可以同時支持多個過度動畫, 比如 animation: color 6s ease-in-out infinite, dash 1.5s ease-in-out infinite; , 用","分割多個動畫.
所以我們其實還可以對上面的動畫進行擴展, 比如 旋轉的同時還有顏色變化 :
&-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框架.
總結
以上所述是小編給大家介紹的使用css實現android系統的loading加載動畫,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
新聞熱點
疑難解答
