Implementation of slow effects in javascript-javascript skills

The easing effect in javascript can be applied in many places, such as changes in the distance displacement: the scrolling of the image, the rotation switching of the focus chart, and the changes in transparency: gradually fades out. The following uses sliding from left to right of the most basic block in the container as an example. There are four common types of animation for different slow motion processing methods, introduction:
Linear: linear animation, that is, constant speed
EaseIn: the speed is from small to large, that is, Fade in.
EaseOut: The speed ranges from large to small, that is, fade out.
EaseInOut: the start time is from small to large, and the end time is from large to small, that is, fade in and out.

In fact, when it comes to easing, we have to mention Robert Penner. He invented the N-plus easing formula. For example

Let me explain:

If the current variation is set to X
T/d = X/c, so X = c * t/d, then X + B can get the current Attribute Value

Let's look at a more complex one:

This has a light effect. That is to say, when the animation starts, the value changes from small to large.
We can find that the only difference between the two is t/d and (t/= d) * t. Just now, t/d is a ratio of> = 0 & <= 1, the name is a, and (t/= d) * t is equivalent to Math. pow (a, 2 ).

Why square?

1. First a> = Math. pow (a, 2) is positive.
2. each time a function is called, the t/d ratio also increases at a constant speed. For example, the value of 1st calls is 0.1 (square 0.01), and the value of 2nd calls is 0.2 (square 0.04, the first call must be 1, right? At this time, c * 1 + B, the animation is over.
3. point 2nd proves that the smaller the ratio, the smaller the value variation. The larger the ratio, the larger the value variation. If square is not used but the power of three, then the effect is more obvious.

The style, structure, and common functions are as follows:

The Code is as follows: