炫酷的圓環載入及數字滾動效果（下）

使用圓環載入效果可以用可以採用css3+js的方式。這種方式首先我們得有一個圓的圖片。。核心是採用顯示隱藏的方式，並且依靠層級的方式來控制圓的載入過程。 今天來看看svg實現圓環過渡的過程和原理。

svg

SVG 是一種基於 XML 語法的影象格式，全稱是可縮放向量圖（Scalable Vector Graphics）。本質上是文字檔案，體積較小，且不管放大多少倍都不會失真。

特性

SVG 檔案可以直接插入網頁，成為 DOM 的一部分，然後用 JavaScript 和 CSS 進行操作。

語法

SVG 程式碼都放在頂層標籤 <svg>之中。

// 例項1
<svg width="100%" height="100%">
  <circle id="mycircle" cx="50" cy="50" r="50" />
</svg>
複製程式碼

當然svg有很多基礎知識,你可以點選這裡進行學習檢視。 我們今天會用到的是defs和circle標籤 來看下這兩個標籤的基本使用。
就看例項1會建立一個圓 cx cy定義了圓心的位置,不填預設為(0,0),r定義了圓的半徑。

這裡我們可以通過給svg新增類名,來改變圓的樣式,當然做出一個圓環的效果我們還需要多幾個屬性。stroke,stroke-dasharray,stroke-dashoffset,fill,stroke-width屬性。

stroke屬性 : 定義了給定圖形元素的外輪廓的顏色。它的預設值是none。

stroke-width屬性 : 指定了當前物件的輪廓的寬度。它的預設值是1

• stroke-dasharray屬性 : 就是虛線的長度要預設為none,該值由兩個值合寫，使用英文逗號(,)分隔，第一個值是畫出的每段實線線段的長度，第二個值是各段之間空隙的長度。如果無分隔，則說明兩個值都是一樣大小的。

stroke-dashoffset屬性 : 表示虛線的起始偏移 loading圓環效果的重點之後會例項演示

• fill 屬性 : 圖形元素的填充色,實現圓環效果時候需要設定為none

例項

介紹了上面的屬性後我們來看看他們能實現怎麼樣的效果，首先來看怎麼做成一個圓環的效果

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="50" cy="50"  r="40" fill=none stroke=red stroke-dasharray="10" stroke-width=5  />
</svg> 
複製程式碼

我們已經做出一個圓環了,並且知道了基本的使用方法,接下來我們只需要搞清楚stroke-dashoffset屬性就可以完成圓環的過渡效果了。那就來了解下stroke-dashoffset屬性。
看了張鑫旭大佬的文章簡單明瞭的案例解釋的非常好。我也借用案例來說明stroke-dasharray和stroke-dashoffset的關係。

stroke-dasharray接收兩個引數用,隔開一個表示長度(dash),一個表示間距(gap)如: '10,5' 多個值: '10,5 20,10'每兩個為一組中間用空格隔開,設定了stroke-dasharray直線不僅樣式變成虛線,根據設定好的虛線長度和間距不斷迴圈下去

我們可以通過動態改變dash和gap來更加直觀的瞭解stroke-dasharray屬性

在瞭解了stroke-dasharray屬性的機制最後登場的就是主角就是stroke-dashoffset通過動態改變它的值可以實現很多動畫效果。 stroke-dashoffset屬性指定了dash到路徑開始的距離 但是這裡需要注意的是stroke-dashoffset偏移距離是相對於stroke-dasharray中 dash+gap的距離,因為直線的長度相當於dash+gap無限迴圈下去,可以將直線距離想象成擷取了200px的長度,如果增加stroke-dashoffset的大小,相當於將直線向左移動。

如果將上圖中的虛線長度和間隔都設定為200的時候

將stroke-dashoffset設定為200時,相當於將直線左移200這樣可視區域中就沒有展示出線條長度。當我們動態減小stroke-dashoffset的值到0,就會有一條直線出現。

針對上面的理論我們進行實踐一波,在未設定stroke-dashoffset 直線會全部顯示在可視區域中,當stroke-dashoffset改為200以後相當於全部移動到左邊,通過動態減少值到0直線也會動態生成出來。

動態圓環loading

有了直線案例的實踐,我們知道了其實我們看到的可視區域直線就是stroke-dasharray屬性中dash,而通過gap來設定間距,然後通過stroke-dashoffset來調整控制顯示虛線(dash)和間距(gap)的距離。一般採用的是,將dash和gap還有stroke-dashoffset的值設定成相同,然後通過動態減小stroke-dashoffset將dash部分挪到可視區域實現動畫效果。 有了理論知識,接下來我們來實踐下圓的loading。

<svg xmlns="http://www.w3.org/2000/svg"
      version="1.1"
      height="400">
      <defs>
        <linearGradient x1="20%"
          y1="50%"
          x2="10%"
          y2="100%"
          id="gradient1">
          <stop offset="0%"
            stop-color="rgba(255,0,255,.3)"></stop>
          <stop offset="100%"
            stop-color="rgba(0,255,255,.76)"></stop>
        </linearGradient>
      </defs>
      <circle ref="myCircle"
        class="circle"
        cx="144"
        cy="126"
        r="120.5"
        stroke="url('#gradient1')"
        stroke-width="10"
        fill=none></circle>
    </svg>
複製程式碼

圓環的效果已經出來了,但是起始的方向好像不太對勁,使用transform中的旋轉屬性。

 <circle ref="myCircle"
        class="circle"
        cx="144"
        cy="126"
        r="120.5"
        stroke="url('#gradient1')"
        stroke-width="10"
        fill=none
        transform="matrix(0,-1,1,0,0,270)"></circle>
複製程式碼

transform: matrix(s, a, a, s, d, d)s 代表縮放第一個 s 代表 X 軸第二個代表 Y 軸，a 代表傾斜第一個 a 代表 Y 軸傾斜第二個 a 程式碼 X 軸，0 代表偏移量第一個代表 X 軸第二個代表 Y 軸,d代表是xy周的偏移量當然你可以直接寫一個`rotate(-90)`來改變方向,記得設定transform-origin

經過css矩陣調整以後loading圓環完成啦！

結語

介紹了svg的基本使用,重點介紹了stroke-dasharray屬性和stroke-dashoffset屬性的原理。實現一個loading也很好上手,趕快來做一個自己的圓環吧。下一篇將分享小米手環柱狀圖滑動的動畫實現。

參考

• 張鑫旭 SVG loading
• SVG路徑描邊動畫效果
• drawing in SVG