In the development of web pages or APPS, animation can be the icing on the cake when properly used. Using animation correctly can not only help users understand the role of interaction, but also greatly enhance the charm and use experience of web applications. And in today’s web development, animation has become a design standard, becoming more and more important. Especially in some places where users interact, animation can give users better feedback and improve their operating experience.

In web development, there are many techniques for animation. In this article, we use animo.js, a lightweight and powerful javascript animation library, to write animation effects. It makes it very easy to create and manage animations. If you are not familiar with how to use this library, you can go back to writing an introductory article. This article mainly uses it to achieve the following effect:

This animation effect is very simple, mainly consists of a circle and a white tick. This circle can be easily created using border-radius in CSS. It may be simpler and less code than creating circles in SVG, but in this case, since the white tick is implemented in SVG, the circles are implemented in SVG as well. And SVG is becoming more and more popular, and SVG is a vector that can be zoomed in and out at will. Here is the SVG code for the 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>
Copy the code

The code above is clean and concise, drawing a green circle with a radius of 16px:

Start with a simple animation that takes the circle from scratch and zooming it up to full size. To do this we need to do two things: 1. Give the circle a class name; 2. Instantiate a animo.js timeline that allows you to group multiple animation effects together. Of course, you don’t use timeline to create animations, you can use constructors to create animations. However, the advantage of timeline is that it is more convenient to manage the animation, such as the connection and delay between various effects, and we can control the animation effect more finely. The scaling effect is achieved directly by scaling the SVG, as shown below:

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

A brief explanation of this code begins with the definition of an instance of Anime, and through autoplay, direction and loop the animation is auto-played and is always looped. The targets parameter is used to specify the element to be animated, namely checkmark, zooming from 0 to 1. The animation time is 600 ms. The movement curve of the animation is also defined.

In animation production, the selection of animation execution cycle time is also a very important point. On the one hand, we don’t want users to wait too long, which reduces the overall interaction experience and makes users feel sluggish in the process of interaction. On the other hand, we also do not want users in the process of operation, all the interaction immediately happened, this will also appear abrupt. In this case, the entire zooming in and out animation cycle is still a little too long, but of course during development, the appropriate extension point is helpful for debugging. But in a real production environment, UI animations should be as simple as possible. So in animation development, is to constantly through debugging to achieve the ideal state. In fact, with some animation curve tools, you can make the animation experience more comfortable and natural, here is a guide for Google animation curve.

Using curves is an essential part of animation development to make the animation experience more comfortable and natural. In practical development, choosing different animation curves for different types of animation is also a point that must be paid attention to when doing animation. Curve selection is also subject to specific animation scenarios, such as shape to shape animation, parabolic motion, etc., to compound a law of physical motion. The most commonly used motion curves in CSS3 are ease-in, ease-out, and ease-in-out. For example, ease-out means ease animation, which makes the animation faster at the beginning than linear animation and slows down at the end. Ease-out an animation that begins slowly and ends quickly, as opposed to an ease-out animation. Ease-out is a good use for UI animations. So, in the animation example of this checkbox, it is appropriate to use a cache animation.

Next is the hook animation. Shapes such as checkmarks are usually implemented by paths in SVG. For a detailed description of the path, go to this article. In real development, it is common to use vector design tools such as AI or Inkscape to design and export SVG. Specific to this hook, the implementation is also very simple, three anchor points can achieve a hook shape. Finally, set the linecap property to 2.5px for rounded corners.

One thing to note here is that certain design principles should be observed throughout the design process. In this effect, for example, consistency is an important design principle. If rounded corners are used in static graphics, it is best to keep them in animation as well. Of course, you can also use square angles. In short, keep the UI consistent throughout the process.

The exported code is as follows:

<path class="check" d="M9 16l5 5 9-9" Fill ="none" stroke="# FFF "stroke-width="2.5" stroke-linecap="round">Copy the code

When combined with roundness, the result is as follows:

Now it looks good, all that’s left is this last step to do a draw animation. We’ve talked a lot about using SVG for stroke animations, so check out this article. In animo.js, it is also very simple to implement a stroke animation, which provides a method, Animo.setdashoffset, to calculate the length of the path, which can be used to achieve a drawn 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'
    }
Copy the code

Again, select the elements you want to animate. The initial value is the length of the entire path. The entire path is invisible outside the canvas. Using the animo.setdashoffset method, it is set to 0 and appears on the canvas to achieve the animation effect.

Finally, we move it to the center of the circle by setting the transform of the hook.

OK, a checkbox with an animated effect is complete! It is easy to use animo.js for animations.

Source code address

This article is mainly compiled from the article How to Create a Checkmark Animation with Animo-js, there are omissions, omissions or improper understanding, please give me more advice!