使用js實現(xiàn)的屬性動畫框架:
- obj // 動畫對象
- json //屬性表 {屬性名:動畫結(jié)束值}
- callback // 動畫結(jié)束后的回掉函數(shù)
function animation(obj,json,callback) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var flag = true;
for (var style in json) {
var target = json[style];
var objStyle;
if (style === 'opacity') {
objStyle = Math.round(getStyle(obj,style) * 100);
}
else {
objStyle = parseInt(getStyle(obj,style));
}
if (objStyle != target) {
flag = false;
}
var speed = (target - objStyle)/10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (style === 'opacity') {
obj.style[style] = objStyle + speed;
}
else {
obj.style[style] = objStyle + speed + 'px';
}
if (flag) {
if (callback) {
callback();
}
}
}
},30)
}
function getStyle(obj,style) {
if (obj.currentStyle) {
return obj.currentStyle(style);
}
else {
return getComputedStyle(obj,false)[style];
}
}
