利用JavaScript制作一个搞怪的兔子动画效果

时间：2023-12-09

制作一个搞怪的兔子动画效果需要使用JavaScript和CSS。以下是具体的步骤：

实现步骤

1. 创建网页

首先，需要创建一个网页，可以使用HTML来实现。在网页中，需要有一个用来承载兔子动画效果的容器，例如：

<!DOCTYPE html>
<html>
  <head>
    <title>搞怪的兔子动画效果</title>
  </head>
  <body>
    <div id="rabbit-container"></div>
  </body>
</html>

2. 构建样式

接下来，需要使用CSS来为容器添加样式。可以设置容器的宽度、高度、背景颜色等属性。另外，还需要为兔子添加样式。例如：

#rabbit-container {
  width: 500px;
  height: 500px;
  background-color: #ddd;
}

.rabbit {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0 10px #000;
}

3. 编写JavaScript

在HTML中引入JavaScript文件，并在文件中编写兔子动画效果的代码。可以使用setInterval函数来定时重复执行某个函数，从而实现动画效果。下面的代码实现了添加一个兔子，并且让它在容器中移动：

const container = document.getElementById('rabbit-container');

function addRabbit() {
  const rabbit = document.createElement('div');
  rabbit.classList.add('rabbit');
  rabbit.style.top = `${Math.random() * 400}px`;
  rabbit.style.left = `${Math.random() * 400}px`;
  container.appendChild(rabbit);

  let x = Math.random() < 0.5 ? -1 : 1;
  let y = Math.random() < 0.5 ? -1 : 1;

  setInterval(() => {
    const left = rabbit.offsetLeft;
    const top = rabbit.offsetTop;

    if (left < 0 || left > container.offsetWidth - rabbit.offsetWidth) {
      x = -x;
    }

    if (top < 0 || top > container.offsetHeight - rabbit.offsetHeight) {
      y = -y;
    }

    rabbit.style.left = `${left + x}px`;
    rabbit.style.top = `${top + y}px`;
  }, 10);
}

setInterval(addRabbit, 500);

每500毫秒执行一次addRabbit函数，该函数会在容器中添加一个兔子，并且为该兔子添加移动的动画效果。

4. 运行动画

最后，需要将HTML文件在浏览器中运行，就可以看到兔子动画效果了。可以不断刷新页面，产生不同的动画效果。

示例说明

示例1：控制兔子数量

如果希望控制兔子的数量，可以将动态添加兔子的代码放入一个函数中，并且使用一个变量来存储当前兔子的数量。例如：

const container = document.getElementById('rabbit-container');
let rabbitCount = 0;

function addRabbit() {
  if (rabbitCount >= 10) {
    return;
  }

  const rabbit = document.createElement('div');
  rabbit.classList.add('rabbit');
  rabbit.style.top = `${Math.random() * 400}px`;
  rabbit.style.left = `${Math.random() * 400}px`;
  container.appendChild(rabbit);

  let x = Math.random() < 0.5 ? -1 : 1;
  let y = Math.random() < 0.5 ? -1 : 1;

  setInterval(() => {
    const left = rabbit.offsetLeft;
    const top = rabbit.offsetTop;

    if (left < 0 || left > container.offsetWidth - rabbit.offsetWidth) {
      x = -x;
    }

    if (top < 0 || top > container.offsetHeight - rabbit.offsetHeight) {
      y = -y;
    }

    rabbit.style.left = `${left + x}px`;
    rabbit.style.top = `${top + y}px`;
  }, 10);

  rabbitCount++;
}

setInterval(addRabbit, 500);

这个示例中，控制兔子的数量不超过10只，当数量达到10只时，将不再添加任何兔子，确保动画不会过于拥挤。

示例2：使用不同的颜色

如果希望兔子的颜色不同，可以在添加兔子时，随机选择一种颜色。例如：

const container = document.getElementById('rabbit-container');

function addRabbit() {
  const rgb = [
    Math.floor(Math.random() * 255),
    Math.floor(Math.random() * 255),
    Math.floor(Math.random() * 255),
  ];
  const color = `rgb(${rgb[0]},${rgb[1]},${rgb[2]})`;

  const rabbit = document.createElement('div');
  rabbit.classList.add('rabbit');
  rabbit.style.top = `${Math.random() * 400}px`;
  rabbit.style.left = `${Math.random() * 400}px`;
  rabbit.style.backgroundColor = color;
  container.appendChild(rabbit);

  let x = Math.random() < 0.5 ? -1 : 1;
  let y = Math.random() < 0.5 ? -1 : 1;

  setInterval(() => {
    const left = rabbit.offsetLeft;
    const top = rabbit.offsetTop;

    if (left < 0 || left > container.offsetWidth - rabbit.offsetWidth) {
      x = -x;
    }

    if (top < 0 || top > container.offsetHeight - rabbit.offsetHeight) {
      y = -y;
    }

    rabbit.style.left = `${left + x}px`;
    rabbit.style.top = `${top + y}px`;
  }, 10);
}

setInterval(addRabbit, 500);

这个示例中，使用Math.random函数来生成RGB颜色，然后设置兔子的背景颜色为随机生成的颜色。这样就产生了不同颜色的兔子动画效果。

上一篇：javascript动画之磁性吸附效果篇 下一篇：一次围绕setTimeout的前端面试经验分享