JS实现的小火箭发射动画效果示例

JS实现的小火箭发射动画效果是一种常见的动态效果，通常在网页中应用较多。以下是该效果的完整攻略：

实现思路

使用HTML和CSS创建火箭图形和发射台。
使用JavaScript实现动画效果。
整合HTML、CSS和JS，将动画集成到网页中。

创建HTML结构

首先，我们需要在HTML中创建火箭和发射台的DOM结构。示例代码如下：

<div class="rocket-container">
  <div class="rocket-body"></div>
  <div class="rocket-fire"></div>
</div>
<div class="launchpad"></div>

上面的代码中，rocket-container代表火箭的整体容器，rocket-body代表火箭的主体部分，rocket-fire代表火箭的发射火焰部分，launchpad代表发射台。

添加CSS样式

接下来，我们需要用CSS来创建火箭和发射台的样式。示例代码如下：

.rocket-container {
  position: relative;
  width: 100px;
  height: 180px;
  margin: 0 auto;
}

.rocket-body {
  position: absolute;
  top: 10px;
  left: 18px;
  width: 64px;
  height: 100px;
  background-color: #fff;
  border-radius: 50px 50px 0 0;
}

.rocket-fire {
  position: absolute;
  bottom: -50px;
  left: 28px;
  width: 44px;
  height: 90px;
  background-color: #f60;
  border-radius: 0 0 35px 35px;
}

.launchpad {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 100px;
  height: 20px;
  background-color: #999;
  transform: translateX(-50%);
  border-radius: 15px;
}

上述代码中，我们使用了position属性来设置元素的定位，width和height属性来设置元素的长宽，background-color属性来设置元素的背景颜色，border-radius属性来设置元素的圆角样式，transform属性来设置元素的位移位置。

添加JavaScript动画

最后，我们需要使用JavaScript实现火箭的发射动画效果。示例代码如下：

// 获取DOM元素
const rocketContainer = document.querySelector('.rocket-container');
const rocketBody = document.querySelector('.rocket-body');
const rocketFire = document.querySelector('.rocket-fire');

// 添加发射动画
function launchRocket() {
  // 火箭起飞动画
  rocketContainer.style.animation = 'launch 3s ease-out';
  rocketBody.style.animation = 'shake 1s ease-in-out';
  rocketFire.style.animation = 'fire 1s ease-in-out';

  // 防止重复点击
  setTimeout(() => {
    rocketContainer.style.animation = '';
    rocketBody.style.animation = '';
    rocketFire.style.animation = '';
  }, 3000);
}

// 监听鼠标点击事件
const launchpad = document.querySelector('.launchpad');
launchpad.addEventListener('click', launchRocket);

上述代码中，在launchRocket函数中，我们为rocket-container、rocket-body和rocket-fire添加了发射动画样式，并指定了对应的动画时间和缓动效果。在动画结束后，我们用setTimeout函数清除了动画样式，防止重复点击。最后，我们使用addEventListener函数，为launchpad元素添加了点击监听事件，触发launchRocket函数，来实现动画效果。

示例说明

以下是两个针对不同场景的示例说明：

示例1：基本火箭发射动画效果

该示例是最基本的火箭发射动画效果，只包含一个火箭和一个发射台。用户点击发射台上的按钮，即可触发火箭的发射动画。可以通过样式调整来改变火箭和发射台的大小和颜色。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>基本火箭发射动画效果示例</title>
    <style>
      .rocket-container {
        position: relative;
        width: 100px;
        height: 180px;
        margin: 0 auto;
      }

      .rocket-body {
        position: absolute;
        top: 10px;
        left: 18px;
        width: 64px;
        height: 100px;
        background-color: #fff;
        border-radius: 50px 50px 0 0;
      }

      .rocket-fire {
        position: absolute;
        bottom: -50px;
        left: 28px;
        width: 44px;
        height: 90px;
        background-color: #f60;
        border-radius: 0 0 35px 35px;
      }

      .launchpad {
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 100px;
        height: 20px;
        background-color: #999;
        transform: translateX(-50%);
        border-radius: 15px;
      }
    </style>
  </head>
  <body>
    <div class="rocket-container">
      <div class="rocket-body"></div>
      <div class="rocket-fire"></div>
    </div>
    <div class="launchpad">
      <button>发射</button>
    </div>
    <script>
      const rocketContainer = document.querySelector('.rocket-container');
      const rocketBody = document.querySelector('.rocket-body');
      const rocketFire = document.querySelector('.rocket-fire');

      function launchRocket() {
        rocketContainer.style.animation = 'launch 3s ease-out';
        rocketBody.style.animation = 'shake 1s ease-in-out';
        rocketFire.style.animation = 'fire 1s ease-in-out';

        setTimeout(() => {
          rocketContainer.style.animation = '';
          rocketBody.style.animation = '';
          rocketFire.style.animation = '';
        }, 3000);
      }

      const launchButton = document.querySelector('button');
      launchButton.addEventListener('click', launchRocket);
    </script>
  </body>
</html>

示例2：多重火箭发射动画效果

该示例是多个火箭同时发射的动画效果，照片墙展示风格的网页在点击图片时，伴随火箭飞往云彩，效果非常华丽。用户点击任何一张图片，即可触发火箭的发射动画。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>多重火箭发射动画效果示例</title>
    <style>
      .rocket-container {
        position: relative;
        width: 100px;
        height: 180px;
        margin: 0 auto;
      }

      .rocket-body {
        position: absolute;
        top: 10px;
        left: 18px;
        width: 64px;
        height: 100px;
        background-color: #fff;
        border-radius: 50px 50px 0 0;
      }

      .rocket-fire {
        position: absolute;
        bottom: -50px;
        left: 28px;
        width: 44px;
        height: 90px;
        background-color: #f60;
        border-radius: 0 0 35px 35px;
      }

      .launchpad {
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 100px;
        height: 20px;
        background-color: #999;
        transform: translateX(-50%);
        border-radius: 15px;
      }

      .photo {
        position: relative;
        width: 200px;
        height: 200px;
        margin: 20px;
        float: left;
      }

      .photo img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
      }
    </style>
  </head>
  <body>
    <div class="rocket-container" id="rocket-1">
      <div class="rocket-body"></div>
      <div class="rocket-fire"></div>
    </div>
    <div class="rocket-container" id="rocket-2">
      <div class="rocket-body"></div>
      <div class="rocket-fire"></div>
    </div>
    <div class="rocket-container" id="rocket-3">
      <div class="rocket-body"></div>
      <div class="rocket-fire"></div>
    </div>
    <div class="launchpad"></div>
    <div class="photo" id="photo-1">
      <img src="https://picsum.photos/seed/1/200/200">
    </div>
    <div class="photo" id="photo-2">
      <img src="https://picsum.photos/seed/2/200/200">
    </div>
    <div class="photo" id="photo-3">
      <img src="https://picsum.photos/seed/3/200/200">
    </div>
    <script>
      const rocket1 = newRocket('rocket-1');
      const rocket2 = newRocket('rocket-2');
      const rocket3 = newRocket('rocket-3');

      function newRocket(id) {
        const rocketContainer = document.getElementById(id);
        const rocketBody = rocketContainer.querySelector('.rocket-body');
        const rocketFire = rocketContainer.querySelector('.rocket-fire');

        function launchRocket() {
          rocketContainer.style.animation = 'launch 3s ease-out';
          rocketBody.style.animation = 'shake 1s ease-in-out';
          rocketFire.style.animation = 'fire 1s ease-in-out';

          setTimeout(() => {
            rocketContainer.style.animation = '';
            rocketBody.style.animation = '';
            rocketFire.style.animation = '';
          }, 3000);
        }

        return launchRocket;
      }

      const photo1 = document.getElementById('photo-1');
      const photo2 = document.getElementById('photo-2');
      const photo3 = document.getElementById('photo-3');

      photo1.addEventListener('click', rocket1);
      photo2.addEventListener('click', rocket2);
      photo3.addEventListener('click', rocket3);
    </script>
  </body>
</html>

上述代码中，在newRocket函数中，我们动态创建了随点击不同而触发不同的发射器，提供了多重火箭的功能。每个发射器在触发时，会执行与单一发射器相同的发射动画效果。通过多个图片点击触发不同的发射器，实现了多个火箭同时发射的动画效果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS实现的小火箭发射动画效果示例 - Python技术站