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

泱泱發表於2017-07-27
SVG

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

漸變描邊
漸變描邊

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


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

1.AI繪製

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

AI中製作方法
AI中製作方法

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

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

相關文章