web front-end entry to the combat: Picture frame with CSS animations and curvilinear motion

In the front-end development, reference animation, we can:

1. DOM directly animate.
2. Use canvas to achieve animation.
3. Svg use to achieve animation.
4. Gif with a direct action FIG.
5. Picture frame animation using the implement.
6. ...

All the basic principles of animation are: continuous in order to show the corresponding picture in a short time, so that visually appears to 'move' of the. This paper mainly talk of 4:00 and 5:00.

Picture frame animation

When next we want to achieve more complex animation effects, and the development schedule is tight situation, with an animated gif action figure is the lowest cost to achieve good results in a solution. This animation effects such as the following:

But if we want the dynamic effect sometime pause, after time to time, and then continue to play from the breakpoint dynamic efficiency, by drawing on gif not true. gif Figure of dynamic efficiency is no way to pause . This time, consider using picture-frame animation.

Picture frame animation can be seen: the principle gif figure at the front end implemented in code again.

A movable above the efficiency (assumed) may be divided into 100, i.e., 100 images, and 100 images with the control codes sequentially displayed. Also, you can pause in the middle. To save http request, the synthesis of a sprite image 100 of FIG, then background-position to which a control display of FIG. Recommend a very good picture generation tool: GKA

I took 100 pictures generated sprite drawing a vertical.

In the code, only you need to update the background-position DOM elements can be animated.

First, a first point to note: background-position is set background image with respect to the DOM element starting position.

DOM elements and assumptions picture width and height is 100 * 200

专门建立的学习Q-q-u-n⑦⑧④-⑦⑧③-零①②  分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
--- css

#wrapper {
    width: 100px;
    height: 200px;
    background-image: url('雪碧图.png');
    background-size: 100% 10000%; // 有100张图， 100*100
    background-repeat: no-repeat;
}

--- js

var domEl = document.querySelector('#wrapper');
var n; // n：显示雪碧图中第几张图片，n >=0 && n<100
domEl.style.backgroundPosition = `0px ${-n*200}px`; // 注意这里是负值

We only need js control value of n on the line, it can be easily achieved at any execution, halting effect .

In the above example, high-dom element width is fixed, if not fixed, if desired adaptive required according to the picture aspect ratio, the aspect ratio is set dom element by padding-top. This time, in the background-position, but also can not use a specific value, and requires the use of percentages. There is a place to note:

background-position when the percentage of the value, it is natural to think that is the direct use of the background image width and height can be obtained by multiplying the percentage of the final offset, but in fact it is not. Calculated as follows:

x偏移量 = (元素宽度—背景图片的宽度)*x百分比
y偏移量 = (元素高度—背景图片的高度)*y百分比

Conversion look:

x百分比 = x偏移量 / (元素宽度 - 背景图片宽度)
y百分比 = y偏移量 / (元素高度 - 背景图片高度)

Specific examples of the above is:

// 假设每一张小图片宽度为w, 高度为h, 当前需要展示第n张图片，一共有100张图，则
var xPercent = 0;
var yPercent = -hn / (h - 100h) * 100 =  n / 99 * 100;
domEl.style.backgroundPosition = `${xPercent}% ${yPercent}%`;

In the end, we can achieve picture frame animation. Of course, if you do not completely control the animation effect, without the aid of js, css can be used directly. Gif or directly movable like FIG.

css curvilinear motion

Curvilinear motion, use svg, canvas is a very good choice. But when the path of the curve less stringent requirements, the use of svg canvas and perhaps a little trouble. You can directly use css to achieve a "curve appears to be" in motion.

A movement similar to a parabola, for example, probably is one such effect:

Is the tangential velocity of a point on the displacement curve, the speed and the speed can be decomposed into the x-axis and y-axis rate. That is, the above movement can be decomposed into a horizontal movement of the moving direction of the x axis and the vertical y-axis direction. From the senses, not difficult to see the x-axis movement is probably uniform, while the y-axis movement is growing fast.

In addition, due to the decomposition of movement in both directions has become a sport that requires two DOM, animation were written in order 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);
    }
}

Together movement in both directions, that is, the above effects.

Want to achieve a less stringent curvilinear motion, direct use css animation, it is also a good choice.

Written on the back

This paper summarizes the instances are dependent css to achieve picture frame animation and curvilinear motion.