anime.js Implementation of Checkbox with Outline Animation Effect (Recommended)

anime.js

anime.js is a flexible lightweight JavaScript animation library.

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

Features

• 　Specific animation parameters
• 　Specific target values
• 　Multiple timing values
• 　Playback Control
• 　Motion Path

Proper use of animation in web or APP development can add luster to the work. Proper use of animation not only helps users understand the interaction, but also greatly improves the charm and user experience of web applications. Moreover, in modern web development, animation has become a design standard and is becoming more and more important. Especially in places where users interact, using animation can better give users feedback and improve the user experience.

There are many technologies to implement animation in web development. In this article, we use the lightweight and powerful JavaScript animation library anime.js to write animation effects. It can be very convenient to create and manage animations. If you are not very familiar with the usage of this library, you can go and read an introductory article. This article mainly uses it to achieve the following effect:

This animation effect is very simple, mainly consisting of a circle and a white checkmark. It uses the border-The radius can be very convenient to create this circle. Using it may be simpler than using SVG to create a circle, and the amount of code is also less. However, in this effect, since the white checkmark needs to be implemented using SVG, the circle also uses SVG to implement. Moreover, SVG is becoming more and more popular, and it is a vector that can be freely scaled up and down. Below is the SVG code for 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, mainly drawing a circle with a radius of16px green circle:

First, implement a simple animation effect to scale the circle from non-existent to full size. To achieve this effect, we need to do two things:1To give the circle a class name;2To instantiate an anime.js timeline, use it to combine multiple animation effects together. Of course, you don't have to 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 manage animations more conveniently, such as the connection and delay between various effects, allowing us to control the animation effects more finely. Here, the scaling effect is directly realized by scaling the SVG, as shown in the code below:

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

A simple explanation of this code, first defines an instance of anime, and defines the animation as automatically played and continuously alternating in execution through autoplay, direction, and loop. The targets parameter is used to specify the elements to be animated, i.e., checkmark, from 0 to1To perform scaling, the animation time is600 milliseconds, and also defines the animation motion curve.

In animation production, the selection of the cycle time of animation execution is also a very important point to pay attention to. On the one hand, we all hope that users will not have to wait too long, as this will reduce the overall interactive experience and make users feel slow during the interaction process. On the other hand, we also do not want all interactive behaviors to occur immediately during the operation process, as this will also seem abrupt. In this instance, the entire zooming and scaling animation cycle is still a bit long, of course, during the development phase, extending it a bit is conducive to debugging. However, in the actual production environment, UI animation is still better to be as simple as possible. Therefore, in animation development, it is necessary to continuously debug to achieve the ideal state. In fact, with the help of some animation curve tools, the animation experience can be made more comfortable and natural. Here, you can refer to Google's animation curve guide.

Using curves is an indispensable part of animation development, making the animation experience more comfortable and natural. In actual development, it is also necessary to pay attention to choosing different animation curves for different types of animations, which is an important point to note when making animations. The curve selection is also constrained by the specific scene of the animation, such as animations between shapes, parabolic motion, etc. In short, it should conform to the laws of physical motion. In CSS3Among the commonly used motion curves are ease-in, ease-out and ease-in-out these three, such as ease-out, which means that the animation starts faster at the beginning than a linear animation and slows down at the end. ease-out, which means an ease-out animation, where the animation starts slower and ends faster than a linear animation. Generally, in UI interface animations, it is suitable to use an ease-out animation, that is, ease-out. Therefore, it is suitable to use an ease-out animation in this animated checkbox example.

Next is the animation of the hook. Shapes like hooks are usually implemented by paths in SVG. For a detailed introduction to the specific path, you can go toTake a look at this article. In actual development, it is generally the case that vector design tools such as AI or Inkscape are used to design, and then exported in SVG format. Specifically for this hook, it is very simple to implement, with three anchor points to create the shape of a hook. Finally, set the value of the linecap attribute to2.5px to achieve the rounded corner effect at both ends of the hook.

One point to note here is that throughout the design process, it is important to adhere to certain design principles. For example, in this effect, consistency is an important design principle. If rounded corners are used in static graphics, it is best to maintain this rounded corner in the animation. Of course, you can also use square corners. In short, throughout the process, please maintain UI consistency.

The code exported is as follows:

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

Integrate it with a circle, and the effect is as follows:

It looks pretty good now, and the last step is to create an animation effect for this hook. There has been a lot of talk about implementing stroke animation effects with SVG. In anime.js, creating a stroke drawing animation is also very simple, as it provides the anime.setDashoffset method to calculate the length of the path (path), which can be used to achieve a drawing animation effect. The code is as follows:

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

It's the same old routine, first select the element to be animated. Next is to set the dashoffset value of the path. The initial value is the length of the entire path, which is invisible outside the canvas; by setting the value to 0 with the anime.setDashoffset method, it can appear on the canvas and realize the drawing animation effect.

Finally, the position of the tick is moved by setting the transform of the tick, so that it is in the center of the circle.

OK, a checkbox with animation effect is completed! It can be found that using anime.js to develop animation effects is still very simple.

Summary

The above is what the editor introduces to everyone about the anime.js implementation of checkboxes with border animation effects (recommended), hoping it will be helpful to everyone.

Declaration: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#w3Please report violations by email to codebox.com (replace # with @) and provide relevant evidence. Once verified, this site will immediately delete the infringing content.