JavaScript动画效果（4）

什么是JavaScript动画？

JavaScript动画是指使用JavaScript代码控制DOM元素的变化，实现动态效果的技术。

JavaScript动画的优点

相比于CSS动画，JavaScript动画具有以下优点：

更加灵活，可以控制更加复杂的动画效果；
适用于需要交互和状态变化的动画效果；
可以兼容旧版浏览器。

JavaScript动画基础知识

requestAnimationFrame方法

requestAnimationFrame方法是JavaScript中实现动画效果的主要方法之一，它可以让浏览器在下一次重绘之前执行指定的函数，从而实现平滑的动画效果。

语法格式

window.requestAnimationFrame(callback);

callback：指定在下一次重绘之前要执行的函数。

示例代码

function animate() {
  // 动画效果代码
  window.requestAnimationFrame(animate);
}

animate();

setInterval方法

setInterval方法是JavaScript中实现动画效果的另一种方法，它可以按照指定的时间间隔重复执行指定的函数，来实现动画效果。

语法格式

window.setInterval(callback, interval);

callback：指定要执行的函数。
interval：指定执行函数的时间间隔。

示例代码

var id = window.setInterval(function() {
  // 动画效果代码
}, 16);

// 停止定时器
window.clearInterval(id);

JavaScript动画的实现步骤

步骤一：获取DOM元素

使用document.querySelector()或document.getElementById()等方法获取要实现动画的DOM元素。

步骤二：设置动画的起始状态

设置DOM元素的初始状态，如位置、大小、颜色等。

步骤三：使用requestAnimationFrame或setInterval实现动画效果

使用requestAnimationFrame或setInterval方法实现DOM元素的动画效果，改变其位置、大小、颜色等属性。

步骤四：停止动画

当需要停止动画时，使用clearInterval清除定时器或者停止requestAnimationFrame。

示例1：圆形运动动画

下面是一个简单的圆形运动动画示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript动画效果示例1：圆形运动动画</title>
  <style>
    #box {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: blue;
      position: absolute;
    }
  </style>
</head>
<body>
  <div id="box"></div>
  <script>
    var box = document.getElementById('box');
    var x = 0;
    var y = 0;
    var speedX = 3;
    var speedY = 5;

    function animate() {
      x += speedX;
      y += speedY;

      // 边界检测
      if (x < 0 || x > window.innerWidth - box.offsetWidth) {
        speedX = -speedX;
      }
      if (y < 0 || y > window.innerHeight - box.offsetHeight) {
        speedY = -speedY;
      }

      box.style.left = x + 'px';
      box.style.top = y + 'px';

      window.requestAnimationFrame(animate);
    }

    animate();
  </script>
</body>
</html>

代码解释：

使用CSS设置圆形的样式；
使用requestAnimationFrame方法实现动画效果；
使用变量记录圆形的位置和速度；
在动画中对圆形的位置进行更新，并检测是否超出边界。

示例2：弹球效果动画

下面是一个弹球效果动画示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript动画效果示例2：弹球效果动画</title>
  <style>
    #box {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: blue;
      position: absolute;
    }
  </style>
</head>
<body>
  <div id="box"></div>
  <script>
    var box = document.getElementById('box');
    var x = window.innerWidth / 2 - box.offsetWidth / 2;
    var y = window.innerHeight / 2 - box.offsetHeight / 2;
    var speedX = 3;
    var speedY = 5;
    var gravity = 0.3;

    function animate() {
      x += speedX;
      y += speedY;

      // 弹球反弹
      if (x < 0 || x > window.innerWidth - box.offsetWidth) {
        speedX = -speedX;
      }
      if (y < 0 || y > window.innerHeight - box.offsetHeight) {
        speedY = -speedY + gravity;
      }

      // 地面反弹
      if (y > window.innerHeight - box.offsetHeight) {
        y = window.innerHeight - box.offsetHeight;
      }

      box.style.left = x + 'px';
      box.style.top = y + 'px';

      window.requestAnimationFrame(animate);
    }

    animate();
  </script>
</body>
</html>

代码解释：