start.onclick = function(){
moveElem(elem, {"left" : 300, "top" : 500, "opacity" : 50}, function(){
moveElem(elem, {"left" : 500, "top" : 300, "opacity" : 100});
});
};
function moveElem(obj, json, func){
cancelAnimationFrame(obj.timer);
obj.timer = requestAnimationFrame(function(){
var flag = true;
for(attr in json){
var current = 0, speed = 0, result = 0;
var target = json[attr];
if(attr === 'opacity'){
current = parseFloat(getStyle(obj, attr)) * 100;
}else{
current = parseInt(getStyle(obj, attr));
}
speed = (target - current) / 8;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
result = current + speed;
if(attr !== 'opacity'){
obj.style[attr] = result + 'px';
}else{
obj.style.filter = 'alpha(opacity:' + result +')';
obj.style[attr] = result / 100;
}
// 如果没有达到目标,则一直将其置为false
if(current != target){
flag = false;
}
}
if(!flag){
timer = requestAnimationFrame(function(){
moveElem(obj, json, func);
});
}else{
if(func) func();
}
});
}
这是我将网上的那个js运动函数从setInterval改成requestAnimationFrame了,但是对requestAnimationFrame不清楚,不知道这样是不是有问题?
醉了,看个js根本不知道你要做什么
应该是没有什么问题的吧,只是requestAnimationFrame方法可能兼容性不是太好。
关于requestAnimationFrame方法,你可以看看张鑫旭大神的这篇文章:
requestAnimationFrame有毛线用?