anime.js 实现带有描边动画效果的复选框（推荐）

anime.js

anime.js是一个灵活的轻型JavaScript动画库。

它与CSS，个别变换，SVG，DOM属性和JS对象。

特征

•  具体的动画参数
•  具体目标值
•  多个定时值
•  播放控制
•  运动路径

在网页或者是APP的开发中，动画运用得当可以起到锦上添花的作用。正确使用动画，不但可以有助于用户理解交互的作用，还可以大大提高网页应用的魅力和使用体验。并且在现在的网页开发中，动画已经成为了一个设计的标准，变得越来越重要。特别是在一些和用户交互的地方，使用动画能更好的給用户以反馈，提升用户的操作体验。

在网页开发中，有很多种技术来实现动画。在这篇文章中，我们使用anime.js这个轻量强大的javascript动画库来编写动画效果。使用它可以非常方便创建和管理动画。如果你还不是很熟悉这个库的使用方法，可以去看看以前写一篇入门文章。这篇文章主要是使用它来实现下面这个效果：

这个动画效果非常简单，主要是有一个圆圈和一个白色的勾组成。使用CSS中的border-radius可以非常方便的创建这个圆。使用它可能比使用SVG来创建圆还要简单些并且代码量也少点，不过在这个效果中，由于那个白色的勾要用到SVG来实现，所以圆圈也使用SVG来实现。而且SVG现在变得越来越流行了，而且SVG是矢量可以随意放大缩小。下面就是这个圆圈的SVG代码：

<svg class="checkmark"
  xmlns="http://www.w3.org/2000/svg"
  width="32"
  height="32"
  viewBox="0 0 32 32">
 <circle class="circle"
   cx="16"
   cy="16"
   r="16"
   fill="#0c3"/>
</svg>

上面的代码简洁明了，主要是绘制了一个半径为16px的绿色的圆：

先来实现一个简单的动画效果，把圆圈从无到有放大到完整的尺寸。要实现这个效果我们需要做两件事情：1、给圆圈一个类名；2、实例化一个anime.js的timeline，使用它来可以把多个动画效果组合在一起。当然你也不用timeline来创建动画效果，可以直接使用构造函数创建动画效果。不过使用timeline的好处是，可以更加方便的管理动画，比如各个效果之间的衔接和延迟等，我们可以更精细的控制动画效果。这里的缩放效果，直接是缩放这个SVG来实现的，代码如下所示：

var checkTimeline = anime.timeline({ autoplay: true, direction: 'alternate', loop: true });
checkTimeline
 .add({
 targets: '.checkmark',
 scale: [
  { value: [0, 1], duration: 600, easing: 'easeOutQuad' }
 ]
 })