一枚角度渐变描边 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