VG 動(dòng)畫(huà)有很多種實(shí)現(xiàn)方法，也有很大SVG動(dòng)畫(huà)庫(kù)，現(xiàn)在我們就來(lái)介紹 svg動(dòng)畫(huà)實(shí)現(xiàn)方法都有哪些？

一、SVG 的 animation

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

• set
• animate
• animateColor
• animateTransform
• animateMotion

1.1、set

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

使用語(yǔ)法：

<set attributeName="" attributeType="" to="" begin="" />

• attributeName ：是要改變的元素屬性名稱。
• 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>

1.2、animate

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

使用語(yǔ)法：

<animate 
 attributeName="r" 
 from="200" to="50" 
 begin="4s" dur="2s" 
 repeatCount="2"
></animate>

• 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>

1.3、animateColor

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

1.4、animateTransform

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

使用語(yǔ)法：

<animateTransform attributeName="transform"  type="scale" 
 from="1.5" to="0" 
 begin="2s"  dur="3s" 
 repeatCount="indefinite"></animateTransform>

• repeatCount：重復(fù)次數(shù)，設(shè)置為 indefinite 表示無(wú)限循環(huán)，一直執(zhí)行。
• type：添加 transform 變換類型。
• 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>

1.5、animateMotion

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

使用語(yǔ)法：

<animateMotion 
 path="M 0 0 L 320 320" 
begin="4s" dur="2s"></animateMotion>

• path：定義路徑，使用語(yǔ)法與《HTML5(八)——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í)，上邊的四種元素可以互相組合，同類型的動(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，類似于jquery，本質(zhì)還是一個(gè)javascript庫(kù)，使用簡(jiǎn)單，容易上手。

使用之前需要先引入Raphael.js庫(kù)文件。cdn的地址為：https://cdn.bootcdn.net/ajax/libs/raphael/2.3.0/raphael.js

3.1、創(chuàng)建畫(huà)布

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à)布的寬度和高度。

3.2、繪制圖形

畫(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è)三角形。

let sj = paper.path("M 0,0 L100,100 L100,0 'Z'")

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

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

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

3.3、設(shè)置屬性

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

使用語(yǔ)法：circle.attr({"屬性名","屬性值","屬性名","屬性值",...})

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

注意：如果只設(shè)置一個(gè)屬性時(shí)，可以省略‘{}’。如：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>

3.4、添加事件

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

使用語(yǔ)法：

obj.click(function(){
 //需要操作的內(nèi)容
})

3.5、添加動(dòng)畫(huà)

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

使用語(yǔ)法：

obj.animate({
 "屬性名1":屬性值1,
 "屬性名2":屬性值2,
  ...
},time,type)

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

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

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

• 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ù)。

人可能會(huì)疑惑，我為什么專門(mén)用一節(jié)內(nèi)容來(lái)說(shuō)邊框和圓角。其實(shí)，不為別的，只為它們?cè)陂_(kāi)發(fā)中，在Web系統(tǒng)中，在手機(jī)頁(yè)面中，太常用了。有邊框的頁(yè)面，讓人耳目一新，一目了然；有圓角的內(nèi)容，讓人賞心悅目，心曠神怡。說(shuō)的有點(diǎn)夸張了，就這么著吧。

邊框(border)一般為長(zhǎng)方形形狀，有上下左右四條邊，CSS邊框?qū)傩栽试S你指定一個(gè)元素邊框的樣式和顏色。CSS的圓角(border-radius)方法，可給任何元素制作 "圓角"效果。

11.1 邊框逼格

在CSS中，你可以通過(guò)border和其延伸的，如border-style，來(lái)實(shí)現(xiàn)邊框的效果。上邊框相關(guān)的有border-top-style樣式、border-top-color顏色、border-top-width寬度和組合了它們的border-top。下、左右邊框類似，換成對(duì)應(yīng)的單詞即可。

邊框樣式(border-style)常用的有dotted(點(diǎn)線)、dashed(虛線)、solid(實(shí)線)、double(雙邊框)這四種，不常用的有g(shù)roove(3D溝槽)、ridge(3D脊邊)、inset(3D嵌入)和outset(3D突出)。

/* --------在樣式表文件中---------- */
/*4條邊框一起設(shè)置*/
.four-border {
    width: 800px;
    border: 2px solid darkgreen;;
}

/*四條邊框可個(gè)性化*/
.four-style {
    width: 800px;
    /* 上、右、下、左*/
    border-width: 1px 2px 3px 4px;
    /*上、右左、下*/
    border-style: solid dashed double;
    /*上下和右左*/
    border-color: darkgreen coral;
}

/*單條邊框設(shè)置*/
.one-style {
    width: 800px;
    border-top: 1px groove orangered;
    border-bottom-width: 5px;
    border-bottom-style: inset;
    border-bottom-color: darkgreen;
}

HTML文件內(nèi)容

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>邊框逼格</title>
    <link rel="stylesheet" type="text/css" href="ys2.css"/>
</head>
<body>
<br/><br/>
<div class="four-border">
    border統(tǒng)一設(shè)置四條邊框<br/>
    順序?yàn)椋篵order-width、border-style和border-color.
</div>
<br/><br/>
<div class="four-style">
    四條邊框一起設(shè)置，風(fēng)格可不同<br/>
    順序?yàn)?上、右、下、左。<br/>
    1. 只有一個(gè)值(如：border-width:2px)：表示4條邊框全部一樣；<br/>
    2. 有兩個(gè)值(如：border-width:2px 3px)：表示上下和右左;<br/>
    3. 有三個(gè)值(如：border-width:2px 3px 1px)：表示上、右左、下;<br/>
    4. 有四個(gè)值(如：border-width:2px 3px 1px 5px):表示上、右、下、左。
</div>
<br/><br/>
<div class="one-style">
    單獨(dú)一天邊框進(jìn)行設(shè)置<br/>
    border-top：頂部寬度、樣式、顏色，一起設(shè)置<br/>
    border-top-width:上邊框?qū)挾龋?lt;br/>
    border-top-style:上邊框樣式；<br/>
    border-top-color:上邊框顏色。
    <br/>
</div>
</body>
</html>

輸出結(jié)果

11.2 圓角風(fēng)格

使用CSS的border-radius 屬性，你可以給任何元素制作 "圓角"。 border-radius統(tǒng)一指定4個(gè)圓角，順序?yàn)樽笊稀⒂疑稀⒂蚁潞妥笙隆Ｈ绻囟ㄖ付硞€(gè)角的話，用border-top-left-radius等方式即可。

在樣式表ys2.css文中的內(nèi)容

/*4個(gè)角統(tǒng)一指定*/
.four-radius {
    width: 800px;
    line-height: 40px;
    background: #8AC007;
    border-radius: 15px;
    vertical-align: middle;
    text-align: center;
}

/*單獨(dú)指定一個(gè)角*/
.one-radius {
    width: 800px;
    line-height: 40px;
    background: #8AC007;
    border-top-left-radius: 15px;
    border-bottom-right-radius: 50px;
    vertical-align: middle;
    text-align: center;
}

在HTML文件中的內(nèi)容

<br/><br/>
<div class="four-radius">
    統(tǒng)一設(shè)置4個(gè)圓角<br/>
    一個(gè)值： 四個(gè)圓角值相同;<br/>
    兩個(gè)值: 左上角與右下角，右上角與左下角;<br/>
    三個(gè)值: 左上角, 右上角和左下角，右下角;<br/>
    四個(gè)值: 左上角，右上角，右下角，左下角。
</div>
<br/>
<div class="one-radius">
    單獨(dú)指定某個(gè)角<br/>
    border-top-left-radius：左上角;<br/>
    border-top-right-radius：右上角;<br/>
    border-bottom-right-radius：右下角;<br/>
    border-bottom-left-radius：左下角。
</div>

輸出結(jié)果

11.3 圓角邊框

不要重復(fù)造輪子，所以好多程序員一遇到問(wèn)題，就喜歡搜索，我也是，哈哈哈~。CSS有指定邊框的屬性，也有圓角的屬性，將其放在一起，是不是就可以實(shí)現(xiàn)圓角邊框?答案毋庸置疑，答案是肯定的。

在樣式表ys2.css文件中的內(nèi)容

/*圓角邊框*/
.corners {
    border-radius: 50px;
    border: 3px solid #8AC007;
    padding: 50px;
    width: 720px;
    line-height: 50px;
    vertical-align: middle;
    text-align: center;
}

在HTML文件中的內(nèi)容

<div class="corners">
    邊框?qū)傩院蛨A角屬性，組合成圓角邊框
</div>

輸出結(jié)果

好了，有關(guān)CSS的圓角邊框內(nèi)容，老陳講完了，如果覺(jué)得對(duì)你有所幫助，希望老鐵能轉(zhuǎn)發(fā)點(diǎn)贊，讓更多的人看到這篇文章。你的轉(zhuǎn)發(fā)和點(diǎn)贊，就是對(duì)老陳繼續(xù)創(chuàng)作和分享最大的鼓勵(lì)。

一個(gè)當(dāng)了10年技術(shù)總監(jiān)的老家伙，分享多年的編程經(jīng)驗(yàn)。想學(xué)編程的朋友，可關(guān)注：老陳說(shuō)編程。分享Python，前端(小程序)、App和嵌入式方面的干貨。關(guān)注我，沒(méi)錯(cuò)的。

#前端##HTML5##CSS##程序員##Web#