关于用js写缓动 动画

关于制作简单的缓动动画，动画和dom是js的两大弱项，但是有时候又不得不用js所以下面做一个js的简单封装函数；

首先解释缓动的思想：

若target是目标距离，step为步长，object是对象，

var step=(target-object.offsetLeft)/10;

我们拿盒子的距离-目标对象的左偏移量；

object.style.left = 盒子本身的位置  +  步长；

当然不要忘记取整；

一般在计算距离通常无小数

step=step>0 ? Math.ceil(step):Math.floor(step);

最后在开始和结束时不要忘记清除计时器；

clearInterval(object.timer);

下面看一下封装好的代码：

function animate(object,target){ //object要动的对象 target 要动的距离
clearInterval(timer);//清楚定时
object.timer=setInterval(function(){
// 计算步长 动画的原理 盒子本身的位置 + 步长
var step=(target-object.offsetLeft)/10;
//对步长取整；
step=step>0 ? Math.ceil(step):Math.floor(step);
// object.style.left = 盒子本身的位置 + 步长；
object.style.left=object.offsetLeft+step+"px";
//判断是否达到目标点
if(object.offsetLeft==target) {
clearInterval(object.timer);
//清除定时
}
},20)//20定时器的时间，执行多久；
}

转载于:https://www.cnblogs.com/yangyangae86/p/5795667.html