动画实现原理
核心原理:通过定时器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