原生javascript 基础动画原理

一、实现原理:

1、开定时器前先清除定时器

2、设置定时器

3、当前元素的位置 + 每一步的长度

4、当元素当前位置超过目标点时,把当前位置==目标点

5、设置元素位置,开始运动

6、判断当前位置如果到达目标点,则清除定时器

 

二、代码

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{ margin:0;padding: 0;}
div{position: absolute; width: 100px; height: 100px; background: red; left: 0;top: 100px;}
</style>
</head>
<body>
<button id="btn">开始</button>
<div id="box"></div>

<script type="text/javascript">
window.onload = function(){
var btn = document.getElementById('btn');
var box = document.getElementById('box');
var speed;

btn.onclick = function(){
// 1、开定时器前先清除定时器
clearInterval(box.timer);
// 2、设置定时器
box.timer = setInterval(function(){
// 3、当前元素的位置 + 每一步的长度
speed = box.offsetLeft + 11;
// 4、当元素当前位置超过目标点时,把当前位置==目标点
speed > 800 ? speed = 800 : null;
// 5、设置元素位置,开始运动
box.style.left = speed +'px';
// 6、判断当前位置如果到达目标点,则清除定时器
if(speed == 800){
clearInterval(box.timer);
}

},20)
}
}
</script>
</body>
</html>
  

 

posted @ 2018-10-26 11:01  雅士伊人  阅读(255)  评论(0编辑  收藏  举报