Using CSS to implement image frame animation and curve motion

The basic principle of all animations is to display corresponding pictures one after another in a short period of time, so that they appear to be moving visually.

This article mainly discusses points 4 and 5.

Picture frame animation

When the animation effect we want to achieve is more complex and the development schedule is tight, using a GIF to realize the animation is the lowest cost and most effective solution. For example, the following animation effect:

But if we want the animation to pause at a certain time, and then continue playing the animation from the breakpoint after a period of time, it cannot be achieved using GIF images. There is no way to pause the animation of a gif image. At this time, you can consider using picture frame animation.

Picture frame animation can be seen as: implementing the principle of GIF images with code on the front end.

The animation above can (hypothetically) be divided into 100 frames, i.e. 100 pictures, and then the code is used to control the display of the 100 pictures in sequence. And, you can pause at any time.

In order to save http requests, combine 100 pictures into a Sprite image, and then use background-position to control which picture is displayed. Recommend a very good image generation tool: GKA

I created a vertical sprite out of 100 images.

In the code, you only need to update the background-position of the DOM element to achieve the animation.

The first point to note is that background-position sets the starting position of the background image relative to the DOM element.

Assume that the width and height of the DOM element and the image are both 100 * 200

---css

#wrapper {
    width: 100px;
    height: 200px;
    background-image: url('Sprite.png');
    background-size: 100% 10000%; // There are 100 pictures, 100*100
    background-repeat: no-repeat;
}

---js

var domEl = document.querySelector('#wrapper');
var n; // n: the number of pictures to display in the Sprite chart, n >= 0 && n<100
domEl.style.backgroundPosition = `0px ${-n*200}px`; // Note that this is a negative value

We only need to use js to control the value of n, and we can easily execute and pause the animation at any time.

In the above example, the width and height of the DOM element are fixed. If it is not fixed and you want it to be adaptive, you need to set the aspect ratio of the DOM element through padding-top according to the aspect ratio of the image. At this time, in background-position, you can no longer use specific values, you need to use percentages. There is one thing to note here:

When taking the percentage value of background-position, it is natural to think that the final offset can be obtained by simply multiplying the width and height of the background image by the percentage, but this is not the case. The calculation formula is as follows:

x offset = (element width - background image width) * x percentage
y offset = (element height - background image height) * y percentage conversion:

x percentage = x offset / (element width - background image width)
y percentage = y offset / (element height - background image height)

Specifically in the above example, it is:

// Assume that the width of each small picture is w, and the height is h, and the nth picture needs to be displayed, and there are 100 pictures in total, then var xPercent = 0;
var yPercent = -hn / (h - 100h) * 100 = n / 99 * 100;
domEl.style.backgroundPosition = `${xPercent}% ${yPercent}%`;

Finally, we can realize the picture frame animation. Of course, if you don’t need to fully control the animation effect, you can use CSS directly without the help of JS. Or just use a gif animation.

css curve movement

For curved motion, using SVG or canvas is a good choice. However, when the curve path is not so strict, using SVG and canvas may be a little troublesome. You can use CSS directly to achieve a movement that looks like a curve. Taking a parabola-like motion as an example, the effect is probably like this:

The tangent line at a point on the displacement curve is the velocity, and the velocity can be decomposed into the velocity on the x-axis and the velocity on the y-axis. In other words, the above movement can be decomposed into the movement of the horizontal x-axis and the movement of the vertical y-axis. From a sensory point of view, it is not difficult to see that the movement of the x-axis is roughly uniform, while the movement of the y-axis is getting faster and faster.

In addition, since the movement is decomposed into two directions, two DOMs are required to write animations separately to achieve the final effect.

---html

<div class='x-container'>
    <div class='y-container'></div>
</div>

---css

.x-container {
    width: 50px;
    height: 50px;
    animation: xMove 2s linear;
}
.y-container {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #000;
    animation: yMove 2s cubic-bezier(.98,.03,.91,.77);
}
@keyframes xMove {
    0% {
    }
    100% {
      transform: translateX(400px);
    }
}
@keyframes yMove {
    0% {
    }
    100% {
      transform: translateY(400px);
    }
}

The combined movement in the two directions produces the effect above. For the motion curve in the animation attribute, you can refer to the following website:

https://cubic-bezier.com/

If you want to achieve a less strict curve motion, using CSS animation directly is also a good choice.