當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

一枚角度渐变描边 loading 图标的 SVG 修炼之路

發(fā)布時(shí)間：2025/3/8 编程问答 16 豆豆

生活随笔收集整理的這篇文章主要介紹了一枚角度渐变描边 loading 图标的 SVG 修炼之路小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

是的，看標(biāo)題能繞暈?zāi)恪?br />那就通俗點(diǎn)，說(shuō)點(diǎn)人說(shuō)的話(huà)吧。就是下面這貨：

漸變描邊
這種圖標(biāo)，以一眾UI設(shè)計(jì)師多年深厚的功底，打眼一看就知道，一定是旋轉(zhuǎn)的loading圖標(biāo)。小伙伴稱(chēng)之為什么呢？漸變描邊嘛？之所以這么拗口的起了個(gè)角度漸變描邊這種鬼畜的名字，是因?yàn)閜hotoshop的漸變描邊有下面三種效果

最像角度漸變對(duì)不對(duì)？好了，名字介紹到此結(jié)束，進(jìn)入正題。
這張圖片，用ps來(lái)做，分分鐘的事情對(duì)不對(duì)？然后CSS3一個(gè)旋轉(zhuǎn)動(dòng)畫(huà)屬性就好啦，但是，作為深中SVG之毒的假UI來(lái)說(shuō)，這樣絕不能滿(mǎn)足！一定要用SVG來(lái)實(shí)現(xiàn)，然后各種尺寸一個(gè)圖標(biāo)360度無(wú)死角適配。
好了，說(shuō)做就做。

1.AI繪制

既然用SVG，就少不了好基友AI了，我們都知道AI是可以導(dǎo)出一切SVG的，AI里面怎么完成，我不專(zhuān)業(yè)，只想到了一個(gè)簡(jiǎn)單的方法，先做一個(gè)混合，然后圓周（開(kāi)放路徑）替換混合軸來(lái)完成。其他設(shè)計(jì)師小伙伴有其他更好的方法都可以。

AI中制作方法

為了讓漸變效果更自然，我混合選項(xiàng)那里用的是指定的距離1px。好了，完成，導(dǎo)出SVG，加animation設(shè)置，轉(zhuǎn)起來(lái)，鞠躬，謝幕，教程到此結(jié)束（你特么是在逗我嘛？）。
等等，不要走，回來(lái)，來(lái)來(lái)來(lái)，你看看，你的SVG有多大。

SVG

37K，天雷滾滾，我導(dǎo)出png的話(huà)才只有5K多點(diǎn)。說(shuō)好的代碼實(shí)現(xiàn)更簡(jiǎn)單呢？！

暫時(shí)壓制住狂躁的心，然后來(lái)看一下SVG代碼。
我隨隨便便貼上一點(diǎn)看一下：

里面是N多個(gè)<circle>來(lái)組成的。
嗯，也不是太多，五百多個(gè)而已嘛。回想一下我們?cè)贏(yíng)I中使用替換混合軸來(lái)實(shí)現(xiàn)這種效果的原理，然后把指定距離變大一些（我由1px改成了10px），看一下效果

AI是如何實(shí)現(xiàn)這種漸變效果的一目了然，很多圓一個(gè)個(gè)拼接起來(lái)，顏色逐漸變化，這才從視覺(jué)上組成了一個(gè)圓的類(lèi)似角度漸變的描邊效果。
當(dāng)然了，這么蛋疼的SVG是不能用的，說(shuō)好的好維護(hù)呢？回頭要改個(gè)顏色我去源文件改五百多個(gè)色值？還不是要AI重新生成，重新導(dǎo)出？那到底能不能破？

2.變通的實(shí)現(xiàn)方法

CSS3的漸變支持線(xiàn)性漸變和徑向漸變，所以，想個(gè)辦法，能不能利用基礎(chǔ)的漸變來(lái)生成這個(gè)圖形？在死死的盯住這個(gè)圖長(zhǎng)達(dá)五分鐘之久后，發(fā)現(xiàn)這個(gè)圖拋棄頂部圓形不算，似乎是一分為二的兩個(gè)線(xiàn)性漸變拼成的。

既然是線(xiàn)性漸變，那我們可以放心大膽的玩起來(lái)了，首先，我在A(yíng)I中繪制了一個(gè)圓環(huán)，然后擴(kuò)展描邊，圖形從中分割開(kāi)，生成兩個(gè)半圓環(huán)。

我們需要的就是這兩個(gè)半圓環(huán)的<path>路徑。
當(dāng)然了，對(duì)于非設(shè)計(jì)師的玩法也很簡(jiǎn)單（我們暫且稱(chēng)之為開(kāi)發(fā)人員玩法），一個(gè)大圓復(fù)制兩份，利用內(nèi)部的小一些的同心圓蒙版產(chǎn)生圓環(huán)，然后兩個(gè)圓環(huán)一個(gè)加左半邊蒙版，一個(gè)加右半邊蒙版，我懶，直接借助AI導(dǎo)出路徑最喜歡。
得到兩個(gè)半圓環(huán)路徑之后，現(xiàn)在有兩個(gè)方法可以選擇，先來(lái)看第一種：直接給兩個(gè)半圓進(jìn)行線(xiàn)性漸變疊加，然后補(bǔ)充上頂部的圓形

似乎還不錯(cuò)，看看導(dǎo)出的SVG（我簡(jiǎn)化了一下）

代碼比較清晰，AI定義了兩個(gè)漸變“SVGID_1_”和“SVGID_2_”，然后兩個(gè)半圓環(huán)路徑去調(diào)用不同的漸變。
這時(shí)，我們只要在CSS樣式里加上下面這段定義旋轉(zhuǎn)動(dòng)畫(huà)的代碼：

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

然后把組成圖形的<path>和<circle>都用一個(gè)<g>標(biāo)簽包起來(lái)，然后<g id="load">來(lái)調(diào)用動(dòng)畫(huà)，（最后會(huì)放最終代碼的，這里不再羅里吧嗦了），好啦，轉(zhuǎn)起來(lái)，走你。

速度、方向神馬的不滿(mǎn)意再調(diào)整，都是小事情。然后看看文件大小，1.4K，減少了35K，似乎不起眼，但是，當(dāng)用另外一種表達(dá)方法，縮小到原來(lái)的3.7%，減少了96%的體積，嘖嘖嘖，是不是要上天？而且SVG代碼里一共三個(gè)色值，隨時(shí)隨地方便更換！
還沒(méi)完，作為一枚有理想有追求的loading圖標(biāo)，這樣就算完了嘛？我還沒(méi)說(shuō)方法2呢！

3.漸變優(yōu)化

近看這個(gè)圖標(biāo)會(huì)發(fā)現(xiàn)兩個(gè)協(xié)調(diào)不好的地方，一個(gè)是頂部的圓和背景圓環(huán)交接處，一個(gè)是兩個(gè)半圓環(huán)交界處，出現(xiàn)的原因很簡(jiǎn)單，我用漸變填充的圓形來(lái)表示一下。

也就是說(shuō)，雖然那個(gè)一堆<circle>形成的漸變環(huán)很魔性，但是按照?qǐng)A周弧形漸變，而我們上面一分為二的漸變則是垂直方向的漸變，好了，說(shuō)了一堆，到底能不能破？能！下面跟著我來(lái)做一個(gè)障眼法。

我們都知道，即使在軟件里，也是可以任意修改漸變色的停靠點(diǎn)的，如上圖所示，我把兩個(gè)圓環(huán)的基礎(chǔ)的線(xiàn)性漸變進(jìn)行了拆分，左側(cè)分為L(zhǎng)1（白→淺藍(lán)）漸變區(qū)和L2（淺藍(lán)填充）純色區(qū)，右側(cè)分為R1（藍(lán)色填充）純色區(qū)、R2（藍(lán)→淺藍(lán)）漸變區(qū)和R3（淺藍(lán)填充）純色區(qū)，如此拆分的目的就是為了讓原來(lái)圖標(biāo)頂部的小圓形對(duì)應(yīng)的底部圓環(huán)所在區(qū)域?yàn)楹推湎嗤募兩?#xff0c;同理，底部也都是純色填充，實(shí)現(xiàn)左半環(huán)和右半環(huán)的無(wú)縫拼接。
方法有了，實(shí)際操作中，零代碼基礎(chǔ)的UI們可以調(diào)節(jié)AI中漸變來(lái)實(shí)現(xiàn)，有一丟丟SVG基礎(chǔ)的，可以直接通過(guò)上面SVG漸變對(duì)應(yīng)的代碼

<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"> 復(fù)制代碼

調(diào)整y值（垂直方向，Y值即停靠點(diǎn)位置），比如這里，我的小圓的半徑=10，即環(huán)徑為20，那么左側(cè)對(duì)應(yīng)y1="0",y2="180",右側(cè)對(duì)應(yīng)y1="20",y2="180"。
調(diào)整后效果如下：

調(diào)整漸變停靠點(diǎn)后的圓環(huán)
完美！
好了，下面轉(zhuǎn)起來(lái)

收工！
既然騙眾位客官進(jìn)來(lái)了，那就放上通用代碼和注釋吧，需要什么顏色，直接調(diào)整就可以了，至于尺寸嘛，上網(wǎng)搜一篇關(guān)于SVG的viewBox和width、height的關(guān)系，各種尺寸無(wú)壓力，或者直接交給開(kāi)發(fā)人員就好了嘛。 <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">  <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>復(fù)制代碼

比如你想來(lái)個(gè)熱情洋溢的紅黃色系的

直接把三個(gè)色值套進(jìn)代碼里，分別替換深色，中間色和淺色。
得到效果如下

或者紫色

套色值

以及粉色小清新

o(￣︶￣)o

總結(jié)

以上是生活随笔為你收集整理的一枚角度渐变描边 loading 图标的 SVG 修炼之路的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：在linux下玩转usb摄像头
下一篇：百度地图的实现，IIS6.0，.net4