JS实现匀加速与匀减速运动的方法示例

JS实现匀加速与匀减速运动的方法示例攻略如下：

一、匀加速运动

1. 获取元素并初始化

首先需要获取需要进行匀加速运动的元素，并初始化一些变量。假如我们要让一个div元素匀加速向右移动，可以使用如下代码：

let box = document.querySelector('.box'); // 获取元素
let speed = 10; // 初始速度
let a = 1; // 加速度
let timer = null; // 定时器

2. 运动函数实现

接下来，需要编写运动函数实现匀加速运动。具体实现是通过不断调整元素的left值，达到匀加速运动的效果。代码如下：

function move() {
  speed += a; // 加速度变化
  let left = box.offsetLeft + speed; // 元素的left值
  if (left >= window.innerWidth - box.offsetWidth) { // 边界检测
    left = window.innerWidth - box.offsetWidth; // 边界处理
    speed = -speed * 0.6; // 碰到边界后速度反向，并减小60%
  }
  box.style.left = left + 'px'; // 更新left值
  timer = requestAnimationFrame(move); // 循环调用
}

其中，通过speed变量记录元素的速度，通过加速度a来不断调整speed的值。然后计算元素下一次移动后的left值，进行边界检测并处理。最后更新元素的left值，通过requestAnimationFrame方法实现循环调用。

3. 启动运动

最后，在合适的时机调用move函数，就可以启动匀加速运动了。比如可以在box元素的click事件中启动运动：

box.addEventListener('click', function() {
  cancelAnimationFrame(timer); // 先取消之前的定时器
  timer = requestAnimationFrame(move);
});

二、匀减速运动

1. 获取元素并初始化

同样，需要先获取元素并初始化相关变量。下面以让元素向左匀减速移动为例：

let box = document.querySelector('.box'); // 获取元素
let speed = 10; // 初始速度
let a = 1; // 加速度
let timer = null; // 定时器

2. 运动函数实现

匀减速运动的实现要稍微复杂一些。首先需要判断元素是否到达终点位置，然后计算出此时的速度，通过不断调整速度和位置来实现匀减速的过程。代码如下：

function move() {
  let left = box.offsetLeft - speed; // 元素的left值
  if (left <= 0) { // 达到终点
    left = 0; // 边界处理
    speed = 0; // 速度清零
    cancelAnimationFrame(timer); // 停止动画
    return;
  }
  speed -= a; // 减速度变化
  if (speed < 0) { // 速度不能为负数
    speed = 0;
  }
  box.style.left = left + 'px'; // 更新left值
  timer = requestAnimationFrame(move); // 循环调用
}

首先计算元素下一次移动后的left值，并进行边界检测。如果已经到达终点，则做相应的处理并结束动画。否则，通过减速度a的变化，计算此时的速度，并更新元素的left值。最后通过requestAnimationFrame方法实现循环调用。

3. 启动运动

同样，在合适的时机调用move函数启动匀减速运动。比如可以在box元素的click事件中启动运动：

box.addEventListener('click', function() {
  cancelAnimationFrame(timer); // 先取消之前的定时器
  timer = requestAnimationFrame(move);
});

以上就是JS实现匀加速与匀减速运动的方法示例的完整攻略。