怎样作一个圆环放大的动画

最近遇到一个问题，就是怎么作一个圆环放大的动画，若是是用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作一下。