A simple javascript animation effect code _ javascript skills

Some time ago, I learned how to use the tween Algorithm for animation. In the past few days, I made a simple animation function based on the tween algorithm and various materials. implemented functions: Move, pause, resume, and stop.

Unimplemented functions: the unit conversion cannot be achieved, and the color gradient cannot be achieved (there are still many functions to be improved ...)

The usage in the Code is as follows:

The Code is as follows:

Var $ m = $ M ("pAnimate ");

_ ("BtnAnimate"). onclick = function (){
This. disabled = true;
Var that = this;
$ M. animate ({left: "300px", top: "100px", width: "300px", height: "200px", opacity: 0.3}, {duration: 5000, easing: tween. back. easeInOut }). delay (200)
. Animate ({left: "50px", top: "300px", width: "150px", height: "100px", opacity: 0.8}, {duration: 2000, easing: tween. elastic. easeInOut,
Callback: function (){
That. disabled = false;
}
});
}
_ ("BtnPause"). onclick = function (){
$ M. pause ();
This. disabled = true;
_ ("BtnResume"). disabled = false;
}
_ ("BtnResume"). disabled = true;
_ ("BtnResume"). onclick = function (){
$ M. resume ();
This. disabled = true;
_ ("BtnPause"). disabled = false;
}

_ ("BtnStop"). onclick = function (){
$ M. stop ();
_ ("BtnAnimate"). disabled = false;
}

Function implementation:

The Code is as follows:

/* Simple animation Method
* Unimplemented unit conversion
*/
Var $ M = function (obj ){
Var elem = ("string" === typeof obj )? Document. getElementById (obj): obj;
Var _ this = {}, props = {}, timeId, isBusy = false, isPause = false;
Var queue = [], _ current;
// Linear motion Algorithm
Function Linear (t, B, c, d) {return c * t/d + B ;}
Function setCss (className, value ){
If (className = "opacity "){
If (document. defaultView ){
Elem. style ["opacity"] = value;
} Else {
Elem. style ["filter"] = 'Alpha (opacity = '+ 100 * value + ')';
}
} Else {
Elem. style [className] = value;
}
}
Function getCss (className ){
If (className = "opacity "){
Var ret = "";
If (document. defaultView ){
Ret = document. defaultView. getComputedStyle (elem, null) ['opacity '] | 1;
} Else {
Ret = elem. currentStyle ['filter']? (Elem. currentStyle ['filter']. match (/^ alpha \ (opacity = ([\ d \.] +) \) $/) [1]/100: 1;
}
Return ret. toString ();
} Else {
Return elem. style [className]. toString ();
}
}

Function _ move (params, easing, st, ht, callback ){
Var t = (new Date (). getTime ()-st );
_ Current. t = t;
If (isPause) {return ;}
Easing = easing | Linear;
Ht = ht | 500;
For (var p in params ){
If (! Props [p]) {
Var iv = parseFloat (getCss (p) | 0;
Var ev = parseFloat (params [p]);
Props [p] = {
Iv: iv,
Iu: iv? GetCss (p). substring (iv. toString (). length): null,
Ev: ev,
Eu: params [p]. toString (). substring (ev. toString (). length)
}
// TODO (The unit of the initial value and the Unit of the target value are different and need to be processed)
}
If (t> = ht) {t = ht ;}
Var nv = easing (t, props [p]. iv, (props [p]. ev-props [p]. iv), ht );
Nv = parseFloat (nv );
SetCss (p, nv + props [p]. eu );
}

If (t TimeId = setTimeout (function (){
_ Move (params, easing, st, ht, callback );
}, 13 );
} Else {
Props = {};
IsBusy = false;
If (callback ){
Callback ();
}
Run ();
}
}
Function run (){
If (! IsBusy & queue. length! = 0 ){
Var o = queue. shift ();
Var _ delay = 0;
While (o & o. delay ){
_ Delay + = o. delay;
O = queue. shift ();
}
If (o ){
_ Current = o;
IsBusy = true;
SetTimeout (function (){
Var st = (new Date (). getTime ();
_ Move (o. params, o. options. easing, st, o. options. duration, o. options. callback );
}, _ Delay );
}
}
}

Var _ this = {
Animate: function (params, options ){
Queue. push ({params: params, options: options });
IsPause = false;
Run ();
Return _ this;
},
Delay: function (MS ){
Queue. push ({delay: ms });
Return _ this;
},
Pause: function (){
IsPause = true;
Return _ this;
},
Resume: function (){
If (_ current ){
Var o = _ current;
IsPause = false;
Var st = (new Date (). getTime ()-_ current. t;
_ Move (o. params, o. options. easing, st, o. options. duration, o. options. callback );
Return _ this;
}
},
Stop: function (){
IsPause = true;
IsBusy = false;
Queue = [];
Props = {};
Return _ this;
}
};
Return _ this;
}

Reference address:
Http://www.jb51.net/article/24309.htm