JavaScript动画的原理

动画的原理

核心原理：通过哦定时器setInterval()不断移动盒子的位置

 实现步骤：

 1、获得盒子当前的位置

 2、让盒子在当前位置加上1个移动距离

 3、利用定时器不断重复这个操作

 4、加一个结束定时器的条件

 5、注意此元素需要增加定位，才可以使用element.style.left

// 动画的原理
// 核心原理：通过哦定时器setInterval()不断移动盒子的位置
// 实现步骤：
//   1、获得盒子当前的位置
//   2、让盒子在当前位置加上1个移动距离
//   3、利用定时器不断重复这个操作
//   4、加一个结束定时器的条件
//   5、注意此元素需要增加定位，才可以使用element.style.left
var div = document.querySelector('div');
var time = setInterval(function(){
    // 注意：div.offsetLeft只能获取元素距离左边的距离，要更改元素的距离得用element.offsetLeft
    div.style.left = div.offsetLeft + 1 + 'px';
    if (div.style.left == '1000px') {
        clearInterval(time);//结束定时器
    }
    console.log(div.style.left);
}, 10)