1.匀速动画函数的封装
obj指的是运动的对象,target指的是运动对象的目标值。
function animate(obj,target) {
clearInterval(obj.timer);
//先判断是往前走还是往回走
var speed = target - obj.offsetLeft>0? 5: -5;
obj.timer = setInterval(function(){
var result = target - obj.offsetLeft;
//这是目标值200 与obj盒子左侧的offsetLeft值的差,并且这两者的差值不会超过5,因为每次都是offsetLeft的值+5或者-5.
obj.style.left = obj.offsetLeft + speed +"px";
if(Math.abs(result) <= 5) {
// 这里是result取绝对值,因为当target<=obj.offsetLeft时,result是个负值。
clearInterval(obj.timer);
obj.style.left = target +"px";
// 有可能会出现最后一步是198或者203的情况,所以最后都让这个盒子停在offsetLeft = 200的位置上。
}
}, 30);
}
2.缓动动画函数的封装
obj指的是运动的对象,json指的是多个属性值,fn指的是回调函数。