I want to teach you here is how to use the Tween class of Flash algorithm, to do JS tween algorithm, and use it to do some simple easing effect.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title>Tween</title> </pead> <body> <div > <div > <div Id= "Idmove" ></div> </div> <div > <div id= "Idchart" > </div> <div id= "Idline" > </div> </div> </div> <div> <p> Tween type: <label> <input name= "Vtween type=" Radio "value=" Linear "checked=" checked "/> Linear </label> <label> <input name=" Vtween "type=" Radio " Value= "Quad"/> Quadratic </label> <label> <input name= "Vtween" type= "Radio" value= "Cubic"/> Cub IC </label> <label> <input name= "Vtween" type= "Radio" value= "quart"/> quartic </label> <la Bel> <input Name= "Vtween" type= "Radio" value= "Quint"/> quintic </label> <label> <input name= "Vtween" type= "Radi" O "value=" Sine "/> sinusoidal </label> <label> <input name=" Vtween "type=" Radio "value=" Expo "/> ; Exponential </label> <label> <input name= "Vtween" type= "Radio" value= "Circ"/> Circular </label> ; <label> <input name= "Vtween" type= "Radio" value= "elastic"/> Elastic </label> <label> <inpu T name= "Vtween" type= "Radio" value= "Back"/> back </label> <label> <input name= "Vtween" type= "Radio" value= "Bounce"/> Bounce </label> </p> <p> Ease type: <label> <input name= "Vease" Radio "value=" Easein "checked=" checked "/> Easein </label> <label> <input name=" Vease "type=" Radio "V Alue= "Easeout"/> easeout </label> <label> <input name= "Vease" type= "Radio" value= "Easeinout"/> Easeinout </label> </p> <input id= "idspeed" type= "button" value= "Slow Down"/> <input the id= "Idrun" type= "button" value= "Ru N "/> </div> <script>/* Algorithm Source: http://www.robertpenner.com/easing/*/var Tween = {Linear:function (t,b,c,d) {return c*t/d + B.}, Quad: {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*t + B; RETURN-C/2 * ((--T) * (t-2)-1) + B; }, Cubic: {easein:function (t,b,c,d) {return c* (T/=d) *t*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*t*t + B; Return c/2* ((t-=2) *t*t + 2) + B; }, Quart: {easein:function (t,b,c,d) {return c* (T/=d) *t*t*t + b; }, Easeout:function (t,b,c,d) {return-c * (t=t/d-1) *t*t*t-1) + B; }, Easeinout:function (t,b,c,d) {if (T/=D/2) < 1) return c/2*t*t*t*t + B; ReturN-C/2 * ((t-=2) *t*t*t-2) + B; }, Quint: {easein:function (t,b,c,d) {return c* (T/=d) *t*t*t*t + b; }, Easeout:function (t,b,c,d) {return c* ((t=t/d-1) *t*t*t*t + 1) + B; }, Easeinout:function (t,b,c,d) {if (T/=D/2) < 1) return c/2*t*t*t*t*t + B; Return c/2* ((t-=2) *t*t*t*t + 2) + B; }, Sine: {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: {easein:function (t,b,c,d) {return (t==0) B:C * MATH.POW (2, * (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, * (t-1)) + B; Return C/2 * (-math.pow (2, -10 *--t) + 2) + B; }, Circ: {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.SQRT (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: {easein:function (t,b,c,d,a,p) {if (t==0) return B; if ((T/=d) ==1) return b+c; if (!p) p=d*.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; }, Easeout:function (t,b,c,d,a,p) {if (t==0) return B; if ((T/=d) ==1) return b+c; if (!p) p=d*.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); }, Easeinout:function (t,b,c,d,a,p) {if (t==0) return B; if ((T/=D/2) ==2) return b+c; if (!p) p=d* (. 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-.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: {easein:function (t,b,c,d,s) {if (s = = undefined) s = 1.70158; Return c* (T/=d) *t* ((s+1) *t-s) + B; }, Easeout:function (t,b,c,d,s) {if (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 (s = = undefined) s = 1.70158; if ((T/=D/2) < 1) return c/2* (t*t* ((s*= (1.525)) +1)) + B; Return c/2* ((t-=2) *t* (((s*= (1.525)) +1) *t + s) + 2) + B; }, Bounce: {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*t) + B; else if (T < (2/2.75)) {return c* (7.5625* (t-= (1.5/2.75)) *t +.) + 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; }}//////////////////////////////////////////////////////////var $ = function (ID) {return "string" = = typeof Id? document.getElementById (ID): ID; }; var each = function (list, fun) {for (var i = 0, len = list.length i < len; i++) {Fun (list[i], i);} }; var fun, Ichart = iduration = 100; function Move () {var OM = $ ("Idmove"). Style, OL = $ ("Idline"). Style, t=0, c=500, d=iduration; om.left=ol.left= "0px"; Cleartimeout (move._t); function _run () {if (t<d) {t++; Om.left = Math.ceil (Fun (t,0,c,d)) + "px"; Ol.left = Math.ceil (Tween.linear (t,0,ichart,d)) + "px"; move._t = settimeout (_run, 10); }else{Om.left = c + "px"; Ol.left = Ichart + "px"; } _run (); } function Chart () {var a = []; for (var i = 0; i < Ichart i++) {A.push (' <div + (i-1) + ' px;top: ' + (Math.ceil (Fun (I,200,-200,ichart))) + ' px; ' ><\/div> '); } $ ("Idchart"). InnerHTML = A.join (""); }////////////////////////////////////////////////////////var arrtween = document.getelementsbyname ("VTween"); var arrease = document.getelementsbyname ("Vease"); Each (Arrtween, function (o) {O.onclick = function () {setfun (); Chart (); Each (arrease, function (o) {O.onclick = function () {setfun ()); Chart (); }) function Setfun () {var stween, sease; Each (Arrtween, function (o) {if (o.checked) {stween = O.value;}}) Each (arrease, function (o) {if (o.checked) {sease = O.value;}}) Fun = Stween = = "Linear"? Tween.linear:tween[stween][sease]; } $ ("Idrun"). onclick = function () {setfun (); Chart (); Move (); } $ ("Idspeed"). onclick = function () {if (iduration = =) {iduration = +; this.value = "Speed Up"; }else{iduration = This.value = "Slow down speed"; }} </script> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Effect description
First of all, we are here to download the Flash as script (recommended to see the demo here), 1.0 and 2.0 can (the same algorithm is the same).
For example, open 2.0 can see several as files, each file corresponds to a tween effect, respectively (refer to the instructions inside):
Linear: no easing effect;
Quadratic: Two second side of the easing (t^2);
Cubic: Three second side of the easing (t^3);
Quartic: Four second side of the easing (t^4);
Quintic: Five second side of the easing (t^5);
Sinusoidal: The slow motion of a sine curve (sin (t));
Exponential: Slow motion of exponential curve (2^t);
Circular: The slow motion of the circular curve (sqrt (1-t^2));
Elastic: Exponential attenuation of sinusoidal curve easing;
Back: Over the range of three-side easing ((s+1) *t^3-s*t^2);
Bounce: Exponential attenuation of the rebound slow motion.
PS: The above are their own rotten translation, I hope you amend.
Each effect is divided into three easing modes (methods), respectively:
Easein: Accelerated easing starting from 0;
Easeout: Slowing down to 0 of the slow motion;
Easeinout: The first half is accelerated from 0 and the second half slows down to 0 of the slow motion.
Among them linear is no easing effect, no above effect.
Then look inside the algorithm, taking quadratic's easeout as an example:
static function Easeout (T:number, B:number, C:number, D:number): number {
Return-c * ((t=t/d-1) *t*t*t-1) + B;
}
This is the as code, and four parameters are:
T:current times (current time);
B:beginning value (initial value);
C:change in value (amount of variation);
D:duration (Duration).
Ps:elastic and back have other optional parameters, which are described inside.
So how to use these algorithms in JS? Can be seen, although the as code, but inside the program can be directly placed in the use of JS.
We can define a class and put this part in it:
var Tween = {
Quad: {
Easeout:function (t,b,c,d) {
Return-c * (t/=d) * (t-2) + B;
}
}
}
In this way, you can use Tween.Quad.easeOut to obtain this algorithm, the other algorithms are the same processing.
Then you can use this JS tween to do some easing effect.
First, through the above coordinate example to say the principle of the algorithm:
The x axis is the time, the y-axis is the current value, B is the initial value of the Y axis, and the x-axis is 0,t the current time. When the T (x-axis) is gradually increasing to D, the current value (y-axis) reaches the target value (b+c).
If you want to understand the details can look for information to see it (seemingly with the mathematical relationship is relatively large).
Here is how to use this tween, first B, C, D three parameters (that is, the initial value, change, duration) before the start of the easing, it is necessary to determine the good.
To give a simple example, a div to the right easing, left initial value is 50, then B is 50, to move to the right 100, that C is 100, if you know the target value, such as to move to the right to 150, then the target value 150 minus the initial value B is the change of C.
As for d the setting is more flexible, as long as the match T is from 0 to D increment (or decrement) on it.
D with the step size to set the duration, such as D is set to 100, if the set step is 1, then there are 100 steps from 0 to 100, that is, 100 times to complete the process, the more the number of steps that lasts longer.
As for t the change is equivalent to the change of time, is generally uniform change, each change is increased by a step, when t from 0 (or descending) to D, the easing is over.
Note that T starts at 0, and when you set the step, you have to make sure that T does get d, and if the step is 3, then T will never get to D. A better deal is to stop the timer and set the current value to the target value when t equals or exceeds D.
Understanding the use of tween can achieve animation effect. Continuing with the example above, it has been determined that B is 50,c is 100,d is 100, step is 1, using Tween.Quad.easeOut algorithm. You can implement easing using the following program:
var b=50,c=100,d=100,t=0;
function Run () {
Div.style.left = Math.ceil (Tween.Quad.easeOut (t,b,c,d)) + "px";
if (t<d) {t++; settimeout (Run, 10);}
}
Run ();
A simple easing effect is achieved, to achieve different ease, only need to use the corresponding tween algorithm on the line, the previous seems to be unreachable effect, now so easy to achieve (of course, those algorithms are the hardest place).
So the effect on the ease of introduction, but in fact far more than these, we can also define some of their own algorithms, play the imagination, do some fun effect.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title> Untitled document </title> </pead> <body> <input id=" Idclick "type=" button "Value=" click > <div id= "test1" ></div> <div id= "test2" ></div> <script> var Round = {x:function (t,b,r) {return R*math.cos (T/20) +b;}, Y:function (t,b,r) {return R*math.sin (T/20) +b;} } var t=x=y=0; document.getElementById ("Idclick"). onclick = function (e) {document.onmousemove = function (e) {e=e| | Event X=e.clientx+document.documentelement.scrollleft; Y=e.clienty+document.documentelement.scrolltop; }; Document.onmousemove (e); SetInterval (function () {var IX = Math.ceil (round.x (t,x,100)), IY = Math.ceil (Round.y (t,y,50)); With (document.getElementById ("Test1"). Style) {left = IX + "px"; top = IY + "px"; With (document.getElementById ("Test2"). Style) {left = Math.ceil (round.x (t*5,ix,25)) + ' px '; top = Math.ceil (Round.y (t* 5,iy,25) + "px"; } t++; }, 10); } </script> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Current 1/2 page
12 Next read the full text
