anime.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的绿色的圆：

先来实现一个简单的动画效果，把圆圈从无到有放大到完整的尺寸。要实现这个效果咱们须要作两件事情：一、给圆圈一个类名；二、实例化一个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' }
    ]
  })

简单解释下这段代码，首先定义了anime的一个实例，而且经过autoplay、direction和loop定义了动画是自动播放而且是一直循环交替来执行动画。经过targets参数来制定要执行动画的元素即checkmark，从0到1进行缩放，动画时间是600毫秒，还定义了动画的运动曲线。

在动画制做中，动画执行的周期时间的选择也是一个很是须要关注的点。一方面，咱们都不但愿用户等待的过久，这样会下降整个的交互体验，使用户在交互的过程当中感到迟钝。另外一方面，咱们也不但愿用户在操做的过程当中，一切的交互行为立刻发生，这样也会显的突兀。在这个实例中，整个放大缩小的动画周期仍是有一点点长，固然在开发阶段，适当的延长点有利于调试。可是在实际生产环境中，UI动画仍是越简单越好。因此在动画开发中，就是要不断地经过调试来达到理想的状态。实际上配合一些动画曲线工具，可使动画的体验更加的舒服天然，这里能够参考下Google的一个动画曲线的指南。

使用曲线在动画开发中是一个必不可少的一部分，它可使动画的体验更加舒服天然。在实际开发中，为不一样类型的动画选择不一样的动画曲线也是作动画时，必需要注意的一点。曲线选择也受制于具体动画的场景，好比形状与形状之间的动画，抛物线运动等等，总而言之就是要复合物理运动的一个规律。在CSS3中常用的运动曲线是ease-in、ease-out和ease-in-out这三个，好比ease-out表示缓出动画，缓出使动画在开头处比线性动画更快，还会在结尾处减速。ease-out缓入动画，缓入动画开头慢结尾快，与缓出动画正好相反。通常在UI界面动画中，适合使用缓出动画即ease-out。因此，在这个复选框的动画实例中，适合使用缓出动画。

接下来是勾的动画。像勾这类的形状一般由SVG中的路径（path）来实现。具体路径的详细介绍，能够去这篇文章看看。在实际开发中，通常都是使用诸如AI或者是Inkscape等矢量设计工具来设计，而后导出SVG格式。具体到这个勾，实现起来也很是简单，三个锚点就能够实现一个勾的形状。最后设置linecap的属性的值为2.5px来实现勾的两端的圆角效果。

这里要注意的一点的是：要在整个设计过程当中，遵照必定的设计原则。好比在这个效果中，一致性就是一个重要的设计原则。若是在静态的图形中，使用了圆角，那么在动画中最好也要保持这个圆角。固然你也可使用方的角。总之，在整个过程当中，请保持UI的一致性。

导出来代码以下：

<path class="check"
      d="M9 16l5 5 9-9"
      fill="none"
      stroke="#fff"
      stroke-width="2.5"
      stroke-linecap="round">

和圆整合一下，效果以下：

如今看起来还不错，只剩下最后一步就是这个勾要作一个绘制的动画效果。使用SVG实现描边动画效果讲了不少了，能够去看看这篇文章。在anime.js中，实现一个描边绘制动画也很是简单，它提供了anime.setDashoffset这个方法来计算路径（path）的长度，使用它就能够实现一个绘制的动画效果。代码以下：

checkTimeline
  .add({ ... }) /* Previous steps */
  .add({
    targets: '.check',
    strokeDashoffset: {
      value: [anime.setDashoffset, 0],
      duration: 700,
      delay: 200,
      easing: 'easeOutQuart'
    }

仍是老套路，先选择要作动画的元素。后面是来设置路径（path）的dashoffset的值，初始的值整个路径（path）的长度，整个路径是在画布外的不可见；经过anime.setDashoffset方法，把它的值设置为0，出如今画布中，就能够实现绘制动画效果。

最后还经过设置勾的transform来移动它的位置，使它居于圆圈的中心位置。

OK，一个带有动画效果的复选框就完成了！能够发现使用anime.js来开发动画效果仍是很简单的。

本文主要是从How to create a checkmark animation with anime-js这篇文章整理而来，有删减，有疏漏或者理解不到位的地方，还请多多指教！

更多前端文章

原文地址：http://svgtrick.com/tricks/5597ff31b69ca5a6d347a42e83b16b62