Javascript animation objects support acceleration, deceleration, slow-in, and slow-out implementation code _ javascript tips-js tutorial

Javascript animation objects support the implementation code of acceleration, deceleration, slow-in, and slow-out. For more information, see call the interface below:

The Code is as follows:

/**
* @ Param elem {HTMLElement}: HTML element of the animation
* @ Param params {JSON}: HTML attributes to be modified during animation execution
* @ Param duration {Number} (optional) animation execution time, in milliseconds
* @ Param easing {String} (optional) specifies the animation execution method. It can be slowed down to easeIn or easeOut.
* @ Param callback {Function} (optional) callback Function when the animation is executed.
* @ Return
*/
Effect. animate (elem, params, duration, easing, callback );

With this function, you can use less than 20 lines of code to create a product image to slow down and Fade in. Click here to view the demo.

The Code is as follows:

// Secondary object, read/write DOM element attributes
Var attribute = {
Get: function (elem, attr ){
Var val;
If (elem. currentStyle ){
If (attr = "opacity "){
Val = elem. filters. alpha [attr];
} Else {
Val = elem. currentStyle [attr];
}
}
Else {
Val = getComputedStyle (elem) [attr];
If (attr = "opacity "){
Val = 100 * val;
}
}
Return val;
},
Set: function (elem, attr, val ){
If (attr = 'opacity '){
Elem. style. filter = 'Alpha (opacity = '+ (val) + ')';
Elem. style. opacity = (val)/100;
}
Else {
Elem. style [attr] = val + 'px ';
}
}
};
/*
* Description: tween animation algorithm.
* @ Param Number t: the time when the animation has been executed (the actual Number of executions/frames)
* @ Param Number B: Start position
* @ Param Number c: end position
* @ Param Number d: the elapsed time from the starting position to the ending position (actually how many times/frames are executed)
*/
Var tween = {
// Slow in
EaseIn: function (t, B, c, d ){
Return c * (t/= d) * t + B;
},
// Slow output
EaseOut: function (t, B, c, d ){
Return-c * (t/= d) * (t-2) + B;
}
};
// Animation object
Var effect = {
Animate: function (elem, params, duration, easing, callback ){
Var dt = new Date (). getTime (),
B = 0,
C = 0,
D = duration | 500,
Fps = 1000/60;
Var changes = [];
For (var attr in params ){
B = parseFloat (attribute. get (elem, attr ));
C = params [attr]-B;
Changes. push ({
Attr: attr,
B: B,
C: c
});
}
Easing = easing | "easeOut ";
Callback = callback | new Function;
SetTimeout (function (){
Var t = new Date (). getTime ()-dt;
Var B, c, attr;
For (var I = 0; I B = changes [I]. B;
C = changes [I]. c;
Attr = changes [I]. attr;
Attribute. set (elem, attr, tween [easing] (t, B, c, d ));
If (d <= t ){
Attribute. set (elem, attr, params [attr]);
Callback ();
Return;
}
}
SetTimeout (arguments. callee, fps );
}, Fps );
}
};
// By rentj1@163.com