JS实现动画效果

动画实现原理

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

实现步骤：

1. 获得盒子当前位置
2. 让盒子在当前位置加上1个移动距离
3. 利用定时器不断重复这个操作
4. 加一个结束定时器的条件
5. 注意此元素需要添加定位，才能使用element.style.left

 缓动效果原理

缓动就是变速运动，最常见的就是让速度慢下来

思路：

1. 让盒子每次移动的距离慢慢变小，速度就会慢慢减下来
2. 核心算法：（目标值-现在的位置）/ 10 作为每次移动的距离步长
3. 停止的条件是：让盒子位置等于目标位置就停止定时器

标签：动画,定时器,盒子,效果,位置,JS,缓动,移动
来源： https://blog.csdn.net/weixin_60323200/article/details/120290455