JavaScript动画的原理

动画的原理

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

 实现步骤：

 1、获得盒子当前的位置

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

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

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

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

// 动画的原理 // 核心原理：通过哦定时器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)