Recently want to write the idea of small book more and more heavy, until someone told me…. I didn’t have enough grades, I didn’t have enough digging power, I didn’t read enough. Okay, I cried



I asked, and it looks like they’re not giving discounts on student IDS, which is brutal.



Basic slow

The basic slow motion usually has uniform motion, but also can “slow in “” slow out”, of course, also includes sinusoidal, jump and other effects.

The function of slow motion can move an object to another place and place it in space. X1(x,y) and X2 (x,y) can be compared. In slow motion, there are several important elements

  1. Starting point and target point

  2. ratio

In general, we can summarize these two, because the whole calculation process is to maintain these two elements of data. Let’s look at a piece of code

var easing = 0.5    // Proportional coefficient
var ori = new Vector(0.0),  // Start position
    target = new Vector(20.20), / / target
    ball.pos = new Vector(0.0)
​
var to = ori.subtrac(target).dot(easing)    // increment (20-0, 20-0)*0.5 = (10,10)
ball.pos.add(to)  Copy the code

So that means that every update is going to increase by 5 increments, two arrivals, and that’s the principle of constant slow motion, a little bit of work

var easing = 0.5    // Proportional coefficient
var ball.pos = new Vector(0.0), // Start position
    target = new Vector(20.20), / / target
​
var to = ball.pos.subtrac(target).dot(easing)   // Increment (20-x, 20-y)*0.5 = (x1, y1)
ball.pos.add(to)    Copy the code

We will find that the POS of the ball will be updated every time when it is updated, which results in a different value every time when calculating the increment. This also makes the ball move differently every time and slower and slower, doesn’t it feel like it has been slowed down, but it still feels different. Take a look at someone else’s code.

slow

There are many elements that need to be maintained here. It is also a few parameters common to most of the current slow algorithm. As for the few, I don’t know, AND I don’t dare to ask

  • T :time: indicates the elapsed time

  • B :beforeMove: start position

  • C :changeDistance: the distance between the starting position and the target position, that is, a change in the distance

  • D :duration: We ask how long it takes for the object to move from its starting position to its target position

function easeIn (t,b,c,d){
   return c*t/d + b;
}Copy the code

If you look at this code, you multiply c times the ratio of this time t to the total time d, and you get the distance moved, plus the initial position, which is the value of the next slow, isn’t that much clearer

And since y is getting bigger and bigger, it’s going to get bigger and bigger next time, and you’re going to get a bigger and bigger displacement, you’re going to slow in, you’re going to slow out and you’re just going to return a smaller and smaller value

function easeOut (t, b, c, d){
        return -c*t/d + b;
    }Copy the code

The effect of slow motion is acting on speed, so there are many mathematical models that can be used to deal with the effect of slow motion

Linear: no easing effect, f(t) = t;

Quadratic: slow Quadratic, f(t) = t^2; Quadratic: slow Quadratic, F (t) = t^2;

Cubic: Cubic slow, f(t) = t^3;

Quartic: slow motion of the fourth power, f(t) = t^4;

Quintic: easing to the fifth power, f(t) = t^5;

Sinusoidal: slow motion of sine curve, f(t) = sin(t);

Exponential curve, f(t) = 2^t;

Circular: slow motion of Circular curve, f(t) = SQRT (1 — t^2);


Maybe you’ll find that these formulas are manipulating t. Do you think I’m Doctor Strange?

With time and displacement, isn’t it speed….



All right, next point. I’m in a hurry to get some traction

Welcome everyone to put forward the animation and interaction problems encountered in the development, I will immediately answer, including implementation and algorithm, I will reply to the first time ~

You are also welcome to coin feed and introduce the rich woman