一篇文章帶你了解SVG 動(dòng)畫元素

點(diǎn)擊上方“前端進(jìn)階學(xué)習(xí)交流”，進(jìn)行關(guān)注

回復(fù)“前端”即可獲贈(zèng)前端相關(guān)學(xué)習(xí)資料

今

日

雞

湯

SVG 動(dòng)畫元素用于為SVG圖形制作動(dòng)畫。動(dòng)畫元素最初是在同步多媒體集成語(yǔ)言（SMIL）中定義的。在動(dòng)畫中，必須指定屬性，運(yùn)動(dòng)，顏色，動(dòng)畫的開(kāi)始時(shí)間和動(dòng)畫的持續(xù)時(shí)間的開(kāi)始和結(jié)束值。

可以對(duì)SVG圖像中的形狀進(jìn)行動(dòng)畫處理。有幾種不同的動(dòng)畫SVG形狀的方法。

一、SVG動(dòng)畫

這是一個(gè)簡(jiǎn)單的SVG動(dòng)畫。

<svg xmlns="http://www.w3.org/2000/svg"    xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="10" y="10" height="110" width="110"         style="stroke:#ff0000; fill: #0000ff">
        <animateTransform            attributeName="transform"            begin="0s"            dur="20s"            type="rotate"            from="0 60 60"            to="360 60 60"            repeatCount="indefinite"        />    rect>
svg>

運(yùn)行效果：

注意元素如何在元素 內(nèi)部嵌套。正是這個(gè)元素使矩形動(dòng)畫化。

二、動(dòng)畫選項(xiàng)概述

這些SVG動(dòng)畫元素中的每一個(gè)都設(shè)置或設(shè)置SVG形狀的不同方面的動(dòng)畫。這些動(dòng)畫元素將在本文的其余部分中進(jìn)行說(shuō)明。

1. set

該set元素是SVG動(dòng)畫元素中最簡(jiǎn)單的元素。在經(jīng)過(guò)特定時(shí)間間隔后，它只是將屬性設(shè)置為特定值。因此，形狀不會(huì)連續(xù)進(jìn)行動(dòng)畫處理，而只是更改屬性值一次。

這是一個(gè)元素示例：

<svg width="500"  height="100">  <circle cx="30" cy="30" r="25" style="stroke: none; fill: #0000ff;">    <set attributeName="r" attributeType="XML"         to="100"         begin="5s"  />
circle>svg>

注:

元素在特定時(shí)間設(shè)置屬性的值。要設(shè)置的屬性名稱在attributeName屬性中指定。將其設(shè)置為的值在to屬性中指定。設(shè)置屬性值的時(shí)間在begin屬性中指定。

運(yùn)行效果：（r在5秒鐘后將屬性設(shè)置為100）：

2. attributeType

可以設(shè)置形狀的CSS屬性的動(dòng)畫。如果這樣做，則需要將attributeType設(shè)置為CSS。如果不提供attributeType屬性，則瀏覽器將嘗試猜測(cè)要制作動(dòng)畫的屬性是XML屬性還是CSS屬性。

3. animate

animate元素用于為SVG形狀的屬性設(shè)置動(dòng)畫。可以將animate元素嵌套在要應(yīng)用的形狀內(nèi)。

示例

<svg width="500"  height="100">  <circle cx="30" cy="30" r="25" style="stroke: none; fill: #0000ff;">    <animate attributeName="cx" attributeType="XML"             from="30"  to="470"             begin="0s" dur="5s"             fill="remove" repeatCount="indefinite"/>  circle>svg>

運(yùn)行效果：

解析:

此示例將元素的cx屬性從值30（“from”屬性）設(shè)置為值479（“to”屬性）的動(dòng)畫。動(dòng)畫從0秒開(kāi)始（“begin”屬性），持續(xù)時(shí)間為5秒（“dur”屬性）。

動(dòng)畫完成后，動(dòng)畫屬性將設(shè)置回其原始值（fill=“remove”屬性設(shè)置）。如果希望動(dòng)畫屬性保持動(dòng)畫的“到”值(to-value)，請(qǐng)將“fill ”屬性設(shè)定為“freeze”。動(dòng)畫無(wú)限期重復(fù)（“repeatCount”屬性）。

4. animateTransform

元素不能做到這一點(diǎn)，元素可以為形狀的Transform屬性設(shè)置動(dòng)畫。

例：

<svg width="500" height="100">            <rect x="20" y="20" width="100" height="40" style="stroke: #ff00ff; fill:none;">                <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" begin="0s" dur="10s"                 repeatCount="indefinite" />            rect>        svg>

運(yùn)行效果：

解析：

例中對(duì)嵌套transform其中的元素的屬性進(jìn)行動(dòng)畫處理。該type屬性設(shè)置為rotate（旋轉(zhuǎn)變換功能），表示動(dòng)畫變換將是旋轉(zhuǎn)。在from和to屬性設(shè)定的參數(shù)進(jìn)行動(dòng)畫，并傳遞給rotate函數(shù)。本示例圍繞點(diǎn)100,100從0度旋轉(zhuǎn)到360度。

使正方形的比例動(dòng)畫化。

示例

<svg width="500" height="200">            <rect x="20" y="20" width="40" height="40" style="stroke: #FF0000; fill: none;">                <animateTransform attributeName="transform" type="scale" from="1 1" to="2 3" begin="0s" dur="10s" repeatCount="indefinite">        animateTransform>            rect>svg>

運(yùn)行效果：

注：

from 和 to 屬性包含通常作為參數(shù)傳遞給scale()轉(zhuǎn)換函數(shù)的值。

三、總結(jié)

本文基于HTML基礎(chǔ)，介紹了SVG中元素。對(duì)每一種動(dòng)畫的效果進(jìn)行詳細(xì)講解。每一種動(dòng)畫中都采用靜態(tài)圖解析的方式來(lái)呈現(xiàn)動(dòng)態(tài)運(yùn)用的效果。通過(guò)具體的案例分析，能夠讓讀者更好的理解。

歡迎大家積極嘗試，有時(shí)候看到別人實(shí)現(xiàn)起來(lái)很簡(jiǎn)單，但是到自己動(dòng)手實(shí)現(xiàn)的時(shí)候，總會(huì)有各種各樣的問(wèn)題，切勿眼高手低，勤動(dòng)手，才可以理解的更加深刻。

代碼很簡(jiǎn)單，希望對(duì)你學(xué)習(xí)有幫助。

-------------------?End?-------------------

往期精彩文章推薦：

• 一篇文章帶你了解JavaScript作用域

• 一篇文章帶你了解JavaScript switch

• 一篇文章帶你了解JavaScript變量
  

歡迎大家點(diǎn)贊，留言，轉(zhuǎn)發(fā)，轉(zhuǎn)載，感謝大家的相伴與支持

想加入前端學(xué)習(xí)群請(qǐng)?jiān)诤笈_(tái)回復(fù)【入群】

萬(wàn)水千山總是情，點(diǎn)個(gè)【在看】行不行