This article was originally published on the public account CoyPan as expected

Writing in the front

In front end development, when it comes to animation, we can:

  1. Use DOM directly for animation.
  2. Use canvas to achieve animation.
  3. Use SVG for animation.
  4. Just use a GIF.
  5. Use pictures to achieve frame animation.
  6. .

The basic principle of all animations is that they are visually ‘moving’ by showing corresponding images in sequence for a short time.

This article focuses on the fourth and fifth points.

Picture frame animation

When we want to achieve the animation effect is more complex, and the development schedule is relatively tight under the circumstances, using a GIF to achieve animation is the lowest cost, the effect is also a good scheme. For example, the following animation effect:

However, if we want the animation to stop at a certain point, and then continue to play the animation from the break point after a certain period of time, we can’t do that with GIFs. There is no way to pause a GIF animation. At this point, consider using picture frame animation.

Picture frame animation can be seen as: the GIF diagram principle in front of the code to achieve a again.

The above dynamic effect, (presumably) can be divided into 100 frames, that is, 100 images, and then the code controls the display of 100 images in sequence. And you can always pause in the middle.

To save HTTP requests, combine 100 images into a Sprite image and use background-position to control which image is displayed. A good tool for generating images is GKA

I took 100 images and created a vertical Sprite.

In the code, you just need to update the BACKground-position of the DOM element to animate.

First, note that background-position sets the starting position of the background image relative to the DOM element.

Assume that both the DOM element and the image are 100 by 200 in width and height

--- css #wrapper { width: 100px; height: 200px; Background-image: url(' Sprite image.png '); background-size: 100% 10000%; Background-repeat: no-repeat; background-repeat: no-repeat; } --- js var domEl = document.querySelector('#wrapper'); var n; / / n: display Sprite diagram which images, n > = 0 && n < 100 domEl. Style. BackgroundPosition = ` 0 px ${200} - n * px `; // Note that this is negativeCopy the code

We only need to use JS to control the value of n on the line, it is easy to implement at any time, suspend the dynamic effect.

In the example above, the WIDTH and height of the DOM element are fixed. If you want to adjust the width and height of the DOM element, you need to set the ratio of the DOM element using the padding-top based on the image aspect ratio. At this point, you can’t use a specific value in background-position, you need to use percentages. Here’s one caveat:

When the background-position percentage is set, it is natural to assume that the final offset can be obtained by directly 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 % Y offset = (element height - background image height) x %Copy the code

Convert:

X % = x offset/(element width - background image width) Y % = Y offset/(element height - background image height)Copy the code

In the above example, it is:

// If the width of each small image is W and the height is h, the NTH image needs to be displayed, and there are 100 images, then
var xPercent = 0;
var yPercent = -hn / (h - 100h) * 100 =  n / 99 * 100;
domEl.style.backgroundPosition = `${xPercent}% ${yPercent}% `;
Copy the code

Finally, we can animate the image frame. Of course, if you don’t need to control the animation completely, you can use CSS instead of JS. Or just use a GIF.

CSS curve motion

Curve motion, using SVG, canvas is a good choice. However, using SVG and Canvas can be a bit more cumbersome when the path of the curve is not so strict. You can use CSS directly to achieve a “curvilinear” motion. Take a motion like a parabola, which might have something like this:

The tangent line at a point on the displacement curve is the velocity, and the velocity can be decomposed into the X-axis velocity and the Y-axis velocity. In other words, the top motion can be decomposed into the horizontal x motion and the vertical y motion. From the senses, it is not difficult to see that the motion of the X axis is roughly constant, while the motion of the Y axis is getting faster and faster.

In addition, since the motion is decomposed into two directions, two DOM animations are required 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); }}Copy the code

The two directions add up to the above effect. For the motion curves in animation properties, please refer to the following website:

cubic-bezier.com/

In order to achieve a less strict curve movement, it is also a good choice to use CSS animation directly.

Write in the back

This article summarizes the use of CSS to achieve image frame animation and curve motion examples. In the right circumstances, these two methods can be used to achieve good results. As expected.