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

简单解释下这段代码，首先定义了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的一致性。

导出来代码如下：