This article is reprinted from juejin.cn/post/684490…

Hand in hand to teach you to use CSS skeleton animation, and understand its principle, thoroughly play.

1. The background

One day the designer came to me and said, “This wish card silly hanging there is not good, add a motion effect bai, just swing around a little, very simple!” , I thought, ok, enhance the user visual experience, open.

Ten minutes later, no, this swing from side to side is so fake, not like the effect of real stroke blowing.

Note: The speed and swing of animation are accelerated here.

.animate-1 { animation: swing1 1s ease-in-out infinite; transform: rotate(-5deg); transform-origin: top center; } @keyframes swing1 { 0% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } 100% { transform: rotate(-5deg); }}Copy the code

Think about why this swing has no soul. So pick up the work card began to swing, look at the reality of the swing effect is what, finally suddenly revealed: the original reality of the wish card (and the work card is the same) in the force, will not be the overall swing, but according to the node position into several parts associated swing, this is actually a simple bone animation! So how do you do that?

2. Bone animation

For the realization of front-end skeleton animation, you can refer to “Skeleton Animation Principle and Front-end Implementation”, which simply mentions CSS and Canvas two ways of implementation. Here will take this wish card swing animation as an example, and we study how to use CSS to achieve.

2.1 Separating Elements

To make an animation element move separately, you first need to split the element. The splitting is based on the nodes mentioned above, which are called joints in bone animation. For example, the wish card has two joints, one at the top of the card and one at the bottom of the card, so we can break down three animation elements:

2.2 Stitching Elements

<div> <! -- element 1--> <div class="item-1"></div> <! -- element 2--> <div class="item-2"></div> <! -- element 3--> <div class="item-3"></div>
</div>
Copy the code

This may seem simple, but if you don’t understand bone animation, you will fall into the pit, which is the wrong demonstration. In order to deepen our understanding, specially dug a pit 😆.

2.3 Adding dynamic effects

Based on the above, we can add different amplitude and direction swing effects for each part.

<div class="animate-2"> <! -- element 1--> <div class="item-1"></div> <! -- element 2--> <div class="item-2"></div> <! -- element 3--> <div class="item-3"></div> </div>.animate-2. Item-1 {/* Margin: -8px; margin-left: 18px; position: relative; z-index: 1; animation: swing2-1 1s ease-in-out infinite; transform: rotate(-3deg); transform-origin: top center; } .animate-2 .item-2 { animation: swing2-2 1s ease-in-out infinite; transform: rotate(5deg); transform-origin: top center; } .animate-2 .item-3 { margin-top: -5px; Margin - left: 17.5 px; position: relative; animation: swing2-3 1s ease-in-out infinite; transform: rotate(-5deg); transform-origin: top center; } @keyframes swing2-1 { 0% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } 100% { transform: rotate(-3deg); } } @keyframes swing2-2 { 0% { transform: rotate(5deg); } 50% { transform: rotate(-5deg); } 100% { transform: rotate(5deg); } } @keyframes swing2-3 { 0% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } 100% { transform: rotate(-5deg); }}Copy the code

Done 😼? Take a look at the results:

My god 😮, what is this ah!! It does seem that the wobble is more real than the whole wobble, and different elements have different wobbles and directions. But it’s out of place.

Further thinking, the problem is that each sub-animation of the bone animation is related, while each animation we designed above is independent. For example, when the red rope at the top swings, it pulls on the sign below, causing the sign below to change its position. The following brand in the position change at the same time, play their own swing animation, this is the skeleton animation!

2.4 Pit filling – understand the principle of skeleton animation from JS

Here is another recommended learning material for you: “Coding-math” series – using mathematics knowledge and canvas to create fun animation, this episode explains the principle of bone animation, the corresponding source code is here, because on YouTube, in order to avoid some students can not see the scientific Internet, so the following running action as an example, explain the JS implementation process:

  1. According to the initial state of the thigh and the current rotation speed, calculate the position of the thigh in the next frame;
  2. According to the current position of the thigh and the current speed of the leg, calculate the position of the leg in the next frame;
  3. … An infinite loop…

As can be seen from here, the position of the calf is dependent on the position of the thigh, which will not have the dislocation of the situation above us. So to put it bluntly, the characteristics of bone animation are:

The key element moves with its children, which move on their own.

So the JS implementation is to calculate the thigh position first, and then from the thigh position to calculate the leg position to achieve the connection, and how to achieve CSS?

2.5 Pure CSS implementation

Review the key point: the key element moves with the child element, and the child element moves on its own. In CSS, the key element only needs to wrap the child element around the key element. This is the cornerstone of CSS bone animation.

<div class="animate-3"> <! -- Motion module 1--> <div class="s-1">
        <div class="item-1"></div> <! -- Motion module 2--> <div class="s-2">
            <div class="item-2"></div> <! Motion module 3--> <div class="s-3">
                <div class="item-3"></div> </div> </div> </div> </div> .animate-3 .s-1 { animation: swing3-1 1s ease-in-out infinite; transform: rotate(-3deg); transform-origin: top center; } .animate-3 .s-2 { animation: swing3-2 1s ease-in-out infinite; transform: rotate(-5deg); transform-origin: top center; } .animate-3 .s-3 { animation: swing3-3 1s ease-in-out infinite; transform: rotate(-5deg); transform-origin: top center; } @keyframes swing3-1 { 0% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } 100% { transform: rotate(-3deg); } } @keyframes swing3-2 { 0% { transform: rotate(5deg); } 50% { transform: rotate(-5deg); } 100% { transform: rotate(5deg); } } @keyframes swing3-3 { 0% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } 100% { transform: rotate(-5deg); }}Copy the code

This time finally come to an end 👍. There are three elements here, and the same goes for more elements, just keep nesting.

Pay attention to [IVWEB community] public number to check the latest technology weekly, today you are better than yesterday!

3. Final dynamic effect demonstration

Careful students will find that the above skeletal animation looks awkward. In the final analysis, the direction and amplitude of the swing of each element are not well adjusted. Here is the adjusted effect, feel it with your heart:

.animate-4 .s-1 { animation: swing4-1 5s ease-in-out infinite; transform: rotate(-2deg); transform-origin: top center; } .animate-4 .s-2 { animation: swing4-2 8s ease-in-out infinite; transform: rotate3d(0, 1, 0, 20deg); transform-origin: top center; } .animate-4 .s-3 { animation: swing4-3 8s ease-in-out infinite; transform: rotate(3deg); transform-origin: top center; } @keyframes swing4-1 { 0% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } 100% { transform: rotate(-2deg); } } @keyframes swing4-2 { 0% { transform: rotate3d(0, 1, 0, 20deg); } 50% { transform: rotate3d(0, 1, 0, -20deg); } 100% { transform: rotate3d(0, 1, 0, 20deg); } } @keyframes swing4-3 { 0% { transform: rotate(3deg); } 50% { transform: rotate(-3deg); } 100% { transform: rotate(3deg); }}Copy the code

Some students feedback that the animation is a little slow, the amplitude is very small, here to explain, our page actually has a lot of wish cards, so we want to be delicate, and not eye-catching.

4. End

Pure CSS does allow you to animate bones, but only for simple scenes. In complex scenes, such as bone animation in front-end games, there are many nodes involved, although CSS can be implemented, but the efficiency is not high, so there are many community directly export the available bone animation information from design tools, and then use JS to load the running scheme, you can Google it if you are interested.

This paper mainly through simple cases to deepen our understanding of the original reason of bone animation, as for the final use of CSS or JS to achieve, is the “kill chicken with a knife” problem.

Personally, as long as the dragon slaying knife in hand, it doesn’t matter. Come on 💪, I hope you can find your dragon knife in all directions.