JavaScript匀速运动实现方法分析

什么是匀速运动？

匀速运动是指物体在单位时间内移动的距离相等，即物体每秒钟运动的速度始终相同。

如何用 JavaScript 实现匀速运动？

在 JavaScript 中实现匀速运动需要使用定时器 setInterval 和动画函数 requestAnimationFrame。具体步骤如下：

1. 获取需要运动的元素和目标位置。

javascript
const div = document.querySelector('div')
const target = 500 // 目标位置

1. 设定每次运动的步长和时间间隔。

javascript
const speed = 5 // 步长
const interval = 16.7 // 时间间隔（毫秒）

1. 使用定时器 setInterval 或动画函数 requestAnimationFrame 来重复执行运动函数。

javascript
const timer = setInterval(move, interval) // 使用 setInterval
function move() {
// 运动函数
}

或

javascript
requestAnimationFrame(move) // 使用 requestAnimationFrame
function move() {
// 运动函数
requestAnimationFrame(move)
}

1. 在运动函数中计算元素当前的位置，判断是否到达目标位置。

javascript
let curPos = div.offsetLeft // 元素当前位置
if (curPos === target) {
clearInterval(timer) // 到达目标位置，清除定时器
return
}

1. 在运动函数中更新元素的位置。

javascript
curPos += speed // 计算下一步的位置
div.style.left = curPos + 'px' // 更新元素的位置

1. 细节处理。

2. 当目标位置小于当前位置时，需要更新步长为负数，即向前移动。

3. 当目标位置距离当前位置小于步长时，需要更新步长为目标位置与当前位置之间的距离。

javascript
const distance = target - curPos // 目标位置与当前位置的距离
const newSpeed = distance > 0 ? speed : -speed // 根据距离更新步长
speed = Math.abs(distance) < Math.abs(speed) ? distance : newSpeed // 当距离小于步长时，使用距离更新步长

示例一

在 HTML 中插入以下代码：

<div style="width: 100px; height: 100px; background-color: red; position: absolute; top: 0; left: 0;"></div>

使用 JavaScript 实现让红色方块在水平方向向右匀速运动到 500px 的位置。

const div = document.querySelector('div')
const target = 500
let speed = 5
const interval = 16.7
const timer = setInterval(move, interval)
function move() {
  let curPos = div.offsetLeft
  if (curPos === target) {
    clearInterval(timer)
    return
  }
  curPos += speed
  div.style.left = curPos + 'px'
}

示例二

在 HTML 中插入以下代码：

<div style="width: 100px; height: 100px; background-color: blue; position: absolute; top: 0; left: 0;"></div>

使用 JavaScript 实现让蓝色方块在垂直方向向下匀速运动到 500px 的位置。

const div = document.querySelector('div')
const target = 500
let speed = 5
const interval = 16.7
requestAnimationFrame(move)
function move() {
  let curPos = div.offsetTop
  if (curPos === target) {
    return
  }
  curPos += speed
  div.style.top = curPos + 'px'
  requestAnimationFrame(move)
}

在此示例中，使用了动画函数 requestAnimationFrame 替代了 setInterval，解决了 setInterval 可能存在的卡顿问题。