stop motion animation

Stop motion animation

Touch him with your mouse and he won’t be able to move! !

This is stop motion animation, only keyframes are played. Just like the old movies in the past, there are only one piece of negative film, and then the light shines on the negative film and the film is moved, and the feeling of animation will come out.

Don’t ask me why the layout is so ugly

The keywords used are steps() and sprite

For example:

<span style="color: #800000;">element{<br>　　background: url() no-repeat; //the-source-of-picture<br>　　animation: spirit-animation 4s steps(9);<br>}<br>@keyframes{<br>　　from{<br>　　　　background-position: ;//the-start-of-picture<br>　　}<br>　　to{<br>　　　　background-position: ;//the-end-of-picture<br>　　}<br>}</span>

This animation will play the first keyframe and the following 9 keyframes in 4 seconds.

Let’s talk about key frames. When you are playing League of Legends (LOL) and your computer graphics card configuration is out of date, you may complain that you are showing a fucking slideshow. Each slide is a key frame. When the number is large enough within a certain period of time, you will not feel that it is a slide show (the time the light stays in the human eye is xx seconds, and when the next light enters the eye while staying on the previous beam, you will not feel it) Stuck and stopped).

The animation we usually use defaults to tween animation.

Then the question comes, what is tween animation? I have to complain about the noun experts. There are a lot of abbreviated nouns that I can’t pick out at all.

Tween animation, English tween animation, shape animation, smoothly transitions from the previous picture to the next picture, during which I can capture the picture at any time. You can't do it with key frames. He only has so many pictures that he has set.

What about the elves?

A collection of actions for an object.

that`s all.