Using tween to implement the module rebound animation effect with native JS

Recently, there is a need, when the screen down a certain pixel, there will be a hidden module immediately revealed, upward movement with a rebound effect. And then when the screen rolls back, the module can return to the original path.

In fact, this effect CSS3 can be easily implemented, but the company requires the minimum compatibility IE7, can only be said to be missed

Later, animate with JQ was able to do it, but did not know what to do when it was rolled back with a delay that could not be hidden for several seconds.

The ultimate use of tween can be achieved perfectly, can only say that the original JS powerful.

Tween is actually a library of functions, which are all formulas, such as the arithmetic formula of the motion trajectory.

Achieve the effect: actually is a small square to play and play.

First give a container div

<div id= "Div1" ></div>

Set style

#div1 {position:absolute;left:100px;top:100px;height:100px;width:100px;background:red;}

Insert tween, followed by tween complete code. can choose to ignore.

<script src= "Js/tween.js" ></script>

Finally use native JS

The code can be copied completely.

var Odiv=document.getelementbyid ("Div1"), var move=function (obj, Attrs, duration, FX, callback) {//Motion object, properties, duration, motion mode,        callback function Clearinterval (Obj.itimer);        var startTime = Date.now ();        var startTime = new Date ();        var j = {};            for (Var attr in attrs) {j[attr] = {};            if (attr = = ' opacity ') {j[attr].b = Math.Round (CSS (obj, attr) * 100);            } else {j[attr].b = parseint (CSS (obj, attr));        } J[ATTR].C = attrs[attr]-j[attr].b;        } var d = Duration;            Obj.itimer = setinterval (function () {var t = new Date ()-startTime;                if (T >= d) {t = D;            Clearinterval (Obj.itimer);                } for (Var attr in attrs) {var v = tween[fx] (t, j[attr].b, J[ATTR].C, D);                    if (attr = = ' opacity ') {obj.style.opacity = v/100; Obj.style.filter = ' Alpha (opacity= ' +v+ ') ';                } else {Obj.style[attr] = v + ' px ';            }} if (t = = d) {callback && callback ();    }}, 16);    }, Css=function (obj, attr) {if (Obj.currentstyle) {return obj.currentstyle[attr];    } else {return getComputedStyle (obj, false) [attr]; }}

Finally, referencing this function

   Move (odiv,{"left": $, "top": 200},1000, "backout")

Note that several parameters of the move function represent the meaning.

Motion Object, property, duration, motion mode, callback function
1, the Moving object refers to the front of the DIV container
2, the attribute, is you want to let this div movement go to.
3. Duration, how long do you want this movement to last?
4, the movement, you can go to tween code inside to find, there are a good variety of sports, you can try each, choose a suitable for their own needs, such as rebound, uniform, such as hard to play.
5, callback function, can not.



Finally, I put tween on the internet can also search  , directly through

/** t:time Time * b:begin Start value * C:count Total Motion Value * d:duration duration * *///tween.linear (); var Tween = {linear:function (t,  b, C, D) {//Uniform return c*t/d + b;},easein:function (t, B, C, D) {//Acceleration curve return c* (t/=d) *t + b;},easeout:function (t, B, C, d) {//Deceleration curve return-c * (t/=d) * (t-2) + b;},easeboth:function (T, B, C, D) {//Accelerated deceleration curve if ((T/=D/2) < 1) {return c/2*t*t + b;} RETURN-C/2 * ((--T) * (t-2)-1) + b;},easeinstrong:function (T, B, C, D) {//+ acceleration curve return c* (t/=d) *t*t*t + B;},easeoutstron G:function (T, B, C, D) {//Deceleration curve return-c * ((t=t/d-1) *t*t*t-1) + b;},easebothstrong:function (T, B, C, D) {//+ accelerated deceleration curve if ((T/=D/2) < 1) {return c/2*t*t*t*t + B;} RETURN-C/2 * ((t-=2) *t*t*t-2) + b;},elasticin:function (T, B, C, D, A, p) {//Sinusoidal decay curve (Elasto-Fade) if (t = = 0) {return b;} if ((t/= d) = = 1) {return b+c;} if (!p) {p=d*0.3;} if (!a | | A < Math.Abs (c)) {a = c; var s = P/4;} else {var 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;},elasticout:function (T, B, C, D, A, p) {//sine-enhanced curve (Elasto-Fade) if (t = = 0) {return b;} if ((t/= d) = = 1) {return b+c;} if (!p) {p=d*0.3;} if (!a | | A < Math.Abs (c)) {a = C;var s = P/4;} else {var 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;}, Elasticboth:function (t, B, C, D, A, p) {if (t = = = 0) {return b;} if ((t/= d/2) = = 2) {return b+c;} if (!p) {p = d* (0.3*1.5);} if (!a | | A < Math.Abs (c)) {a = c; var s = P/4;} else {var s = p/(2*math.pi) * Math.asin (C/A);} if (T < 1) {return-0.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) *0.5 + C + b;},backin:function (T, B, C, D, s) {//back Fallback acceleration (fallback fade in) if (typeof s = = ' undefined ') {s = 1.70158;}  Return c* (T/=d) *t* ((s+1) *t-s) + b;},backout:function (T, B, C, D, s) {if (typeof s = = ' undefined ') {s = 1.10158; The retraction distance}return c* ((t=t/d-1) *t* ((s+1) *t + s) + 1) + b;}, Backboth:function (t, B, C, D, s) {if (typeof s = = ' undefined ') {s = 1.70158;} if ((t/= D/2) < 1) {return c/2* (t*t* (((s*= (1.525)) +1) *t-s) + B;} Return c/2* ((t-=2) *t* (((s*= (1.525) +1) *t + s) + 2) + b;},bouncein:function (T, B, C, D) {//Pinball damping (Pinball fade out) return c-tween[' Bounceout '] (d-t, 0, C, D) + B;}, Bounceout:function (t, B, C, D) {if ((T/=d) < (1/2.75)) {return c* (7.5625*t*t) + b;} else if (T < (2/2.75)) {return c* (7.5625* (t-= (1.5/2.75)) *t + 0.75) + B;} else if (T < (2.5/2.75)) {return c* (7.5625* (t-= (2.25/2.75)) *t + 0.9375) + b;} Return c* (7.5625* (t-= (2.625/2.75)) *t + 0.984375) + b;}, Bounceboth:function (t, B, C, D) {if (T < D/2) {return Twee n[' Bouncein ' (t*2, 0, C, d) * 0.5 + b;} Return tween[' Bounceout ' (t*2-d, 0, C, d) * 0.5 + c*0.5 + b;}}

　　

Using tween to implement the module rebound animation effect with native JS