How to implement animated checkboxes in anime.js

anime.js is a flexible and lightweight JavaScript animation library. This article mainly introduces animation.js to implement check boxes with stroke animation effects. Friends in need can refer to

anime.js

anime.js is a flexible and lightweight JavaScript animation library.

It works with CSS, individual transforms, SVG, DOM properties and JS objects.

Features

• Specific animation parameters

• Specific target values

• Multiple timing values

• Playback control

• Motion path

In the development of web pages or APPs, the proper use of animation can play an icing on the cake. The correct use of animation can not only help users understand the role of interaction, but also greatly improve the charm and user experience of web applications. And in current web development, animation has become a design standard and is becoming more and more important. Especially in some places where users interact, the use of animation can better give feedback to users and improve the user's operating experience.

In web development, there are many techniques to implement animation. In this article, we use anime.js, a lightweight and powerful javascript animation library, to write animation effects. It is very convenient to create and manage animations. If you are not very familiar with how to use this library, you can read an introductory article written before. This article mainly uses it to achieve the following effect:

This animation effect is very simple, mainly consisting of a circle and a white tick. This circle can be created very easily using border-radius in CSS. Using it may be simpler than using SVG to create a circle and the amount of code is smaller. However, in this effect, since the white check is implemented using SVG, the circle is also implemented using SVG. And SVG is becoming more and more popular now, and SVG is a vector and can be enlarged or reduced at will. The following is the SVG code of this circle:

<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>

The above code is concise and clear. It mainly draws a green circle with a radius of 16px:

First To implement a simple animation effect, enlarge the circle from scratch to full size. To achieve this effect, we need to do two things: 1. Give the circle a class name; 2. Instantiate an anime.js timeline and use it to combine multiple animation effects. Of course, you don't use timeline to create animation effects. You can directly use the constructor to create animation effects. However, the advantage of using timeline is that it can more conveniently manage animations, such as the connection and delay between various effects, etc. We can control the animation effects more precisely. The scaling effect here is achieved directly by scaling the SVG. The code is as follows:

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

Briefly explain this code. First, an instance of anime is defined, and it is defined through autoplay, direction and loop. The animation plays automatically and is executed in a loop. Use the targets parameter to specify the element to be animated, that is, the checkmark, which is scaled from 0 to 1. The animation time is 600 milliseconds, and the motion curve of the animation is also defined.

#In animation production, the selection of cycle time for animation execution is also a point that requires great attention. On the one hand, we don’t want users to wait too long, which will reduce the entire interactive experience and make users feel sluggish during the interaction. On the other hand, we don't want all interactions to happen immediately during the user's operation, which will also appear abrupt. In this example, the entire zoom-in and zoom-out animation cycle is still a little long. Of course, in the development stage, an appropriate extension point is helpful for debugging. But in the actual production environment, the simpler the UI animation, the better. Therefore, in animation development, it is necessary to constantly debug to achieve the ideal state. In fact, with some animation curve tools, the animation experience can be made more comfortable and natural. Here you can refer to a Google animation curve guide.

使用曲线在动画开发中是一个必不可少的一部分，它可以使动画的体验更加舒服自然。在实际开发中，为不同类型的动画选择不同的动画曲线也是做动画时，必须要注意的一点。曲线选择也受制于具体动画的场景，比如形状与形状之间的动画，抛物线运动等等，总而言之就是要复合物理运动的一个规律。在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来开发动画效果还是很简单的。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在Vue组件中实现动态添加和删除属性

在vue中处理对象属性改变视图不更新问题？

在vue2.0中不同屏幕适配px与rem转换问题

在Vue中如何实现带进度条的文件拖动上传功能

The above is the detailed content of How to implement animated checkboxes in anime.js. For more information, please follow other related articles on the PHP Chinese website!