如何使用原生JS制作一个缓动动画

这期内容当中小编将会给大家带来有关如何使用原生JS制作一个缓动动画,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

原理很简单通过定时器修改边距达到移动动画效果

<强>实现速度的变化

缓动必然移动速度会有变化,这里需要用到一个小公式或者说算法

移动单位=(指定移动位置边距- obj.offsetLeft)/10;
var=(ydpx - obj.offsetLeft)/10步;

有一个细节需要注意下:

移动的步数应该去掉小数,否者因为除法的原因无法移动到指定位置,会有一些差距
当一步小于0对应的是向左移动舍去小数如:1.2为1
大于0向右移动,进位,如:1.2为2
这应该是个数学问题* *

之后代码的实现就简单多了:

//ydjl:移动到指定位置(obj.offsetLeft)
　　函数动画(obj ydpx) {//清除定时器防止每一次调用都产生一个定时器,叠加导致问题(速度变快)
　　clearInterval (obj.timer);
　　obj。计时器=setInterval(函数(){
　　var=(ydpx - obj.offsetLeft)/10步;//移动距离//取整
　　一步=step> 0, # 63;Math.ceil(步骤):Math.floor(步骤);//判断是否移动到指定位置
　　如果(obj。offsetLeft==ydpx)
　　{//清除定时器,停止移动
　　clearInterval (obj.timer);
　　}//修改左实现移动
　　obj.style。左=obj。offsetLeft +一步+ & # 39;px # 39;;
　　
　　},15)//移动间隔设置
　　}

下面是演示:

& lt; !DOCTYPE html> 　　& lt; html lang=癳n"祝辞 　　& lt; head> 　　& lt;元charset=癠TF-8"祝辞 　　& lt; title> Title 　　& lt; style> 　　.boks { 　　位置:绝对的; 　　前:300像素; 　　左:0; 　　宽度:100 px; 　　身高:100 px; 　　background - color: # ff0011; 　　} 　　& lt;/style> 　　 　　& lt;/head> 　　& lt; body> 　　& lt;按钮类=皔d500"祝辞移动500 px 　　& lt;按钮类=皔d800"祝辞移动800 px 　　& lt; div类=癰oks"祝辞hezi