JavaScript匀速动画封装_js 实现物体匀加速-CSDN博客

本文链接：https://blog.csdn.net/shenkeding9350/article/details/79108688

HTML部分

<span style="color:#000000"><!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <button>点击到200</button> <button>点击到400</button> <div class="box1"></div> </body> </html></span>

css部

<style>  *{ padding: 0;  margin: 0;  } button{ margin-top: 20px;  margin-left: 20px;  } div{ width: 100px;  height: 100px;  background-color: #aaa;  /*margin-left: 20px;*/  /*margin-top: 20px;*/  position: absolute;  }

function animate(ele,speed,target) {
  //使用定时器之前，必须清除定时器，否则会出现不可预知的bug。
  //ele.timer	把定时器作为元素的属性定义，这样的好处是避免重复定义定时器。
    clearInterval(ele.timer);  
//dire用来判断方向，如果当前的位置比目标值大那么就反向走，反之亦然
    var  dire = ele.offsetLeft<target?speed:speed*-1;
    ele.timer = setInterval(function (){
        //方向
        var val =  target-ele.offsetLeft;
        ele.style.left = ele.offsetLeft+dire+"px";
        //停止方法
        if(Math.abs(val)<=speed){
            // console.log(1);
            ele.style.left = target+"px";
            clearInterval(ele.timer);
        }
    },30);
}