Example of the tween. js slow-motion compensation algorithm and tween. js example

Example of the tween. js slow-motion compensation algorithm and tween. js example

1. Understand tween. js

If you have understood the above, you can skip the following section. below is the Tween. the following explains how to use this Tween. First, the parameters B, c, and d (that is, the initial value, change volume, and duration) are before the start of the easing, yes. First, we will introduce the concept that the Tween class will be used when animation Flash is used for animation. It can be used to make a lot of animation effects, such as easing and spring. In Flash, tween. js can be interpreted as a compensation animation. So the question is, what is a compensation animation?

I believe that those who have learned Flash know that intercept animation is one of the most important means of flash. there are two types of Animation: animation between motion and animation between shapes, but you do not need to know so much about it in js. well, let's talk a little bit about the nonsense. Let's take a look at the definition of the compensation animation provided by Baidu Encyclopedia: The compensation Animation: During flash animation, we need to make a "compensation Animation" between the two key frames ", the animation movement can be realized. The interpolation frame between two key frames after the animation is inserted is obtained by the computer's automatic calculation.

So what is a key frame? For example, let's take a look at science. For movies that we usually watch, animations are all 24 frames, and 24 frames are a second. within the range that the human eye can capture. it can be imagined that there are 22 points between the two points to form a straight line or curve. each vertex represents a frame, which is the smallest unit in an animation. A single image can be regarded as an object (everything is an object, except for the value type. this line represents the trajectory of an object.

2. Four Parameters

1. T: current time --> indicates the first point, that is, the first frame, that is, the place where an animation starts.
2. B: beginning value --> indicates the initial value, that is, the starting amount. We usually skip the starting part when watching movies or animations, select the starting position between the first frame and the last frame, which is the initial value.
3. C: change in value --> indicates that the last frame minus the initial value is the change volume,
4. D: duration --> indicates the end of the last frame. The end of 1 s is also the end of the animation.

Tween. js usage 1. Download 2. Introduce 3. Use the tween. js syntax

Tween. Name of the slow function. Name of the slow function (t, B, c, d );

Note: When the number of start steps increases to equal to the number of end steps, the whole movement ends. note: The motion ends only when t is equal to d. If not, the motion does not stop.

3. tween File Code

/** Tween. js * t: current time (current time); * B: beginning value (Initial value); * c: change in value (change volume); * d: duration (duration ). */Var Tween = {Linear: function (t, B, c, d) {// return c * t/d + B at a constant speed;}, Quad: {// quadratic easing effect easeIn: function (t, B, c, d) {return c * (t/= d) * t + B;}, easeOut: function (t, B, c, d) {return-c * (t/= d) * (t-2) + B;}, easeInOut: function (t, B, c, d) {if (t/= d/2) <1) return c/2 * t + B; return-c/2 * (-- t) * (t-2)-1) + B ;}, Cubic: {// Cubic easing effect easeIn: function (t, B, c, d ){ Return c * (t/= d) * t + B;}, easeOut: function (t, B, c, d) {return c * (t = t/d-1) * t + 1) + B;}, easeInOut: function (t, B, c, d) {if (t/= d/2) <1) return c/2 * t + B; return c/2 * (t-= 2) * t + 2) + B ;}, Quart: {// Level 4 easing effect easeIn: function (t, B, c, d) {return c * (t/= d) * t + B;}, easeOut: function (t, B, c, d) {return-c * (t = t/d-1) * t * T-1) + B;}, easeInOut: function (t, B, c, d) {if (t/= d/2) <1) return c/2 * t + B; return-c/2 * (t-= 2) * t-2) + B ;}, Quint: {// Level 5 easing effect easeIn: function (t, B, c, d) {return c * (t/= d) * t + B;}, easeOut: function (t, B, c, d) {return c * (t = t/d-1) * t + 1) + B;}, easeInOut: function (t, B, c, d) {if (t/= d/2) <1) return C/2 * t + B; return c/2 * (t-= 2) * t + 2) + B ;}, Sine: {// Sine easing effect easeIn: function (t, B, c, d) {return-c * Math. cos (t/d * (Math. PI/2) + c + B;}, easeOut: function (t, B, c, d) {return c * Math. sin (t/d * (Math. PI/2) + B;}, easeInOut: function (t, B, c, d) {return-c/2 * (Math. cos (Math. PI * t/d)-1) + B ;}, Expo: {// exponential easing effect easeIn: function (t, B, c, d) {Return (t = 0 )? B: c * Math. pow (2, 10 * (t/d-1) + B;}, easeOut: function (t, B, c, d) {return (t = d )? B + c: c * (-Math. pow (2,-10 * t/d) + 1) + B;}, easeInOut: function (t, B, c, d) {if (t = 0) return B; if (t = d) return B + c; if (t/= d/2) <1) return c/2 * Math. pow (2, 10 * (t-1) + B; return c/2 * (-Math. pow (2,-10 * -- t) + 2) + B ;}, Circ: {// circular easing function easeIn: function (t, B, c, d) {return-c * (Math. sqrt (1-(t/= d) * t)-1) + B;}, easeOut: function (t, B, c, d) {return c * Math. s Qrt (1-(t = t/d-1) * t) + B;}, easeInOut: function (t, B, c, d) {if (t/= d/2) <1) return-c/2 * (Math. sqrt (1-t * t)-1) + B; return c/2 * (Math. sqrt (1-(t-= 2) * t) + 1) + B ;}}, Elastic: {// exponential attenuation sine curve easing function easeIn: function (t, b, c, d, a, p) {// accelerate var s; if (t = 0) return B; if (t/= d) = 1) return B + c; if (typeof p = "undefined") p = d *. 3; if (! A | a <Math. abs (c) {s = p/4; a = c;} else {s = p/(2 * Math. PI) * Math. asin (c/a);} return-(a * Math. pow (2, 10 * (t-= 1) * Math. sin (t * d-s) * (2 * Math. PI)/p) + B ;}, easeOut: function (t, B, c, d, a, p) {// slow down var s; if (t = 0) return B; if (t/= d) = 1) return B + c; if (typeof p = "undefined ") p = d *. 3; if (! A | a <Math. abs (c) {a = c; s = p/4;} else {s = p/(2 * Math. PI) * Math. asin (c/a);} return (a * Math. pow (2,-10 * t) * Math. sin (t * d-s) * (2 * Math. PI)/p) + c + B) ;}, easeInOut: function (t, B, c, d, a, p) {// accelerate first and then slow down var s; if (t = 0) return B; if (t/= d/2) = 2) return B + c; if (typeof p = "undefined ") p = d *(. 3*1.5); if (! A | a <Math. abs (c) {a = c; s = p/4;} else {s = p/(2 * Math. PI) * Math. asin (c/a);} if (t <1) return -. 5 * (a * Math. pow (2, 10 * (t-= 1) * Math. sin (t * d-s) * (2 * Math. PI)/p) + B; return a * Math. pow (2,-10 * (t-= 1) * Math. sin (t * d-s) * (2 * Math. PI)/p )*. 5 + c + B ;}}, Back: {// The cubic easing function easeIn: function (t, B, c, d, s) that exceeds the range) {if (typeof s = "undefined") s = 1.70158; return c * (t/= d) * t * (s + 1) * t-s) + B ;}, easeOut: function (t, B, c, d, s) {if (typeof s = "undefined") s = 1.70158; return c * (t = t/d-1) * t * (s + 1) * t + s) + 1) + B;}, easeInOut: function (t, B, c, d, s) {if (typeof s = "undefined") s = 1.70158; if (t/= d/2) <1) return c/2 * (t * (s * = (1.525) + 1) * t-s) + B; return c/2 * (t-= 2) * t * (s * = (1.525) + 1) * t + s) + 2) + B ;}, Bounce: {// rebound curve easing function of exponential attenuation easeIn: function (t, B, c, d) {return c-Tween. bounce. easeOut (d-t, 0, c, d) + B;}, easeOut: function (t, B, c, d) {if (t/= d) <(1/2.75) {return c * (7.5625 * t) + B;} else if (t <(2/2.75 )) {return c * (7.5625 * (t-= (1.5/2.75) * t +. 75) + B;} else if (t <(2.5/2.75) {return c * (7.5625 * (t-= (2.25/2.75) * t +. 9375) + B;} else {return c * (7.5625 * (t-= (2.625/2.75) * t +. 984375) + B ;}, easeInOut: function (t, B, c, d) {if (t <d/2) {return Tween. bounce. easeIn (t * 2, 0, c, d )*. 5 + B;} else {return Tween. bounce. easeOut (t * 2-d, 0, c, d )*. 5 + c *. 5 + B ;}}} Math. tween = Tween;

4. Example

<!DOCTYPE html>
5. Personal Experience
The advantage of tween is that the implementation of tween is based on algorithms, not the syntax of a language. Therefore, it can be used widely and benefit from one-time learning.
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.