关于用js写缓动 动画

被刻印的时光 ゝ 提交于 2020-03-22 00:03:18

关于制作简单的缓动动画,动画和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定时器的时间,执行多久;
}

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!