In fact, I know the Tween algorithm exists, but I rarely use it, let alone understand it. Generally, I use its time-function to easily make various motion types when writing CSS. Because did not go to figure out the principle all the time, comes a demand to have to toss over, feels uncomfortable. So we have a deep understanding of the realization of the slow down formula. In fact, the principle is very simple, and android property animation interpolation principle, performance is different.

The code can be found at 🔗 in jquery.easing

Argument parsing

Let’s start with the four parameters:

  • Timestamp, the time elapsed between the animation execution and the current frame
  • Begining, starting value
  • Change C
  • Duration, total time of the animation

Mathematical principles

First of all, it should be clear that the animation is actually a frame animation. Each frame takes the same time, but because the displacement of the previous frame is different from that of the next frame, the speed is visually different. If the displacement is small, the speed will be slower.

Here is a brief analysis of the principle, step by step:

  1. The change of animation execution time can be expressed as 0-> D, and when constant D is extracted, it becomes D *(0 ->1), and the change part is (0->1), which is denoted as X-axis change.

  2. The total change amount and the starting value of the animation are known, and the change can be expressed as B -> B + C, which can be extracted as B + C *(0 ->1), and the change part is also (0->1), denoted as change in Y-axis.

  3. T is used to indicate the current time point of the event, which is changed to indicate the percentage of animation completion, that is, T /d;

  4. The X-axis interval is [0,1], and the Y-axis interval is [0,1]. The linear relation is y=x. The linear relation is y=x.

  5. Then let’s see what nonlinear relations can be constructed and give the expressions of functional relations:

    1. A large number of Easein effects can be constructed by using the exponential function (x ^ n), and then the corresponding Easeout effects can be constructed according to their axisymmetric or center pair of rollover and displacement:

    1. Use square root (math.sqRT) or cube root to implement this nonlinear relationship:

    1. The sin or cos function can be constructed by adjusting the parameters in two ways:

      • Easein: y = 1 – cos PI (0.5 x)
      • Easeout: y = sin (PI 0.5 x)

    2. By a power or logarithm function:

      • Easein: y= 2^(x=0, y=0)
      • Easeout: y=1 -2^(-10x)

    3. The effect can also be stacked, divided by two, to create a spring effect.

  6. Here’s what the easing formula uses:

    • Sine means implemented by trigonometric functions
    • Cubic is the third power, Quart is the fourth power, and Quint is the fifth power
    • Circ is the square root (math.sqit), Expo is the power function math.pow)
    • Elastic is combining trig functions with cube roots
    • Back introduces the constant 1.70158

Code implementation

The principle is almost done, so let’s look at the implementation, the following 1 ^ 2 Quad as an example to implement, the rest of the same.

The first is to implement easein:

The function is y = x*x.

So it is implemented as:

function easeInQuad(t,b,c,d){
    var x = t/d; / / x value
    var y = x*x; / / y value
    return b+c*y; // insert the original formula
}
Copy the code

Then let’s look at easeout, which changes the image type (lazy, do not want to draw) :

The function expression is: y = -xx+2x;

So it is implemented as:

function easeOutQuad(t,b,c,d){
    var x = t/d;         / / x value
    var y = -x*x + 2*x;  / / y value
    return b+c*y;        // insert the original formula
}
Copy the code

Now let’s take a look at the implementation of EaseInOut. Its implementation is to use Easein to complete half of the journey, and use easeOut to complete the other half of the journey. So it’s going to be pretty straightforward to use these two formulas.

function easeInoutQuad(t,b,c,d){
    if(t<d/2) {// The first half of the time
      return easeInQuad(t,b,c/2,d/2);// Divide both change and time by 2
    }else{
      var t1 = t-d/2; // Note that the first half of the time is subtracted
      var b1 = b + c/2;// The initial amount is added to what has already been done in the first half
      return easeOutQuad(t1,b1,c/2,d/2);// Divide both change and time by 2}}Copy the code

Jquery.easing. Js is also code optimized and not as easy to understand. I’m just writing it this way to make sense of it

The other principles are pretty much the same, so I’m not going to analyze them all here, but the application of mathematical knowledge. Finally come to this website have a look at the various implementation effect: www.cnblogs.com/bluedream20…