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

<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来开发动画效果还是很简单的。

总结

以上所述是小编给大家介绍的anime.js 实现带有描边动画效果的复选框（推荐），希望对大家有所帮助。