1. Python技术站首页
  2. 其他
  3. JavaScript

JavaScript实现烟花绽放动画效果

• JavaScript

下面就是JavaScript实现烟花绽放动画效果的完整攻略。

前置知识

在进行本教程之前，你需要掌握以下的前置知识：

  • HTML、CSS基础
  • JavaScript基础语法
  • Canvas基础

如果你还不熟悉这些，可以先去学习一下。

实现思路

要实现烟花绽放动画效果，我们需要做以下的一些事情：

  1. 在页面中创建一个Canvas元素，用来绘制烟花图案。
  2. 监听鼠标点击事件，当用户点击页面时，在点击位置创建一个烟花。
  3. 在创建的烟花中，随机生成一些花瓣，然后让它们向外扩散。
  4. 在每个扩散的花瓣中再次生成一些小花瓣，让它们向外扩散。
  5. 等到所有花瓣都扩散完毕之后，烟花会变成一个白色的圆，然后逐渐消失。

下面我们就来一步一步实现这个效果。

步骤一：创建Canvas元素

首先在HTML的body中创建一个Canvas元素：

<canvas id="fireworks"></canvas>

然后在JavaScript中获取这个元素，并设置它的大小：

const canvas = document.getElementById('fireworks');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

步骤二：监听鼠标点击事件

接下来我们要监听鼠标点击事件，当用户点击页面时，就在点击位置创建一个烟花。这里我们可以使用canvas的addEventListener方法来实现：

canvas.addEventListener('click', function(event) {
  createFirework(event.clientX, event.clientY);
}, false);

这个方法会在canvas上监听鼠标点击事件，并在点击位置创建一个烟花。

步骤三：随机生成花瓣并扩散

在创建的烟花中，我们需要随机生成一些花瓣，并让它们向外扩散。我们可以先在烟花的构造函数中生成这些花瓣：

function Firework(x, y) {
  this.x = x;
  this.y = y;
  this.age = 0;
  this.lifespan = 100;
  this.particles = [];

  for (let i = 0; i < 100; i++) {
    const particle = {
      x: this.x,
      y: this.y,
      vx: Math.random() * 3 - 1.5,
      vy: Math.random() * 3 - 1.5,
      color: `hsl(${Math.random() * 360}, 50%, 50%)`
    };
    this.particles.push(particle);
  }
}

这段代码会在烟花对象中创建一个particles数组，并在其中生成100个花瓣。

然后，在烟花对象的update方法中，我们需要让每个花瓣向外扩散：

Firework.prototype.update = function() {
  for (let i = 0; i < this.particles.length; i++) {
    const particle = this.particles[i];
    particle.vx *= 0.9;
    particle.vy *= 0.9;
    particle.x += particle.vx;
    particle.y += particle.vy;
    particle.color = `hsl(${Math.random() * 360}, 50%, 50%)`;
  }
  this.age++;
};

这段代码会让每个花瓣的速度逐渐减小，并使其向外扩散。

步骤四：生成小花瓣并扩散

接下来我们要在每个扩散的花瓣中再次生成一些小花瓣，并让它们向外扩散。我们可以先在烟花对象的update方法中，检查花瓣是否到达了极限速度，然后在它们的位置生成一些小花瓣：

Firework.prototype.update = function() {
  for (let i = 0; i < this.particles.length; i++) {
    const particle = this.particles[i];
    particle.vx *= 0.9;
    particle.vy *= 0.9;
    particle.x += particle.vx;
    particle.y += particle.vy;
    particle.color = `hsl(${Math.random() * 360}, 50%, 50%)`;

    if (Math.abs(particle.vx) < 0.05 && Math.abs(particle.vy) < 0.05) {
      this.createParticles(particle.x, particle.y);
    }
  }
  this.age++;
};

这段代码会在花瓣速度达到一定程度之后，在当前位置生成一些小花瓣。

然后，我们需要在烟花对象中添加一个方法createParticles，用来生成小花瓣：

Firework.prototype.createParticles = function(x, y) {
  for (let i = 0; i < 50; i++) {
    const particle = {
      x: x,
      y: y,
      vx: Math.random() * 3 - 1.5,
      vy: Math.random() * 3 - 1.5,
      color: `hsl(${Math.random() * 360}, 50%, 50%)`
    };
    this.particles.push(particle);
  }
};

这段代码会在指定位置生成50个小花瓣，并加入到烟花对象的particles数组中。

步骤五：变成白色圆并逐渐消失

等到所有花瓣都扩散完毕之后，烟花会变成一个白色的圆，然后逐渐消失。我们可以在烟花对象的update方法中，检查是否到达了寿命极限，然后将烟花变成一个白色圆：

Firework.prototype.update = function() {
  if (this.age > this.lifespan) {
    this.particles = [{
      x: this.x,
      y: this.y,
      vx: 0,
      vy: 0,
      color: '#ffffff'
    }];
  } else {
    for (let i = 0; i < this.particles.length; i++) {
      const particle = this.particles[i];
      particle.vx *= 0.9;
      particle.vy *= 0.9;
      particle.x += particle.vx;
      particle.y += particle.vy;
      particle.color = `hsl(${Math.random() * 360}, 50%, 50%)`;

      if (Math.abs(particle.vx) < 0.05 && Math.abs(particle.vy) < 0.05) {
        this.createParticles(particle.x, particle.y);
      }
    }
    this.age++;
  }
};

这段代码会在烟花寿命结束之后，将烟花对象的particles数组中只保留一个白色的花瓣。

然后，我们需要在烟花对象的draw方法中，绘制花瓣：

Firework.prototype.draw = function(context) {
  for (let i = 0; i < this.particles.length; i++) {
    const particle = this.particles[i];
    context.beginPath();
    context.fillStyle = particle.color;
    context.arc(particle.x, particle.y, 2, 0, Math.PI * 2, false);
    context.fill();
  }
};

这段代码会将烟花对象的所有花瓣绘制出来。

示例说明一：在火箭上实现烟花绽放

我们可以先在页面中创建一个火箭对象，然后让它在页面上飞行。当火箭到达指定位置时，就在它所在位置创建一个烟花对象。

可以参考以下的示例代码：

const canvas = document.getElementById('fireworks');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const context = canvas.getContext('2d');

class Rocket {
  constructor(x, y, width, height, vx, vy) {
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    this.vx = vx;
    this.vy = vy;
    this.exploded = false;
    this.explosion = null;
  }

  move() {
    this.x += this.vx;
    this.y += this.vy;
  }

  draw() {
    if (this.exploded) {
      this.explosion.draw(context);
    } else {
      context.fillStyle = '#000000';
      context.fillRect(this.x, this.y, this.width, this.height);
    }
  }

  checkPosition() {
    if (this.y < window.innerHeight / 2) {
      this.explode();
    }
  }

  explode() {
    this.exploded = true;
    this.explosion = new Firework(this.x + this.width / 2, this.y + this.height);
  }
}

class Firework {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.age = 0;
    this.lifespan = 100;
    this.particles = [];

    for (let i = 0; i < 100; i++) {
      const particle = {
        x: this.x,
        y: this.y,
        vx: Math.random() * 3 - 1.5,
        vy: Math.random() * 3 - 1.5,
        color: `hsl(${Math.random() * 360}, 50%, 50%)`
      };
      this.particles.push(particle);
    }
  }

  createParticles(x, y) {
    for (let i = 0; i < 50; i++) {
      const particle = {
        x: x,
        y: y,
        vx: Math.random() * 3 - 1.5,
        vy: Math.random() * 3 - 1.5,
        color: `hsl(${Math.random() * 360}, 50%, 50%)`
      };
      this.particles.push(particle);
    }
  }

  update() {
    if (this.age > this.lifespan) {
      this.particles = [{
        x: this.x,
        y: this.y,
        vx: 0,
        vy: 0,
        color: '#ffffff'
      }];
    } else {
      for (let i = 0; i < this.particles.length; i++) {
        const particle = this.particles[i];
        particle.vx *= 0.9;
        particle.vy *= 0.9;
        particle.x += particle.vx;
        particle.y += particle.vy;
        particle.color = `hsl(${Math.random() * 360}, 50%, 50%)`;

        if (Math.abs(particle.vx) < 0.05 && Math.abs(particle.vy) < 0.05) {
          this.createParticles(particle.x, particle.y);
        }
      }
      this.age++;
    }
  }

  draw() {
    for (let i = 0; i < this.particles.length; i++) {
      const particle = this.particles[i];
      context.beginPath();
      context.fillStyle = particle.color;
      context.arc(particle.x, particle.y, 2, 0, Math.PI * 2, false);
      context.fill();
    }
  }
}

function animate() {
  requestAnimationFrame(animate);
  context.clearRect(0, 0, window.innerWidth, window.innerHeight);

  rocket.move();
  rocket.draw();
  rocket.checkPosition();

  if (rocket.exploded) {
    rocket.explosion.update();
    rocket.explosion.draw();
  }
}

const rocket = new Rocket(0, window.innerHeight - 50, 50, 50, 2, -5);

animate();

这段代码会创建一个Rocket对象，并让它在页面上飞行。当Rocket对象到达指定位置时，就在它所在位置创建一个烟花对象。

示例说明二：多个烟花同时绽放

我们可以在火箭到达指定位置之后，随机生成一些烟花对象。可以参考以下的示例代码：

const canvas = document.getElementById('fireworks');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const context = canvas.getContext('2d');

class Rocket {
  constructor(x, y, width, height, vx, vy) {
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    this.vx = vx;
    this.vy = vy;
    this.exploded = false;
    this.explosions = [];
  }

  move() {
    this.x += this.vx;
    this.y += this.vy;
  }

  draw() {
    if (this.exploded) {
      for (let i = 0; i < this.explosions.length; i++) {
        this.explosions[i].draw(context);
      }
    } else {
      context.fillStyle = '#000000';
      context.fillRect(this.x, this.y, this.width, this.height);
    }
  }

  checkPosition() {
    if (this.y < window.innerHeight / 2) {
      this.explode();
    }
  }

  explode() {
    this.exploded = true;

    for (let i = 0; i < 10; i++) {
      const explosion = new Firework(this.x + this.width / 2, this.y + this.height);
      this.explosions.push(explosion);
    }
  }
}

class Firework {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.age = 0;
    this.lifespan = 100;
    this.particles = [];

    for (let i = 0; i < 100; i++) {
      const particle = {
        x: this.x,
        y: this.y,
        vx: Math.random() * 3 - 1.5,
        vy: Math.random() * 3 - 1.5,
        color: `hsl(${Math.random() * 360}, 50%, 50%)`
      };
      this.particles.push(particle);
    }
  }

  createParticles(x, y) {
    for (let i = 0; i < 50; i++) {
      const particle = {
        x: x,
        y: y,
        vx: Math.random() * 3 - 1.5,
        vy: Math.random() * 3 - 1.5,
        color: `hsl(${Math.random() * 360}, 50%, 50%)`
      };
      this.particles.push(particle);
    }
  }

  update() {
    if (this.age > this.lifespan) {
      this.particles = [{
        x: this.x,
        y: this.y,
        vx: 0,
        vy: 0,
        color: '#ffffff'
      }];
    } else {
      for (let i = 0; i < this.particles.length; i++) {
        const particle = this.particles[i];
        particle.vx *= 0.9;
        particle.vy *= 0.9;
        particle.x += particle.vx;
        particle.y += particle.vy;
        particle.color = `hsl(${Math.random() * 360}, 50%, 50%)`;

        if (Math.abs(particle.vx) < 0.05 && Math.abs(particle.vy) < 0.05) {
          this.createParticles(particle.x, particle.y);
        }
      }
      this.age++;
    }
  }

  draw() {
    for (let i = 0; i < this.particles.length; i++) {
      const particle = this.particles[i];
      context.beginPath();
      context.fillStyle = particle.color;
      context.arc(particle.x, particle.y, 2, 0, Math.PI * 2, false);
      context.fill();
    }
  }
}

function animate() {
  requestAnimationFrame(animate);
  context.clearRect(0, 0, window.innerWidth, window.innerHeight);

  rocket.move();
  rocket.draw();
  rocket.checkPosition();

  if (rocket.exploded) {
    for (let i = 0; i < rocket.explosions.length; i++) {
      rocket.explosions[i].update();
      rocket.explosions[i].draw();
    }
  }
}

const rocket = new Rocket(0, window.innerHeight - 50, 50, 50, 2, -5);

animate();

这段代码会创建一个Rocket对象，并让它在页面上飞行。当Rocket对象到达指定位置时，会随机生成10个烟花对象。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript实现烟花绽放动画效果 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • javascript中运用闭包和自执行函数解决大量的全局变量问题

    当我们在JavaScript中编写代码时，如果不使用闭包或自执行函数，大量的全局变量就会污染全局命名空间，导致代码难以维护、调试和重构。因此，我们需要使用闭包或自执行函数来保持代码的可读性、可维护性，并且保护全局命名空间。下面是使用闭包和自执行函数解决全局变量问题的攻略： 1. 使用闭包 1.1 什么是闭包？ 闭包是指在函数内部创建另一个函数，该函数可以访问…

    JavaScript 2023年6月10日
    00

  • 如何自己实现JavaScript的new操作符

    下面就是如何自己实现JavaScript的new操作符的攻略。 什么是new操作符 在JavaScript中，new操作符用于创建一个实例对象，它接收一个函数作为参数，并调用该函数构造一个新的实例对象。基本语法如下： var instance = new Constructor(); 其中Constructor是要被实例化的函数，在该函数内部使用了this关…

    JavaScript 2023年6月10日
    00

  • JavaScript入门教程(5) js Screen屏幕对象

    JavaScript入门教程(5) js Screen屏幕对象 简介 Screen 对象代表了当前浏览器所在电脑的屏幕信息。通过 Screen 对象，我们可以获取到客户端屏幕的宽、高、物理宽、高、可用宽、高等相关信息，可以方便设计响应式页面。 属性 Screen.width 获取当前屏幕的宽度。 Screen.height 获取当前屏幕的高度。 Screen…

    JavaScript 2023年5月27日
    00

  • Navigator sendBeacon页面关闭也能发送请求方法示例

    Navigator.sendBeacon()是一个异步方法，用于在浏览器后台向服务器发送小量数据。通常，该方法在页面关闭时使用，以确保在离开页面前将相关数据传输到服务器。该方法可以将数据发送到服务器，即使页面已关闭或卸载。 下面是使用sendBeacon()方法的完整攻略： 1. 定义数据 定义要传递的数据。可以使用FormData或JSON等格式。 con…

    JavaScript 2023年6月11日
    00

  • JavaScript事件概念详解(区分静态注册和动态注册)

    JavaScript事件概念详解(区分静态注册和动态注册) 什么是JavaScript事件？ JavaScript事件是指在DOM元素上进行的用户操作或者其他程序事件（比如页面加载完成）。 事件的触发和响应 当一个事件被触发时，浏览器首先会寻找和这个事件相关联的DOM元素，然后执行用户定义的JavaScript代码，来响应这个事件。事件可以触发多次，Java…

    JavaScript 2023年6月10日
    00

  • Javascript Global encodeURI() 函数

    以下是关于JavaScript Global对象中encodeURI()函数的完整攻略，包括两个示例说明。 JavaScript Global对象中的encodeURI()函数 JavaScript Global对象中的encodeURI()函数用于将一个URI字符串进行编码以便在URI中使用。URI（Uniform Resource Identifier）…

    JavaScript 2023年5月11日
    00

  • 深入浅析javascript函数中with

    深入浅析JavaScript函数中with的完整攻略 1. 理解with语句的作用 在JavaScript函数中，使用with语句可以将一个对象作为作用域，从而简化访问该对象的属性或者方法。可以理解为with语句是一种便利的方式，可以使得代码更加简洁。 with语句的语法如下： with(object){ //可以直接访问object中的属性或方法 } 2.…

    JavaScript 2023年5月27日
    00

  • 浅谈react-router@4.0 使用方法和源码分析

    浅谈react-router@4.0使用方法和源码分析 简介 React-Router是在React上的一个强大路由器。它可以处理导航并使页面发生渐进式加载。React-Router@4相对于上一版本有了许多改进，如无需添加任何特定的MIXIN，以及更好的文档。 使用方法 在使用React-Router之前，你必须先安装它。你可以直接在终端中输入命令来进行安…

    JavaScript 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部