JavaScript实现Flash炫光波动特效

2023年6月10日下午11:05 • JavaScript

下面是JavaScript实现Flash炫光波动特效的攻略：

1. 确定动画效果

首先需要明确所需实现的动画效果。本次实现的是Flash中常见的炫光波动特效，即一个圆形或者椭圆形的波浪状光线不停地往外扩散，并有明暗变化。

2. 绘制圆形或椭圆形

在HTML或者Canvas上绘制圆形或者椭圆形，根据实际需求决定大小、颜色和位置等。可以使用HTML的CSS样式或者Canvas中的API实现。

这里以Canvas API为例，绘制一个椭圆：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radiusX = 100;
const radiusY = 50;

ctx.beginPath();
ctx.ellipse(centerX, centerY, radiusX, radiusY, 0, 0, 2 * Math.PI);
ctx.stroke();

3. 绘制光线

绘制光线需要用到Canvas中的渐变色效果。设定两种颜色，一种是透明的，一种是要展示的颜色。将这两种颜色按照一定的比例渐变，即可得到光线效果。

举例说明，绘制一条从中心点到顶点的光线：

const gradient = ctx.createLinearGradient(centerX, centerY, centerX, centerY - radiusY);
gradient.addColorStop(0, 'rgba(255, 255, 255, 0)');
gradient.addColorStop(1, 'rgba(255, 255, 255, 1)');

ctx.beginPath();
ctx.strokeStyle = gradient;
ctx.moveTo(centerX, centerY);
ctx.lineTo(centerX, centerY - radiusY);
ctx.stroke();

4. 动画效果

将绘制的光线进行平移和缩放，即可得到动画效果。每个光线的平移和缩放需要一定的时间，可采用定时器进行循环实现。

const speed = 0.1; // 光线速度，越小越慢
const maxDistance = 200; // 光线最大扩散距离
const lineCount = 20; // 光线数量
let lines = [];

class Line {
  constructor(angle) {
    this.angle = angle;
    this.distance = 0;
    this.color = `rgba(255, 255, 255, ${Math.random()})`;
  }

  draw() {
    const gradient = ctx.createLinearGradient(centerX, centerY, centerX, centerY - radiusY);
    gradient.addColorStop(0, 'rgba(255, 255, 255, 0)');
    gradient.addColorStop(1, this.color);

    const distanceX = this.distance * Math.cos(this.angle);
    const distanceY = this.distance * Math.sin(this.angle);

    ctx.beginPath();
    ctx.strokeStyle = gradient;
    ctx.moveTo(centerX + distanceX, centerY + distanceY);
    ctx.lineTo(centerX + distanceX, centerY + distanceY - radiusY);
    ctx.stroke();
  }

  update() {
    this.distance += speed;
    if (this.distance > maxDistance) {
      this.distance = 0;
      this.color = `rgba(255, 255, 255, ${Math.random()})`;
    }
    this.draw();
  }
}

for (let i = 0; i < lineCount; i++) {
  const line = new Line(i * Math.PI / (lineCount / 2));
  lines.push(line);
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (line of lines) {
    line.update();
  }
}

setInterval(draw, 10);