I have previously translated a practical work with Animo.js: Using SVG to implement a checkbox with a stroke animation effect to give a preliminary introduction to animo.js animation. This time, I will present an advanced tutorial on animo.js animation, using it to achieve a more complex animation effect.
In this article, we will implement a more advanced and complex animation effect step by step, mainly to achieve this animation effect Twitter-Fav by Brian W from Dribble, to achieve this effect, we can use the screen recording tool to record the animation effect, Then according to the screen recording to analyze the animation effect of each step is how to move, which is conducive to the preparation of animation effect. Let’s take a look at the final animation:
Using the screen recording tool to analyze the animation is a great way to look at every part of the animation in detail. It is also very helpful to realize animation. If you want to see every detail of the animation in more detail, you can record the animation with a screen recording tool with millisecond accuracy so that you can see every detail.
To achieve this animation, you use a combination of HTML, CSS, SVG, and JavaScript. Of course, there is some overlap between CSS and SVG, and some effects can be implemented using either of them. Based on past development experience, simple shapes can be implemented using CSS because CSS syntax is actually simpler than SVG. SVG is more appropriate for slightly more complex scenarios, such as Bezier curves. Which technology to use will depend on the specific business scenario you are facing. For me, sometimes I use them alone, sometimes I use them together.
When implementing an animation effect, it is usually a good analysis method to break it into small animations, which can make the animation effect easier to implement. In fact, this article is also written in accordance with such ideas. For the animation we want to implement, I think we can break it down into the following parts:
1. Zoom out the grey stars
2. Zoom in on the aura
3, splash effect
4. Finally activate and magnify the yellow star
To achieve the above animation effects, use the following elements and methods:
1. Bezier curve
2, the circle
3, circles,
4. Redraw a yellow star using bezier curves
Of the four steps mentioned above, only the star shape is more complicated. This is where vector design software comes in. Design tools such as Adobe Illustrator can export shapes directly to SVG.
Once designed, you can export the SVG code directly. The exported code shows that the star is plotted by a Bezier curve.
<path class= "favorite__inactive" d= "M50.214 10.067c6.4.204 10.753 25.648 10.753 25.648s26.256 -- 1.803 27.13 2.857c S9.537 24.303 5.523 26.817c-4.015 2.515 -- 23.545 -- 14.023 -- 23.545 -- 14.023S29.333 84.493 25.633 S11.234 43.94 12.383 39.108 C1.15 -- 4.832 26.55 -- 3.393 26.55 -- 3.393s4.88 -- 25.853 11.28 25.648 the fill = "z" # dbdedd "/ >Copy the codeLet’s start with the first animation effect, which is to shrink the star. Here you can use the timeline method provided by Animo.js to manage each different animation. The code is as follows:
timeline
.add({
targets: '.favorite__inactive',
scale: {
value: [1, 0],
duration: 400,
delay: 1000,
easing: 'easeInQuad'
}
})
Copy the code
This step is very simple. Again, to facilitate animation, you need to declare a class for each node. The first animation actually uses the scale method to reduce the star value from 1 to 0. Note that the motion curve we use is easeInQuad, which gives the animation an accelerated effect.
The next animation effect is to zoom in on the aura. To do this, you need to use two circles, one inside and one outside. The outer ring is opaque to set the color, and the inner ring is transparent to show the elements inside the ring. Note here that the aura animation starts before the star shrinks. Therefore, in order for elements to appear within a halo, you need to use a mask in SVG. Learn about SVG masks here. Use a mask to show what you want to show and hide what you want to hide. The code is as follows:
<defs>
<mask id="favorite__halo-mask">
<rect width="100%" height="100%" fill="white"/>
<circle class="favorite__halo-inner" cx="50" cy="50" r="0" fill="black"></circle>
</mask>
</defs>
<circle class="favorite__halo-outer" cx="50" cy="50" r="48" fill="#feb53c" mask="url(#favorite__halo-mask)"></circle>
Copy the codeNote that the last circle element in the code, the favorite__halo-outer element, uses the mask method to refer to the defined mask by its mask ID. And the mask contains another predefined circle (the inner circle). The next step is to implement the Aura animation. In addition, there is a white rectangle inside the mask to ensure that elements outside the inner circle are not visible.
The initial state, the radius of the inner circle is 0, which is invisible. When zooming in on the ring, there is a slight delay between the two circles, with the inner circle animating 100 milliseconds later than the outer circle. This creates the animation effect of the circle getting thinner. The code is as follows:
timeline
// ...
.add({
targets: '.favorite__halo-outer',
scale: {
value: [0, 1],
duration: 400,
delay: 1400,
easing: 'easeOutQuad'
},
offset: 0
})
.add({
targets: '.favorite__halo-inner',
r: {
value: [0, 49],
duration: 300,
delay: 1500,
easing: 'easeOutQuad'
},
offset: 0
})
Copy the codeThe effect is shown below:
Then finish the splash animation.
Splash this animation effect, is generally used to emphasize and exaggerate the auxiliary animation effect. The splash here is used to knock out the user’s actions and give the user positive hints and guidance. In this way, users can be more encouraged to collect this operation, and users can also participate in the active degree.
The splash animation is made up of five small animations spreading outward in different directions. The animation is the same, but the Angle is different, so we only need to implement one Angle of the splash animation is ok, the other four can be reused directly, change the Angle is ok. Create the HTML structure first:
<div class="favorite__sprinkle"> // 1st sprinkle
<div class="favorite__sprinkle-circle"></div>
</div>
<div class="favorite__sprinkle"> // 2nd sprinkle
<div class="favorite__sprinkle-circle"></div>
</div>
...
<div class="favorite__sprinkle"> // 5th sprinkle
<div class="favorite__sprinkle-circle"></div>
</div>
Copy the codeThe base Angle of rotation for each div is 72 degrees, which can be obtained by dividing 360 by 5. This ensures that the third splash animation is at 180 degrees. Each div is rotated 72 degrees to move to its position. For example, ratate(36), ratate(108), ratate(180)… .
.favorite__sprinkle { ... transform: rotate(36deg); } .favorite__sprinkle:nth-child(2) { transform: rotate(108deg); }... .favorite__sprinkle:nth-child(5) { transform: rotate(324deg); }Copy the codeThe last step is to implement splash animation. This animation is an animation effect created by crossing elements to change their transparency and stretching and moving their positions. To do this, you can use scale directly. However, when writing this article, I made a mistake, I directly changed the height of the CSS to achieve the stretching effect, such a bad place is not very good performance, especially on the mobile terminal will feel the feeling of lag. Transform should be used for stretching because Transform can be accelerated using the GPU for better performance.
.add({
targets: '.favorite__sprinkle',
opacity: {
value: [0, 1],
...
})
.add({
targets: '.favorite__sprinkle-circle',
height: {
value: [5, 12],
...
})
.add({
targets: '.favorite__sprinkle-circle',
height: {
value: [12, 5],
...
})
.add({
targets: '.favorite__sprinkle-circle',
opacity: {
value: [1, 0],
...
})
.add({
targets: '.favorite__sprinkle-circle',
translateY: {
value: [0, -28],
...
});
Copy the code
For the next few splash effects, just reuse this directly. As for the last one to change the color of the circle, just like the first one, I’m not going to repeat it here.
One awesome animation effect is done.
Full code address, here.
This article is mainly compiled from the article How to Create a Favorite Animation with Anime-js, there are omissions, omissions or improper understanding, please give me more advice!