Call Interface:
Copy Code code as follows:
/**
* @param elem {htmlelement} HTML element that performs animation
* @param params {JSON} The HTML attributes that need to be modified during the execution of the animation
* @param duration {Number} optional, animation execution time, unit milliseconds
* @param easing {String} optional, the way the animation executes, slowly enters Easein, eases out easeout
* @param callback {function} optional, callback function at completion of animation execution
* @return
*/
Effect.animate (Elem, params, duration, easing, callback);
Use it in 20 lines of code can do a product picture deceleration fade out, accelerated fade in transition effect Click here to see the demo effect
Copy Code code as follows:
Secondary object, read/write DOM element properties
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 = * 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 that the animation has been performed (how many times/frames actually performed)
* @param number B: Starting position
* @param number C: Termination position
* @param number D: Elapsed time from the start position to the end position (how many times/frames were actually performed)
*/
var tween = {
Ease into
Easein:function (T, B, C, D) {
Return c * (t/=d) * t + B;
},
Ease out
Easeout:function (t,b,c,d) {
Return-c * (t/=d) * (t-2) + B;
}
};
Animated objects
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<changes.length; 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
