怎樣作一個圓環放大的動畫

最近遇到一個問題，就是怎麼作一個圓環放大的動畫，若是是用transform: scale放大的話，會致使圓環變粗，這樣看起來就很差看了，以下圖所示：

若是改爲用width/height作動畫的話，動畫看起來會有點變形，以下圖所示：

這個圓圈是用border-radius: 50%畫出來的，因此width/height變大的時候，圓圈的半徑就會變大，可是在變化的過程當中變形了。若是改爲用padding作動畫，效果也同樣，那怎麼辦呢？一個方法是把動畫時間調小一點，這樣看起來會減輕，但終究不是根本解決辦法。

我在網上搜羅一番，也沒有找到好的辦法，有的是用JS動態計算width/height，但實際上是同樣的。

最後我想到是否是能夠用SVG來作動畫呢？試了一下，果真能夠。

首先要用SVG來畫，以前是用html + css的方式，如今要改一下。以下代碼所示：

<svg width="22px" height="22px">
    <circle r="8" cx="11" cy="11" fill="#fff" stroke="#2492fc"/>
</svg>
複製代碼

circle表示畫一個圓，圓心在(11, 11)，半徑爲8px，填充白色，描邊爲#2492fc，若是你設置fill="none"，那麼填充色就爲透明色。相信不少人對SVG比較陌生，這裏我簡單介紹一下。除了circle，其它經常使用的畫圖標籤元素以下圖所示：

還有一個畫路徑的path，以下圖所示：

這個是用一個在線SVG畫圖工具來出來的，畫完後會顯示SVG代碼。path裏面可使用貝塞爾曲線，它是一種很見的曲線，在CSS的animation也會用到，用來控制動畫的速度：

貝塞爾曲線（三階）是根據四個點畫出一條光滑的曲線，這種矢量繪製曲線的方法在圖形學具備重大的意義。

SVG的基本元素就介紹到這裏，如今討論下怎麼作動畫呢？咱們應該要作半徑的動畫，以下圖所示，使用animate標籤：

其中begin指定動畫的開始時機，能夠是indefinite表示無限循環，或者指定具體的秒數，又或者是在某個動畫以後，還能夠是事件如mouseover/click/mouseout等，上面使用mouseover，即hover的時候，半徑會從小變成到大，若是但願鼠標移開後能縮回去，那麼能夠再加一個amimate，以下代碼所示：

<svg width="22px" height="22px">
    <circle r="8" cx="11" cy="11" fill="#fff" stroke="#2492fc">
        <animate attributeName="r" from="8" to="10" dur="0.3s" begin="mouseover" fill="freeze" class="magnify"/>
        <animate attributeName="r" from="10" to="8" dur="0.3s" begin="mouseout" fill="freeze" class="shrink"/>
    </circle>
</svg>複製代碼

若是是但願用JS控制的話，能夠獲取到這個animate元素，而後用它的beginElement方法開始動畫，以下代碼所示：

// 若是選中的話，就作放大的動畫
if (checked) {
    $("animate.magnify").beginElement();
}
// 若是失去選中態的話就作縮小動畫
else {
    $("animate.shrink").beginElement();
}複製代碼

這樣看起來動畫就會優雅不少，以下圖所示：

另外還能夠用CSS的animation等控制SVG作動畫。

上面只是介紹了最最簡單的SVG動畫，更多複雜的效果能夠見CSS Tricks的教程。例如能夠作形狀的動畫：

又如作一個沿着路徑運動的動畫：

本篇最主要仍是想說一件事：當你發現用html不太好作動畫時，能夠嘗試用svg作一下，幾行svg就能作出一個很順滑的動畫。例如這篇文章《Animating Border》介紹了幾種作border變粗的動畫的方法，筆者前後使用了border-width/outline/clip-path/linear-gradient/box-shadow等，最後效果其實都不太好，還不如直接用svg作一下。