源碼: github.com/any86/any-u…

ios/android

web常用的loading圖標有2種, 一種是ios的"菊花", 一種是android的"環". 今天我們用svg實現android的"環"動畫, 下節課實現ios的"菊花".

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

demo

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框架.

轉載于:https://juejin.im/post/5d37fe7de51d455c8838e23d

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的面试官: 用css实现android系统的loading动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。