本文介绍了JavaScript实现动画效果的原理，包括设置定时器移动元素位置，以及如何实现缓动效果，通过调整每次移动的距离使动画减速。此外，还讨论了如何在多个目标值之间来回移动元素的方法，涉及步长的正负判断和取整策略。
动画实现原理
核心原理：通过定时器setInterval() 不断移动盒子位置。
实现步骤：
- 获得盒子当前位置
- 让盒子在当前位置加上1个移动距离
- 利用定时器不断重复这个操作
- 加一个结束定时器的条件
- 注意此元素需要添加定位，才能使用element.style.left
缓动效果原理
缓动就是变速运动，最常见的就是让速度慢下来
思路：
- 让盒子每次移动的距离慢慢变小，速度就会慢慢减下来
- 核心算法：（目标值-现在的位置）/ 10 作为每次移动的距离步长
- 停止的条件是：让盒子位置等于目标位置就停止定时器
动画函数多个目标值之间来回移动
点击按钮时，判断步长是正值还是负值
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
- 如果是正值，则步长 往大了取整
- 如果是负值 则步长往小了取整
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X
最低0.47元/天 解锁文章
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
