JS实现水平移动与垂直移动动画

JS实现水平移动与垂直移动动画的攻略步骤如下：

步骤一：获取需操作的元素

首先，我们需要获取需要操作的元素，可以通过以下方式获取：

const elem = document.querySelector('#target');

其中，#target是需要操作的元素的id。

步骤二：水平移动动画

接下来，我们开始实现水平移动动画，具体步骤如下：

1. 定义初始位置

在实现动画之前，我们需要先定义元素的初始位置，可以通过CSS样式来实现：

#target {
  position: relative;
  left: 0;
}

上述CSS样式将元素的初始位置设置为页面左侧。

2. 设置动画参数

接下来，我们需要设置动画的参数，包括动画时长、动画距离等。

const duration = 1000; // 动画时长
const distance = 200;  // 动画距离

上述代码将动画时长设置为1000ms，并将动画距离设置为200。

3. 实现动画

接下来，我们可以通过JavaScript实现水平移动动画：

let startPos = 0; // 起始位置
let startTime = null; // 开始时间

function step(timestamp) {
  if (!startTime) startTime = timestamp;
  const elapsedTime = timestamp - startTime;
  const progress = Math.min(elapsedTime / duration, 1); // 动画进度
  const distanceMoved = progress * distance; // 距离移动距离

  elem.style.left = `${startPos + distanceMoved}px`; // 移动元素

  if (progress < 1) {
    window.requestAnimationFrame(step);
  }
}

window.requestAnimationFrame(step);

代码解析：

• startPos表示元素的起始位置，初始值为0。
• startTime表示动画开始时间，初始值为null。
• step函数是实现动画的核心代码，使用了window.requestAnimationFrame()函数实现动画的流畅度。
• 在step函数中，首先判断startTime是否为null，如果是，则将其设置为当前时间戳。
• 然后，计算动画时间经过的时间（即elapsedTime）和动画进度（即progress, 含义是当前的进度比率，即1表示动画结束），以及元素已经移动的距离（即distanceMoved）。
• 最后，将元素移动到新的位置(startPos + distanceMoved)上，并判断动画是否已经结束，如果没有，则再次调用window.requestAnimationFrame()，直到动画结束。

4. 完整示例

以下是完整的实现水平移动动画的示例代码：

<div id="target">Hello World!</div>

<style>
#target {
  position: relative;
  left: 0;
}
</style>

<script>
const elem = document.querySelector('#target');
const duration = 1000; // 动画时长
const distance = 200;  // 动画距离

let startPos = 0; // 起始位置
let startTime = null; // 开始时间

function step(timestamp) {
  if (!startTime) startTime = timestamp; 
  const elapsedTime = timestamp - startTime; // 时间差
  const progress = Math.min(elapsedTime / duration, 1); // 进度比率，最大值为1
  const distanceMoved = progress * distance; // 已经移动的距离
  elem.style.left = `${startPos + distanceMoved}px`; // 移动元素
  if (progress < 1) {
    window.requestAnimationFrame(step);
  }
}

window.requestAnimationFrame(step);
</script>

步骤三：垂直移动动画

步骤三的要点与步骤二类似：

1. 定义初始位置

#target {
  position: relative;
  top: 0;
}

上述CSS样式将元素的初始位置设置为页面顶端。

2. 设置动画参数

const duration = 1000; ///< 动画时长
const distance = 200; ///< 动画距离

上述代码将动画时长设置为1000ms，并将动画距离设置为200。

3. 实现动画

let startPos = 0; // 起始位置
let startTime = null; // 开始时间

function step(timestamp) {
  if (!startTime) startTime = timestamp;
  const elapsedTime = timestamp - startTime;
  const progress = Math.min(elapsedTime / duration, 1); // 动画进度
  const distanceMoved = progress * distance; ///< 距离移动距离

  elem.style.top = `${startPos + distanceMoved}px`; // 移动元素

  if (progress < 1) {
    window.requestAnimationFrame(step);
  }
}

window.requestAnimationFrame(step);

代码解析与步骤二的类似，区别在于应用top属性移动元素。

4. 完整示例

以下是完整的实现垂直移动动画的示例代码：

<div id="target">Hello World!</div>

<style>
#target {
  position: relative;
  top: 0;
}
</style>

<script>
const elem = document.querySelector('#target');
const duration = 1000; ///< 动画时长
const distance = 200; ///< 动画距离

let startPos = 0; // 起始位置
let startTime = null; // 开始时间

function step(timestamp) {
  if (!startTime) startTime = timestamp;
  const elapsedTime = timestamp - startTime;
  const progress = Math.min(elapsedTime / duration, 1); // 动画进度
  const distanceMoved = progress * distance; // 距离移动距离
  elem.style.top = `${startPos + distanceMoved}px`; // 移动元素
  if (progress < 1) {
    window.requestAnimationFrame(step);
  }
}

window.requestAnimationFrame(step);
</script>

以上便是JS实现水平移动与垂直移动动画的完整攻略，希望对你有帮助。