一枚角度漸變描邊 loading 圖標的 SVG 修煉之路

是的，看標題能繞暈你。
那就通俗點，說點人說的話吧。就是下面這貨：

漸變描邊

這種圖標，以一衆UI設計師多年深厚的功底，打眼一看就知道，必定是旋轉的loading圖標。小夥伴稱之爲何呢？漸變描邊嘛？之因此這麼拗口的起了個 角度漸變描邊這種鬼畜的名字，是由於photoshop的漸變描邊有下面三種效果

最像角度漸變對不對？好了，名字介紹到此結束，進入正題。
這張圖片，用ps來作，分分鐘的事情對不對？而後CSS3一個旋轉動畫屬性就好啦，可是，做爲深中SVG之毒的假UI來講，這樣毫不能知足！必定要用SVG來實現，而後各類尺寸一個圖標360度無死角適配。
好了，說作就作。

1.AI繪製

既然用SVG，就少不了好基友AI了，咱們都知道AI是能夠導出一切SVG的，AI裏面怎麼完成，我不專業，只想到了一個簡單的方法，先作一個混合，而後圓周（開放路徑）替換混合軸來完成。其餘設計師小夥伴有其餘更好的方法均可以。

AI中製做方法

爲了讓漸變效果更天然，我混合選項那裏用的是指定的距離1px。好了，完成，導出SVG，加animation設置，轉起來，鞠躬，謝幕，教程到此結束（你特麼是在逗我嘛？）。
等等，不要走，回來，來來來，你看看，你的SVG有多大。

SVG

37K，天雷滾滾，我導出png的話才只有5K多點。說好的代碼實現更簡單呢？！

暫時壓制住狂躁的心，而後來看一下SVG代碼。
我隨隨便便貼上一點看一下：

裏面是N多個 <circle>來組成的。
嗯，也不是太多，五百多個而已嘛。回想一下咱們在AI中使用替換混合軸來實現這種效果的原理，而後把指定距離變大一些（我由1px改爲了10px），看一下效果

AI是如何實現這種漸變效果的一目瞭然，不少圓一個個拼接起來，顏色逐漸變化，這才從視覺上組成了一個圓的相似角度漸變的描邊效果。
固然了，這麼蛋疼的SVG是不能用的，說好的好維護呢？回頭要改個顏色我去源文件改五百多個色值？還不是要AI從新生成，從新導出？那到底能不能破？

2.變通的實現方法

CSS3的漸變支持線性漸變和徑向漸變，因此，想個辦法，能不能利用基礎的漸變來生成這個圖形？在死死的盯住這個圖長達五分鐘之久後，發現這個圖拋棄頂部圓形不算，彷佛是一分爲二的兩個線性漸變拼成的。

既然是線性漸變，那咱們能夠放心大膽的玩起來了，首先，我在AI中繪製了一個圓環，而後擴展描邊，圖形從中分割開，生成兩個半圓環。

咱們須要的就是這兩個半圓環的<path>路徑。
固然了，對於非設計師的玩法也很簡單（咱們暫且稱之爲開發人員玩法），一個大圓複製兩份，利用內部的小一些的同心圓蒙版產生圓環，而後兩個圓環一個加左半邊蒙版，一個加右半邊蒙版，我懶，直接藉助AI導出路徑最喜歡。
獲得兩個半圓環路徑以後，如今有兩個方法能夠選擇，先來看第一種：直接給兩個半圓進行線性漸變疊加，而後補充上頂部的圓形

彷佛還不錯，看看導出的SVG（我簡化了一下）

<svg>
<style type="text/css">
.st1{fill:url(#SVGID_1_);}
.st2{fill:url(#SVGID_2_);}
.st3{fill:#4886CD;}
</style>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="150" y1="0" x2="150" y2="200">
<stop  offset="0" style="stop-color:#4886CD"/>
<stop  offset="1" style="stop-color:#9DBFE4"/>
</linearGradient><!--深藍到淺藍的漸變-->
<path class="st1" d="M100,0v20c44.1,0,80,35.9,80,80c0,44.1-35.9,80-80,80v20c55.2,0,100-44.8,100-100S155.2,0,100,0z"/>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="50" y1="0" x2="50" y2="200">
<stop  offset="0" style="stop-color:#FFFFFF"/>
<stop  offset="1" style="stop-color:#9DBFE4"/>
</linearGradient><!--白色到淺藍的漸變-->
<path class="st2" d="M20,100c0-44.1,35.9-80,80-80V0C44.8,0,0,44.8,0,100s44.8,100,100,100v-20C55.9,180,20,144.1,20,100z"/>
<circle class="st3" cx="100" cy="10" r="10"/>
</svg>複製代碼

代碼比較清晰，AI定義了兩個漸變「SVGID_1_」和「SVGID_2_」，而後兩個半圓環路徑去調用不一樣的漸變。
這時，咱們只要在CSS樣式里加上下面這段定義旋轉動畫的代碼：

@keyframes load{
0%{transform:rotate(0)}
100%{transform:rotate(-360deg)}
}
#load{animation:load 1s linear infinite; transform-origin:center center;} 複製代碼

而後把組成圖形的<path>和<circle>都用一個<g>標籤包起來，而後<g id="load">來調用動畫，（最後會放最終代碼的，這裏再也不羅裏吧嗦了），好啦，轉起來，走你。

速度、方向神馬的不滿意再調整，都是小事情。而後看看文件大小，1.4K，減小了35K，彷佛不起眼，可是，當用另一種表達方法，縮小到原來的3.7%，減小了96%的體積，嘖嘖嘖，是否是要上天？並且SVG代碼裏一共三個色值，隨時隨地方便更換！
還沒完，做爲一枚有理想有追求的loading圖標，這樣就算完了嘛？我還沒說方法2呢！

3.漸變優化

近看這個圖標會發現兩個協調很差的地方，一個是頂部的圓和背景圓環交接處，一個是兩個半圓環交界處，出現的緣由很簡單，我用漸變填充的圓形來表示一下。

也就是說，雖然那個一堆 <circle>造成的漸變環很魔性，可是按照圓周弧形漸變，而咱們上面一分爲二的漸變則是垂直方向的漸變，好了，說了一堆，到底能不能破？能！下面跟着我來作一個障眼法。

咱們都知道，即便在軟件裏，也是能夠任意修改漸變色的停靠點的，如上圖所示，我把兩個圓環的基礎的線性漸變進行了拆分，左側分爲L1（白→淺藍）漸變區和L2（淺藍填充）純色區，右側分爲R1（藍色填充）純色區、R2（藍→淺藍）漸變區和R3（淺藍填充）純色區，如此拆分的目的就是爲了讓原來圖標頂部的小圓形對應的底部圓環所在區域爲和其相同的純色，同理，底部也都是純色填充，實現左半環和右半環的無縫拼接。
方法有了，實際操做中，零代碼基礎的UI們能夠調節AI中漸變來實現，有一丟丟SVG基礎的，能夠直接經過上面SVG漸變對應的代碼

<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="150" y1="0" x2="150" y2="200">
<!--右半圓環的漸變-->
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="50" y1="0" x2="50" y2="200">
<!--左半圓環的漸變-->複製代碼

調整y值（垂直方向，Y值即停靠點位置），好比這裏，個人小圓的半徑=10，即環徑爲20，那麼左側對應y1="0",y2="180",右側對應y1="20",y2="180"。
調整後效果以下：

調整漸變停靠點後的圓環

完美！
好了，下面轉起來

收工！
既然騙衆位客官進來了，那就放上通用代碼和註釋吧，須要什麼顏色，直接調整就能夠了，至於尺寸嘛，上網搜一篇關於SVG的 viewBox和 width、 height的關係，各類尺寸無壓力，或者直接交給開發人員就行了嘛。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  width="200px" height="200px"  viewBox="0 0 200 200"
 xml:space="preserve">
<!--#4886CD爲深色值 #9DBFE4爲中間值 能夠隨意修改--> 
<style type="text/css">
.left{fill:url(#left);}
.right{fill:url(#right);}
.top{fill:#4886CD;}
@keyframes load{
0%{transform:rotate(0)}
100%{transform:rotate(-360deg)}
}
#load{animation:load 1s linear infinite; transform-origin:center center; } 
</style>
<g id="load">
<linearGradient id="right" gradientUnits="userSpaceOnUse" x1="150" y1="20" x2="150" y2="180">
<stop  offset="0" style="stop-color:#4886CD"/>
<stop  offset="1" style="stop-color:#9DBFE4"/><!--藍到淺藍漸變-->
</linearGradient>
<path class="right" d="M100,0v20c44.1,0,80,35.9,80,80c0,44.1-35.9,80-80,80v20c55.2,0,100-44.8,100-100S155.2,0,100,0z"/><!--右半圓環-->
<linearGradient id="left" gradientUnits="userSpaceOnUse" x1="50" y1="0" x2="50" y2="180">
<stop  offset="0" style="stop-color:#FFFFFF"/>
<stop  offset="1" style="stop-color:#9DBFE4"/><!--淺藍到白色漸變-->
</linearGradient>
<path class="left" d="M20,100c0-44.1,35.9-80,80-80V0C44.8,0,0,44.8,0,100s44.8,100,100,100v-20C55.9,180,20,144.1,20,100z"/><!--左半圓環-->
<circle class="top" cx="100" cy="10" r="10"/>
</g>
</svg>複製代碼

好比你想來個熱情洋溢的紅黃色系的

直接把三個色值套進代碼裏，分別替換深色，中間色和淺色。
獲得效果以下

或者紫色

套色值

以及粉色小清新

o(￣︶￣)o