1. 动画实现原理
核心原理：通过定时器 setInterval() 不断移动盒子位置。
实现步骤：
- 获得盒子当前位置
- 让盒子在当前位置加上1个移动距离
- 利用定时器不断重复这个操作
- 加一个结束定时器的条件
- 注意此元素需要添加定位，才能使用element.style.left
<body>
<div></div>
<script>
//动画原理
// 1.获得盒子当前位置
// 2.让盒子在当前位置加上1个移动距离
// 3.利用定时器不断重复这个操作
// 4.加一个结束定时器的条件
// 5.注意此元素需要添加定位， 才能使用element.style.left
var div = document.querySelector('div' );
var timer = setInterval(function() {
if (div.offsetLeft >= 400) {
//停止动画本质是停止定时器
clearInterval(timer);
};
div.style.left = div.offsetLeft 1 'px' ;
}, 30);
</script>
</body>2.简单动画函数封装原理
代码语言：javascript复制<script>
//简单动画函数封装obj目标对象target 目标位置
function animate(obj, target) {
var timer = setInterval (function() {
if (obj.offsetLeft >= target) {
//停止动画本质是停止定时器
clearInterval(timer);
}
obj.style.left = obj.offsetLeft 1 'px';
}, 30);
}
var div = document . querySelector('div' );
var span = document . querySelector( ' span );
//调用函数
animate(div, 300) ;
animate(span, 200);
</script>3. 动画函数给不同元素记录不同定时器
如果多个元素都使用这个动画函数，每次都要var 声明定时器。我们可以给不同的元素使用不同的定时器（自己专门用自己的定时器）。
代码语言：javascript复制核心原理：利用 JS 是一门动态语言，可以很方便的给当前对象添加属性。
<script>
// var obj = {};
// obj.name = ' andy' ;
//简单动画函 数封装obj目标对象target目标位置
//给不同的元素指定了不同的定时器
function animate(obj, target) {
// 当我们不断的点击按钮，这个元素的速度会越来越快，因为开启了太多的定时器
// 解决方案就是 让我们元素只有一个定时器执行
// 先清除以前的定时器，只保留当前的一个定时器执行
clearInterval(obj.timer);
obj.timer = setInterval(function() {
if (obj.offsetLeft >= target) {
// 停止动画 本质是停止定时器
clearInterval(obj.timer);
}
obj.style.left = obj.offsetLeft 1 'px';
}, 30);
}
var div = document . querySelector('div' );
var span = document . querySelector( 'span' );
var btn = document . querySelector( 'button' );
//调用函数
animate(div, 300) ;
btn.addEventListener( 'click', function() {
animate(span, 200);
})
</script>
