如何用纯SVG打造一枚渐变loading图标 - 简书
如何用纯SVG打造一枚渐变loading图标
是的，看标题能绕晕你。
那就通俗点，说点人说的话吧。就是下面这货：
这种图标，以一众UI设计师多年深厚的功底，打眼一看就知道，一定是旋转的loading图标。小伙伴称之为什么呢？渐变描边嘛？之所以这么拗口的起了个角度渐变描边这种鬼畜的名字，是因为photoshop的渐变描边有下面三种效果
最像角度渐变对不对？好了，名字介绍到此结束，进入正题。
这张图片，用ps来做，分分钟的事情对不对？然后CSS3一个旋转动画属性就好啦，但是，作为深中SVG之毒的假UI来说，这样绝不能满足！一定要用SVG来实现，然后各种尺寸一个图标360度无死角适配。
好了，说做就做。
既然用SVG，就少不了好基友AI了，我们都知道AI是可以导出一切SVG的，AI里面怎么完成，我不专业，只想到了一个简单的方法，先做一个混合，然后圆周（开放路径）替换混合轴来完成。其他设计师小伙伴有其他更好的方法都可以。
AI中制作方法
为了让渐变效果更自然，我混合选项那里用的是指定的距离1px。好了，完成，导出SVG，加animation设置，转起来，鞠躬，谢幕，教程到此结束（你特么是在逗我嘛？）。
等等，不要走，回来，来来来，你看看，你的SVG有多大。
37K，天雷滚滚，我导出png的话才只有5K多点。说好的代码实现更简单呢？！
暂时压制住狂躁的心，然后来看一下SVG代码。
我随随便便贴上一点看一下：
里面是N多个&circle&来组成的。
嗯，也不是太多，五百多个而已嘛。回想一下我们在AI中使用替换混合轴来实现这种效果的原理，然后把指定距离变大一些（我由1px改成了10px），看一下效果
AI是如何实现这种渐变效果的一目了然，很多圆一个个拼接起来，颜色逐渐变化，这才从视觉上组成了一个圆的类似角度渐变的描边效果。
当然了，这么蛋疼的SVG是不能用的，说好的好维护呢？回头要改个颜色我去源文件改五百多个色值？还不是要AI重新生成，重新导出？那到底能不能破？
2.变通的实现方法
CSS3的渐变支持线性渐变和径向渐变，所以，想个办法，能不能利用基础的渐变来生成这个图形？在死死的盯住这个图长达五分钟之久后，发现这个图抛弃顶部圆形不算，似乎是一分为二的两个线性渐变拼成的。
既然是线性渐变，那我们可以放心大胆的玩起来了，首先，我在AI中绘制了一个圆环，然后扩展描边，图形从中分割开，生成两个半圆环。
我们需要的就是这两个半圆环的&path&路径。
当然了，对于非设计师的玩法也很简单（我们暂且称之为开发人员玩法），一个大圆复制两份，利用内部的小一些的同心圆蒙版产生圆环，然后两个圆环一个加左半边蒙版，一个加右半边蒙版，我懒，直接借助AI导出路径最喜欢。
得到两个半圆环路径之后，现在有两个方法可以选择，先来看第一种：直接给两个半圆进行线性渐变叠加，然后补充上顶部的圆形
似乎还不错，看看导出的SVG（我简化了一下）
&style type="text/css"&
.st1{fill:url(#SVGID_1_);}
.st2{fill:url(#SVGID_2_);}
.st3{fill:#4886CD;}
&linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="150" y1="0" x2="150" y2="200"&
offset="0" style="stop-color:#4886CD"/&
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"&
offset="0" style="stop-color:#FFFFFF"/&
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"/&
代码比较清晰，AI定义了两个渐变“SVGID_1_”和“SVGID_2_”，然后两个半圆环路径去调用不同的渐变。
这时，我们只要在CSS样式里加上下面这段定义旋转动画的代码：
@keyframes load{
0%{transform:rotate(0)}
100%{transform:rotate(-360deg)}
#load{animation:load 1 transform-origin:}
然后把组成图形的&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 1 transform-origin: }
&g id="load"&
&linearGradient id="right" gradientUnits="userSpaceOnUse" x1="150" y1="20" x2="150" y2="180"&
offset="0" style="stop-color:#4886CD"/&
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"&
offset="0" style="stop-color:#FFFFFF"/&
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"/&
比如你想来个热情洋溢的红黄色系的
直接把三个色值套进代码里，分别替换深色，中间色和浅色。
得到效果如下
以及粉色小清新
o(￣︶￣)o
商用软件交互设计师，幻迷，书虫
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金相信有很多朋友...
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金 相信有很多...
欢迎使用 Sketch 3 的用户手册，这个手册的内容同时适用于新手和熟练用户。如果你对于这个手册的内容有任何想法和疑问，请通过邮箱
随时联系我们。我们会不断的完善本手册。 介绍Sketch 是一款适用于所有设计师的矢量绘图应...
发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注
09:45字数 61697阅读 3316评论 2喜欢 85 用到的组件 1、通过CocoaPods安装 项目名称 项目信息 AFNetworking 网络请求组件 FM...
用到的组件1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SDWebImage多个缩略图缓存组件 UICKeyChainStore存放用户账号密码组件 Reachability监测网络状态 DateTools友好...
飞机引擎巨大的轰鸣声几次把我从睡梦中吵醒，接着还要调整耳朵的气压。从侧窗往下看，似乎是沙漠，再次醒来的时候，看见无尽的山脉，山顶还有白色的雪。 魔鬼城、布尔津县城、五彩滩 当我从飞机下来，看到乌鲁木齐机场的四个大字，想起很久没有出过这样的远门，光机票钱就一阵肉痛。从此我对四...
10月12日上午八点半，皋兰县名师首届论坛在魏家庄小学如期拉开序幕。
参加本次名师论坛的人员有教育局领导，教研室全体老师，皋兰县十二位名师及其团队成员，皋兰县名班主任，刘玲芳金城名师、魏秀娟金城名师及其成员。
论坛开始，由本次赴呼和浩特名师研修领队，教研...
闲来无事，静下心来好好思考你的人生经历。 这时候你会发现现今这个社会诱惑太多，很多的东西你都想拥有，可是却是被极残酷的现实而折磨的遍体鳞伤。其实，人活一世又何必去计较那么多呢。 可是，现实生活中很多人却是一味的从外而求。这样到最后你不仅一无所得，更会使得你身心疲惫。直到生命...
今天我们来说的是乞丐型人格，提到这个词，大家可能不太舒服，觉得是贬义词，尤其是在职场里，其实表述的并不是说这个人有多穷，而是一种心态，与之对应的我们暂且称之为精英。 有人会说，乞丐多种多样。明朝皇帝朱元璋，一生从事了三钟职业，“初为丐，后为僧，终为帝”，创造了一个职场神话。...ps设置渐变叠加，渐变怎么总是有一半是纯色，想在那里加个别的颜色都不行，为什么？_百度知道
ps设置渐变叠加，渐变怎么总是有一半是纯色，想在那里加个别的颜色都不行，为什么？
我有更好的答案
可以，这个要单独设置。1、点击渐变工具，之后双击上面的渐变色框。2、在弹出的编辑器中，点击第一个色块，在下方设置颜色，3、之后点击中间位置，添加其他的颜色。直到自己满意 ，（如果添加多了，不需要，可以鼠标点击后，向外移动 ）
那你就点击编辑器第2个，之后设置自己喜欢的颜色。如果使用渐变，调整不透明度。
明明位置都在1，为什么下面那么多颜色
黑色部分，我只想留一点点，但是过不去
图片缓冲有点慢。你点击下方滑块的黑色，之后设置颜色就可以了。你没有看到那个黑色的是255的黑。设置为浅灰色。
话说，那个颜色可以不要吧，或者设置与天蓝色相近的颜色，不然这种肯定很明显。还有，渐变的拉伸位置也会决定这个颜色的多少。（我是在圆形顶部，拉到最低位置）
对了。不要在圆的里面拉，在圆的外面拉。要不然只能把这个黑色去掉。
我是对于画好的形状叠加颜色，我想黑色只有一点点，为什么图像上黑色占了一大块，我已经把隔壁的色拉到和它一个位置了，为什么还有那么大一块
不知道你的图形，图层是什么样的。另外，这个黑色只要有，你在选区内拉的话，就会这样，在选区外就没有问题。
要哭了，作业都没得做了
这样，图层里只有一个图形，要求不能栅格化，添加渐变色，黑色只要一点点
所以只能渐变叠加
晕，不知道作业什么样。那你就在圆形内大约2mm米位置拉吧，这样只有一点点的黑，还不是特别明显。多试几次吧。
不栅格化不能拉啊
不让栅格化T^T
采纳率：84%
来自团队：
你的意思是想叠加几种渐变颜色吗？如下图
就是那个距离问题
前面两个距离都在1，为什么黑色还有那么多
这个完全看你自己的经验来拉，拉的位置和拉的长度，拉的角度，距离与拉的长度拉的位置有关。拉的起点和终点自己来掌握，多拉几次看效果，如果想拉的渐变少一点，只有3分之一，就从边外面往里拉，拉短一点，不要从上面的边拉到下面的边，那样拉就是一半。
我这个问题针对渐变叠加
对于画好的形状叠加颜色，我想黑色只有一点点，为什么图像上黑色占了一大块，我已经把隔壁的色拉到和它一个位置了，为什么还有那么大一块
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。拒绝访问 | www.th7.cn | 百度云加速
请打开cookies.
此网站 (www.th7.cn) 的管理员禁止了您的访问。原因是您的访问包含了非浏览器特征(426fbdf5b7584364-ua98).
重新安装浏览器，或使用别的浏览器MFC实现一个纯色渐变的算法
[问题点数：20分，结帖人renyongwang1988]
MFC实现一个纯色渐变的算法
[问题点数：20分，结帖人renyongwang1988]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
2013年2月 移动平台大版内专家分月排行榜第三
匿名用户不能发表回复！|使用CSS3画出一个大白_百度文库
赠送免券下载特权
10W篇文档免费专享
部分付费文档8折起
每天抽奖多种福利
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
使用CSS3画出一个大白
阅读已结束，下载本文需要
想免费下载本文？
定制HR最喜欢的简历
下载文档到电脑，同时保存到云知识，更方便管理
加入VIP
还剩3页未读，
定制HR最喜欢的简历
你可能喜欢