随笔- 43 文章- 1 评论- 1 阅读- 23万

原生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>