javascript帧动画(实例讲解)-前端开发

帧动画是指由一系列不同的图像逐帧播放形成连续的动画效果。在Web开发中，我们使用JavaScript实现帧动画的效果。

JavaScript帧动画完整攻略

什么是帧动画

帧动画是指由一系列不同的图像逐帧播放形成连续的动画效果。在Web开发中，我们使用JavaScript实现帧动画的效果。

实现步骤

1.动画对象

在JavaScript中，我们使用一个动画对象来表示一个动画，它应该包含以下属性和方法：

start：启动动画的方法
stop：停止动画的方法
pause：暂停动画的方法
resume：恢复动画的方法
restart：重新开始动画的方法
status：动画状态，包括INITIAL、STARTED、PAUSED和STOPPED

此外，动画对象还应该包括以下事件处理方法：

onStart：动画开始时触发
onPause：动画暂停时触发
onResume：动画恢复时触发
onStop：动画停止时触发
onFrame：每一帧播放时触发

2.实现帧动画

帧动画是通过不断更新某个元素的属性值来实现的，这个元素可以是CSS样式，也可以是canvas或SVG元素。

在JavaScript中，实现帧动画的方式有两种：

使用定时器
使用requestAnimationFrame

我们将会分别介绍这两种实现方式。

2.1 使用定时器

使用定时器实现帧动画的基本思路是：使用setInterval定时器，不断更新元素的属性值，以达到动画效果。

示例代码1：

const element = document.querySelector('.element');
let left = 0;

setInterval(() => {
  left += 10;
  element.style.left = left + 'px';
}, 100);

在上面的示例代码中，我们定义了一个元素.element，使用定时器每隔100毫秒更新一次元素的left属性，从而实现了一个简单的向右移动的动画。

2.2 使用`requestAnimationFrame`

使用requestAnimationFrame实现帧动画的基本思路是：不断更新元素的属性值，在下一次浏览器绘制之前更新元素，以达到动画效果。

示例代码2：

const element = document.querySelector('.element');
let left = 0;

function animation() {
  left += 10;
  element.style.left = left + 'px';

  requestAnimationFrame(animation);
}

requestAnimationFrame(animation);

在上面的示例代码中，我们定义了一个元素.element，使用requestAnimationFrame不断更新元素的left属性，从而实现了一个简单的向右移动的动画。

示例说明

下面我们将通过两个示例来展示如何使用JavaScript实现帧动画。

示例1：使用定时器实现帧动画

在本示例中，我们将展示如何使用定时器实现一个石头滚动的动画。该动画可通过点击按钮进行启动和停止。

HTML代码：

<div class="rock"></div>
<button id="start-button">Start</button>
<button id="stop-button">Stop</button>

CSS代码：

.rock {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 100px;
  left: 0;
  background: url('./rock.png') no-repeat center center;
  background-size: contain;
}

JavaScript代码：

const rock = document.querySelector('.rock');
const startButton = document.querySelector('#start-button');
const stopButton = document.querySelector('#stop-button');

let intervalId = null;
let left = 0;

function startAnimation() {
  intervalId = setInterval(() => {
    left += 10;
    rock.style.left = left + 'px';
  }, 100);
}

function stopAnimation() {
  clearInterval(intervalId);
  intervalId = null;
}

startButton.addEventListener('click', startAnimation);
stopButton.addEventListener('click', stopAnimation);

在上面的代码中，我们定义了一个元素.rock，使用定时器每隔100毫秒更新一次元素的left属性，从而实现了一个向右滚动的动画。同时，我们定义了两个按钮Start和Stop，分别用于启动和停止动画。当点击Start按钮时，调用startAnimation函数，启动动画；当点击Stop按钮时，调用stopAnimation函数，停止动画。

示例2：使用`requestAnimationFrame`实现帧动画

在本示例中，我们将展示如何使用requestAnimationFrame实现一个小球弹跳的动画。该动画可通过点击按钮进行启动和停止。

HTML代码：

<div class="ball"></div>
<button id="start-button">Start</button>
<button id="stop-button">Stop</button>

CSS代码：

.ball {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0;
  left: 0;
  background: url('./ball.png') no-repeat center center;
  background-size: contain;
}

JavaScript代码：

const ball = document.querySelector('.ball');
const startButton = document.querySelector('#start-button');
const stopButton = document.querySelector('#stop-button');

let requestId = null;
let top = 0;
let vy = 0;

function startAnimation() {
  if (requestId) return;

  let lastTimestamp = null;

  function animation(timestamp) {
    if (!lastTimestamp) lastTimestamp = timestamp;

    const delta = timestamp - lastTimestamp;
    lastTimestamp = timestamp;

    vy += delta * 0.001 * 9.8;
    top += vy * delta * 0.001 + 0.5 * 9.8 * delta * delta * 0.000001;
    ball.style.top = top + 'px';

    if (top + 50 >= 400) {
      vy *= -0.8;
    }

    requestId = requestAnimationFrame(animation);
  }

  requestId = requestAnimationFrame(animation);
}

function stopAnimation() {
  cancelAnimationFrame(requestId);
  requestId = null;
}

startButton.addEventListener('click', startAnimation);
stopButton.addEventListener('click', stopAnimation);

在上面的代码中，我们定义了一个元素.ball，使用requestAnimationFrame不断更新小球的top属性，从而实现了一个小球弹跳的动画。同时，我们定义了两个按钮Start和Stop，分别用于启动和停止动画。当点击Start按钮时，调用startAnimation函数，启动动画；当点击Stop按钮时，调用stopAnimation函数，停止动画。