如何用纯SVG打造一枚渐变loading图标

作者: 泱泱悲秋 | 来源:发表于2017-07-27 11:29 被阅读1706次

是的，看标题能绕晕你。
那就通俗点，说点人说的话吧。就是下面这货：

渐变描边
这种图标，以一众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>

比如你想来个热情洋溢的红黄色系的