這篇文章主要為大家展示了“如何實(shí)現(xiàn)svg動(dòng)畫(huà)”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“如何實(shí)現(xiàn)svg動(dòng)畫(huà)”這篇文章吧。

讓客戶(hù)滿(mǎn)意是我們工作的目標(biāo)，不斷超越客戶(hù)的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶(hù)，將通過(guò)不懈努力成為客戶(hù)在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名注冊(cè)、網(wǎng)絡(luò)空間、營(yíng)銷(xiāo)軟件、網(wǎng)站建設(shè)、南安網(wǎng)站維護(hù)、網(wǎng)站推廣。

一、SVG 的 animation

SVG animation 有五大元素，他們控制著各種不同類(lèi)型的動(dòng)畫(huà)，分別為：

set

animate

animateColor

animateTransform

animateMotion

set 為動(dòng)畫(huà)元素設(shè)置延遲，此元素是SVG中最簡(jiǎn)單的動(dòng)畫(huà)元素，但是他并沒(méi)有動(dòng)畫(huà)效果。

使用語(yǔ)法：

attributeName ：是要改變的元素屬性名稱(chēng)。

attributeType ：是表明attributeName屬性值的列表，支持三個(gè)固定參數(shù) CSS/XML/auto，如x,y以及transform屬于XML，opacity屬于CSS。auto是瀏覽器自動(dòng)判別的意思，也是默認(rèn)值，如果你不知道該選哪個(gè)就填auto，瀏覽器自己判別。

to ：動(dòng)畫(huà)結(jié)束的屬性值。

begin ：動(dòng)畫(huà)延遲時(shí)間。

eg：繪制一個(gè)半徑為200的圓，4秒之后，半徑變?yōu)?0。

<svg width="320" height="320">

<circle cx="0" cy="0" r="200" style="stroke: none; fill: #0000ff;">

<set attributeName="r" attributeType="XML" to="50" begin="4s" />

</circle>

</svg>

?

是基礎(chǔ)的動(dòng)畫(huà)元素，實(shí)現(xiàn)單屬性的過(guò)渡效果。

使用語(yǔ)法：

from ：過(guò)渡效果的屬性開(kāi)始值。

to：過(guò)渡效果的屬性結(jié)束值。

begin：動(dòng)畫(huà)開(kāi)始時(shí)間。

dur：動(dòng)畫(huà)過(guò)渡時(shí)間，控制動(dòng)畫(huà)速度。

repeatCount：動(dòng)畫(huà)重復(fù)次數(shù)。

eg：繪制一個(gè)半徑為200的圓，4秒之后半徑在2秒內(nèi)從200逐漸變?yōu)?0。

<circle cx="0" cy="0" r="200" style="stroke: none; fill: #0000ff;">

<animate attributeName="r" from="200" to="50"

begin="4s" dur="2s" repeatCount="2"></animate>

</circle>

?

控制顏色動(dòng)畫(huà)，animate也可以實(shí)現(xiàn)這個(gè)效果，所以該屬性目前已被廢棄。

實(shí)現(xiàn)transform變換動(dòng)畫(huà)效果，與css3的transform變換類(lèi)似。實(shí)現(xiàn)平移、旋轉(zhuǎn)、縮放等效果。

使用語(yǔ)法：

repeatCount：重復(fù)次數(shù)，設(shè)置為 indefinite 表示無(wú)限循環(huán)，一直執(zhí)行。

type：添加 transform 變換類(lèi)型。

eg：繪制一個(gè)半徑為200的圓，4秒之后開(kāi)始縮放，在2秒內(nèi)從1.5縮小到0倍。

<svg width="320" height="320">

<circle cx="0" cy="0" r="200" style="stroke: none; fill: #0000ff;">

<animateTransform attributeName="transform" begin="4s"

dur="2s" type="scale" from="1.5" to="0"

repeatCount="indefinite"></animateTransform>

</circle>

</svg>

可以定義動(dòng)畫(huà)路徑，讓SVG各個(gè)圖形，沿著指定路徑運(yùn)動(dòng)。

使用語(yǔ)法：

path：定義路徑，使用語(yǔ)法與《HTML5(八)&mdash;&mdash;SVG 之 path 詳解》path的d屬性一致。

begin：延遲時(shí)間。

dur：動(dòng)畫(huà)執(zhí)行時(shí)間。

eg：繪制一個(gè)半徑為10的圓，延遲4秒從左上角運(yùn)動(dòng)的右下角。

<svg width="320" height="320">

<circle cx="0" cy="0" r="10" style="stroke: none; fill: #0000ff;">

<animateMotion

path="M 0 0 L 320 320"

begin="4s" dur="2s"

></animateMotion>

</circle>

</svg>

?

實(shí)際制作動(dòng)畫(huà)的時(shí)候，動(dòng)畫(huà)太單一不酷，需要同時(shí)改變多個(gè)屬性時(shí)，上邊的四種元素可以互相組合，同類(lèi)型的動(dòng)畫(huà)也能組合。以上這些元素雖然能夠?qū)崿F(xiàn)動(dòng)畫(huà)，但是無(wú)法動(dòng)態(tài)地添加事件，所以接下來(lái)我們就看看 js 如何制作動(dòng)畫(huà)。

二、JavaScript 控制

上篇文章我們介紹js可以操作path，同樣也可以操作SVG的內(nèi)置形狀元素，還可以給任意元素添加事件。

給SVG元素添加事件方法與普通元素一樣，可以只用on+事件名 或者addEventListener添加。

eg：使用SVG繪制地一條線，點(diǎn)擊線條地時(shí)候改變 x1 ,實(shí)現(xiàn)旋轉(zhuǎn)效果。

<svg width="800" height="800" id="svg">

<line id="line" x1="100" y1="100"

x2="400" y2="300"

stroke="black" stroke-width="5"></line>

</svg>

<script>

window.onload=function(){

var line=document.getElementById("line")

line.onclick=function(){

let start=parseInt(line.getAttribute("x1")),

end=400,dis=start-end

requestAnimationFrame(next)

let count=0;

function next(){

count++

let a=count/200,cur=Math.abs(start+ dis*a)

line.setAttribute('x1',cur)

if(count<200)requestAnimationFrame(next)

}

}

}

</script>

?

js制作的SVG動(dòng)畫(huà)，主要利用 requestAnimationFrame 來(lái)實(shí)現(xiàn)一幀一幀的改變。

我們上述制作的 SVG 圖形、動(dòng)畫(huà)等，運(yùn)行在低版本IE中，發(fā)現(xiàn)SVG只有IE9以上才支持，低版本的并不能支持，為了兼容低版本瀏覽器，可以使用 VML ,VML需要添加額外東西，每個(gè)元素需要添加 v:元素，樣式中還需要添加 behavier ，經(jīng)常用于繪制地圖。由于使用太麻煩，所以我們借助 Raphael.js 庫(kù)。

三、Rapha?l.js (拉斐爾)

Raphael.js是通過(guò)SVG/VML+js實(shí)現(xiàn)跨瀏覽器的矢量圖形，在IE瀏覽器中使用VML，非IE瀏覽器使用SVG，類(lèi)似于jquery，本質(zhì)還是一個(gè)javascript庫(kù)，使用簡(jiǎn)單，容易上手。

使用之前需要先引入Raphael.js庫(kù)文件。cdn的地址為：

Rapheal有兩種創(chuàng)建畫(huà)布的方式：

第一種：瀏覽器窗口上創(chuàng)建畫(huà)布

創(chuàng)建語(yǔ)法：

var paper=Raphael(x,y,width,height)

x,y是畫(huà)布左上角的坐標(biāo)，此時(shí)畫(huà)布的位置是絕對(duì)定位，有可能會(huì)與其他html元素重疊。width、height是畫(huà)布的寬高。

第二種：在一個(gè)元素中創(chuàng)建畫(huà)布

創(chuàng)建語(yǔ)法：

var paper=Raphael(element, width, height);

element是元素節(jié)點(diǎn)本身或ID width、height是畫(huà)布的寬度和高度。

畫(huà)布創(chuàng)建好之后，該對(duì)象自帶SVG內(nèi)置圖形有矩形、圓形、橢圓形。他們的方法分別為：

paper.circle(cx, cy, r); // (cx , cy)圓心坐標(biāo) r 半徑

paper.rect(x, y, width, height, r); // (x,y)左上角坐標(biāo) width寬度 height高度 r圓角半徑(可選)

paper. ellipse(cx, cy, rx, ry); // (cx , cy)圓心坐標(biāo) rx水平半徑 ry垂直半徑

eg：在div中繪制一個(gè)圓形，一個(gè)橢圓、一個(gè)矩形。

<div id="box"></div>

<script>

var paper=Raphael("box",300,300)

paper.circle(150,150,150)

paper.rect(0,0,300,300)

paper.ellipse(150,150,100,150)

</script>

?

運(yùn)行結(jié)果如下：

?

除了簡(jiǎn)單圖形之外，還可以繪制復(fù)雜圖形，如三角形、心型，這時(shí)就使用path方法。

使用語(yǔ)法：paper.path(pathString)

pathString是由一個(gè)或多個(gè)命令組成，每個(gè)命令以字母開(kāi)始，多個(gè)參數(shù)是由逗號(hào)分隔。

eg：繪制一個(gè)三角形。

還可以繪制文字，如果需要換行，使用 \n 。

文字語(yǔ)法：paper.text(x,y,text)

(x,y)是文字坐標(biāo)，text是要繪制的文字。

圖形繪制之后，我們通常會(huì)添加stroke、fill、stroke-width等讓圖形更美觀，Raphael使用attr給圖形設(shè)置屬性。

使用語(yǔ)法：circle.attr()

如果只有屬性名沒(méi)有屬性值，則是獲取屬性，如果有屬性值，則是設(shè)置屬性。

注意：如果只設(shè)置一個(gè)屬性時(shí)，可以省略&lsquo;{}&rsquo;。如：rect.attr('fill','pink')

eg：給上邊的矩形添加邊框和背景色。

<div id="box"></div>

<script>

var paper=Raphael("box",300,300)

let rect=paper.rect(100,100,150,200)

rect.attr({'fill':'red','stroke':'blue','stroke-width':'10'})

</script>

?

RaphaelJS一般具有以下事件：

click、dblclick、drag、hide、hover、mousedown、mouseout、mouseup、mouseover等以及對(duì)應(yīng)的解除事件，只要在前面加上“un”就可以了（unclick、undblclick）。

使用語(yǔ)法：

animate為指定圖形添加動(dòng)畫(huà)并執(zhí)行。

使用語(yǔ)法：

屬性名和屬性值就根據(jù)你想要的動(dòng)畫(huà)類(lèi)型加就ok。

time：動(dòng)畫(huà)所需時(shí)間。

type：指動(dòng)畫(huà)緩動(dòng)類(lèi)型。常用值有：

linear - 線性漸變

ease-in | easeIn | < - 由慢到快

ease-out | easeOut | > - 由快到慢

ease-in-out | easeInOut | <> - 由慢到快再到慢

back-in | backIn - 開(kāi)始時(shí)回彈

back-out | backOut - 結(jié)束時(shí)回彈

elastic - 橡皮筋

bounce - 彈跳

eg：點(diǎn)擊矩形，矩形緩緩變大。

<div id="box"></div>

<script>

var paper=Raphael("box",800,500)

let rect=paper.rect(100,100,150,100)

rect.attr({'fill':'red','stroke':'blue','stroke-width':'10'})

rect.attr('fill','pink')

rect.click(function(){

rect.animate({

"width":300,

"height":300

},1000,"bounce")

})

</script>

?

復(fù)制上邊的代碼，分別在各個(gè)瀏覽器和低版本IE瀏覽器運(yùn)行，發(fā)現(xiàn)都可以正常運(yùn)行。SVG的動(dòng)畫(huà)庫(kù)挺多了，我們介紹了拉斐爾，有興趣的小伙伴可以自行找找其他庫(kù)。

以上是“如何實(shí)現(xiàn)svg動(dòng)畫(huà)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文標(biāo)題：如何實(shí)現(xiàn)svg動(dòng)畫(huà)
網(wǎng)頁(yè)路徑：http://aaarwkj.com/article40/ispeeo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、微信公眾號(hào)、網(wǎng)站排名、企業(yè)網(wǎng)站制作、域名注冊(cè)、網(wǎng)頁(yè)設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)