97精品久久天干天天蜜,久久不射网站,亚洲欧美日韩另类在线一

如何制作SVG顏色漸變動(dòng)畫(huà)效果

2020.01.10

使用SVG來(lái)制作顏色漸變效果是非常方便的。SVG的線性漸變和徑向漸變?cè)赜幸恍┛捎玫膮?shù)選項(xiàng)可以讓我們來(lái)控制漸變的變化。在這篇文章中，我們將介紹一些基本的SVG漸變知識(shí)。

瀏覽器支持

所有的現(xiàn)代瀏覽器，包括桌面和移動(dòng)版本的瀏覽器都支持SVG。

關(guān)于SVG SMIL動(dòng)畫(huà)（動(dòng)畫(huà)在SVG元素內(nèi)部），IE瀏覽器、IE mobile和Opera Mini不支持這種動(dòng)畫(huà)，但是它被最新版本的Chrome、Firefox、Safari、Opera的桌面和移動(dòng)版本的瀏覽器所支持。

SVG漸變

在我們開(kāi)始制作SVG漸變動(dòng)畫(huà)之前，我們首先要知道SVG漸變使如何工作的。

我們可以在SVG中使用漸變屬性，但是如果我們不使用fill或stroke屬性來(lái)填充它，它是不會(huì)有任何視覺(jué)效果的。

基本的SVG漸變的代碼結(jié)構(gòu)像下面這個(gè)樣子：

1

2

3

4

5

6

7

8

9

<svg>

<defs>

<linearGradient id='greenGradient'>

<stop offset='0' stop-color='#b2ed9d' />

<stop offset='100%' stop-color='#569b3d' />

</linearGradient>

</defs>

<rect width='600' height='150' fill= 'url(#greenGradient)' />

</svg>

漸變的詳細(xì)信息我們寫(xiě)在<defs>元素中，但是這些信息不會(huì)有任何視覺(jué)效果，知道我們通過(guò)ID來(lái)在fill屬性中引用它：fill= 'url(#greenGradient)'。在上面的代碼中，我們畫(huà)了一個(gè)600像素寬，150像素高的矩形，并用綠色漸變來(lái)填充它。

<stop>元素代表了映射在漸變中的顏色和它們的位置。

SVG漸變屬性

<linearGradient>和<radialGradient>的屬性值允許我們指定漸變的顏色和坐標(biāo)。

下面我們來(lái)看一下我們的DEMO中用到的屬性：

ID：一個(gè)漸變的唯一標(biāo)識(shí)符，它會(huì)在fill或stroke中被用于引用漸變。
x1, x2, y1, y2： x1, x2, y1, y2的值用于指定SVG線性漸變?cè)赬和Y軸上的開(kāi)始和結(jié)束坐標(biāo)。默認(rèn)左值為0，右值為100%。
cx, cy, r, fx, fy：徑向漸變的屬性和線性漸變的屬性差不多，只是坐標(biāo)系更為復(fù)雜。cx、cy 和 r（半徑）用于指定徑向漸變的外層圓，最外層的半徑stop點(diǎn)為100%。fx和fy調(diào)用徑向漸變的圓點(diǎn)，這里的stop點(diǎn)為0%。

`<stop>`

在漸變?cè)氐膬?nèi)部包含了<stop>節(jié)點(diǎn)。在<stop>節(jié)點(diǎn)中的屬性定義了漸變的顏色被放置在什么地方，以及顏色使用多少的透明度。

offset屬性用于表示該顏色位于漸變的什么位置上。對(duì)于線性漸變它是一段漸變直線上的距離，對(duì)于徑向漸變它的位置在原點(diǎn)到外層圓的邊線的距離。

stop-color屬性用于定義在該stop點(diǎn)上使用什么顏色。stop-opacity屬性用于定義該顏色的透明度。

`<animate>`

<animate>元素允許我們選擇指定的漸變屬性，然后在指定的時(shí)間內(nèi)將它們修改為其它值。<animate>元素會(huì)被放置在我們想要制作漸變效果的元素的內(nèi)部。下面是一個(gè)簡(jiǎn)單的矩形漸變動(dòng)畫(huà)的代碼結(jié)構(gòu)：

1

2

3

4

5

6

7

8

<svg>

<rect x='0' y='20' width='100' height='100'>

<animate attributeName='x'

from='0' to='400px'

dur='5s'

repeatCount='indefinite' />

</rect>

</svg>

這個(gè)動(dòng)畫(huà)效果會(huì)將矩形從它的起始點(diǎn)沿X軸移動(dòng)400像素，動(dòng)畫(huà)持續(xù)時(shí)間為5秒鐘，并且是無(wú)限循環(huán)動(dòng)畫(huà)。

<animate>元素有下面幾個(gè)基本的屬性：

attributeName：attributeName 定義執(zhí)行動(dòng)畫(huà)的屬性名稱(chēng)。例如上面的代碼中，attributeName的值為'x'，表示要在X軸上移動(dòng)元素。
to, from：from和to屬性用于指定目標(biāo)元素的開(kāi)始和結(jié)束值。
values：在<values>元素的內(nèi)部，我們可以創(chuàng)建一組用分號(hào)隔開(kāi)的值，動(dòng)畫(huà)會(huì)在持續(xù)時(shí)間內(nèi)應(yīng)用這些值。
dur：動(dòng)畫(huà)的持續(xù)時(shí)間。
fill：fill屬性通常是用于填充SVG的顏色，但是在<animate>元素中它有不同的含義。我們可以將它的值設(shè)置為freezes，這樣動(dòng)畫(huà)會(huì)在結(jié)束后被“凍結(jié)”，不再?gòu)男麻_(kāi)始。
repeatCount：指定SVG動(dòng)畫(huà)的重復(fù)次數(shù)。它的值可以是一個(gè)數(shù)值，或者是indefinite。

漸變動(dòng)畫(huà)

為了制作SVG漸變效果，我們需要指定哪些屬性需要執(zhí)行動(dòng)畫(huà)，例如stop-color、offset或者坐標(biāo)。

為了在一個(gè)矩形中制作漸變效果，我們需要在<rect>元素中放置<animate>元素，然后指定我們想要的<stop>值。為了在<linearGradient>元素和<radialGradient>元素中直接動(dòng)畫(huà)一個(gè)屬性，例如坐標(biāo)，我們可以將<animate>放置在漸變?cè)拗?，但是要放?code><stop>之外。

下面是<stop>節(jié)點(diǎn)上制作stop-color動(dòng)畫(huà)的SVG結(jié)構(gòu)：

1

2

3

<stop offset='<value>' stop-color='<color>'>

<animate attributeName='stop-color' from=”<color>” to=”<color> dur='<duration>' repeatCount='indefinite' />

</stop>

應(yīng)用舉例

在這篇文章中我們會(huì)舉三個(gè)SVG漸變的例子：燃燒的火焰、陽(yáng)光照在樹(shù)上和天空顏色變化的效果。

燃燒的火焰

在這個(gè)SVG動(dòng)畫(huà)中我們要針對(duì)兩個(gè)火焰來(lái)執(zhí)行填充和動(dòng)畫(huà)。它們會(huì)被放置在<svg>元素的<defs>節(jié)點(diǎn)之中。

1

2

3

4

5

6

7

8

9

10

11

12

13

<defs>

<radialGradient id='smallGradient' fy='90%'>

<stop offset='0%' stop-color='#f4c708'></stop>

<stop offset='100%' stop-color='#f7e69a'></stop>

<animate attributeName='fy' dur='700ms' from='90%' to='0%' repeatCount='indefinite' />

</radialGradient>

<radialGradient id='largeGradient' fy='90%'>

<stop offset='0%' stop-color='#ff8806'></stop>

<stop offset='100%' stop-color='#d9574a'></stop>

<animate attributeName='fy' dur='700ms' from='90%' to='0%' repeatCount='indefinite' />

</radialGradient>

</defs>

上面有兩個(gè)徑向漸變：'smallGradient'和'largeGradient'。它們?cè)?code>fy坐標(biāo)上被執(zhí)行相同的動(dòng)畫(huà)，在700毫秒時(shí)間內(nèi)從90%變化到0%。這個(gè)效果被制作為無(wú)限循環(huán)動(dòng)畫(huà)。

這些動(dòng)畫(huà)被目標(biāo)元素使用fill屬性的url通過(guò)ID標(biāo)識(shí)符來(lái)引用：

1	`fill='url(#largeGradient)'`

陽(yáng)光照在樹(shù)上的效果

在這個(gè)demo中使用的是stop-color來(lái)制作漸變動(dòng)畫(huà)效果。這里有兩種不同的漸變代表不同的樹(shù)的顏色，一個(gè)是較暗的綠色漸變，另一個(gè)較亮的綠色漸變。兩個(gè)顏色的漸變動(dòng)畫(huà)本質(zhì)是相同的，只是使用的顏色不同而已。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<defs>

<linearGradient id='darkGradient' x1='30%' y1='70%'>

<stop offset='0%' stop-color='#0b2d13'>

<animate attributeName='stop-color' values='#0b2d13; #79c98c' dur='3s' fill='freeze' />

</stop>

<stop offset='100%' stop-color='#79c98c'>

<animate attributeName='stop-color' values='#79c98c; #0b2d13' dur='3s' fill='freeze' />

</stop>

</linearGradient>

<linearGradient id='lightGradient' x1='30%' y1='70%'>

<stop offset='0%' stop-color='#054f16'>

<animate attributeName='stop-color' values='#054f16; #91bc9c' dur='3s' fill='freeze' />

</stop>

<stop offset='100%' stop-color='#91bc9c'>

<animate attributeName='stop-color' values='#91bc9c; #054f16' dur='3s' fill='freeze' />

</stop>

</linearGradient>

</defs>

<animate>元素放置在100% stop點(diǎn)的內(nèi)部，它要?jiǎng)赢?huà)的屬性名稱(chēng)是stop-color。漸變動(dòng)畫(huà)的顏色值使用的的<values>屬性中的值，動(dòng)畫(huà)持續(xù)時(shí)間為3秒，并且動(dòng)畫(huà)在移除循環(huán)結(jié)束之后就會(huì)被“凍結(jié)”（停止）。

天空顏色變化效果

這個(gè)demo實(shí)際是動(dòng)畫(huà)stop的offset屬性。它有兩組漸變，每一組都有一系列的顏色變化值。它通過(guò)offset的一個(gè)額外動(dòng)畫(huà)，使stop點(diǎn)從100%變化到0%，從而使整個(gè)動(dòng)畫(huà)無(wú)限循環(huán)下去。

1

2

3

4

5

6

7

8

9

10

11

<defs>

<linearGradient id='skyGradient' x1='100%' y1='100%'>

<stop offset='0%' stop-color='lightblue' stop-opacity='.5'>

<animate attributeName='stop-color' values='lightblue;blue;red;red;black;red;red;purple;lightblue' dur='14s' repeatCount='indefinite' />

</stop>

<stop offset='100%' stop-color='lightblue' stop-opacity='.5'>

<animate attributeName='stop-color' values='lightblue;orange;purple;purple;black;purple;purple;blue;lightblue' dur='14s' repeatCount='indefinite' />

<animate attributeName='offset' values='.95;.80;.60;.40;.20;0;.20;.40;.60;.80;.95' dur='14s' repeatCount='indefinite' />

</stop>

</linearGradient>

</defs>

在stop-color動(dòng)畫(huà)中，在14秒的時(shí)間內(nèi)，顏色會(huì)均勻的循環(huán)改變?yōu)?code><values>中的顏色值。額外的offset動(dòng)畫(huà)會(huì)在14秒時(shí)間內(nèi)使用<values>中的值將stop點(diǎn)從100%修改到0%。

這里需要注意一點(diǎn)：在執(zhí)行offset屬性動(dòng)畫(huà)時(shí)使用百分比的值，可以在Firefox瀏覽器中正常執(zhí)行。Chrome和Safari在<animate>元素中執(zhí)行offset屬性動(dòng)畫(huà)時(shí)使用百分比值時(shí)不會(huì)得到正確的結(jié)果。