js实现光圈效果

使用CSS和JavaScript实现光圈效果

光圈效果可以通过CSS动画结合JavaScript动态控制实现。以下是一种常见的实现方式，通过圆形元素和透明度变化模拟光圈扩散效果。

创建HTML结构

<div class="circle-container">
  <div class="circle"></div>
</div>

添加基础CSS样式

.circle-container {
  position: relative;
  width: 100px;
  height: 100px;
}

.circle {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(0, 150, 255, 0.5);
  transform: scale(0);
  animation: pulse 2s infinite;
}

添加动画关键帧

@keyframes pulse {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

使用JavaScript动态创建光圈

function createRipple(event) {
  const container = document.querySelector('.circle-container');
  const circle = document.createElement('div');
  circle.classList.add('circle');

  // 设置光圈位置（基于点击事件）
  circle.style.left = `${event.clientX - container.offsetLeft - 50}px`;
  circle.style.top = `${event.clientY - container.offsetTop - 50}px`;

  container.appendChild(circle);

  // 动画结束后移除元素
  circle.addEventListener('animationend', () => {
    circle.remove();
  });
}

// 点击触发光圈
document.addEventListener('click', createRipple);

多光圈同时存在的实现

function createAdvancedRipple() {
  const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00'];
  const container = document.querySelector('.circle-container');

  setInterval(() => {
    const circle = document.createElement('div');
    circle.classList.add('circle');

    // 随机属性
    const size = Math.random() * 50 + 50;
    const color = colors[Math.floor(Math.random() * colors.length)];

    circle.style.width = `${size}px`;
    circle.style.height = `${size}px`;
    circle.style.background = color;
    circle.style.left = `${Math.random() * 100}px`;
    circle.style.top = `${Math.random() * 100}px`;
    circle.style.animationDuration = `${Math.random() * 2 + 1}s`;

    container.appendChild(circle);

    circle.addEventListener('animationend', () => {
      circle.remove();
    });
  }, 500);
}

createAdvancedRipple();

使用Canvas实现高性能光圈

const canvas = document.createElement('canvas');
document.body.appendChild(canvas);
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const ctx = canvas.getContext('2d');

const ripples = [];

class Ripple {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.radius = 0;
    this.maxRadius = 100 + Math.random() * 50;
    this.speed = 1 + Math.random();
    this.opacity = 1;
    this.color = `hsl(${Math.random() * 360}, 100%, 50%)`;
  }

  update() {
    this.radius += this.speed;
    this.opacity = 1 - (this.radius / this.maxRadius);
    return this.radius < this.maxRadius;
  }

  draw() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
    ctx.strokeStyle = this.color.replace(')', `, ${this.opacity})`).replace('hsl', 'hsla');
    ctx.lineWidth = 2;
    ctx.stroke();
  }
}

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 更新和绘制所有光圈
  for (let i = ripples.length - 1; i >= 0; i--) {
    const ripple = ripples[i];
    if (ripple.update()) {
      ripple.draw();
    } else {
      ripples.splice(i, 1);
    }
  }

  requestAnimationFrame(animate);
}

// 点击创建光圈
canvas.addEventListener('click', (e) => {
  ripples.push(new Ripple(e.clientX, e.clientY));
});

animate();

实现光圈跟随鼠标效果

document.addEventListener('mousemove', (e) => {
  const mouseX = e.clientX;
  const mouseY = e.clientY;

  const ripple = document.createElement('div');
  ripple.classList.add('circle');

  ripple.style.left = `${mouseX - 50}px`;
  ripple.style.top = `${mouseY - 50}px`;

  document.body.appendChild(ripple);

  setTimeout(() => {
    ripple.remove();
  }, 2000);
});

这些方法提供了从简单到复杂的光圈效果实现，可以根据具体需求选择合适的方案。CSS方案适合简单场景，Canvas方案则更适合需要高性能和复杂效果的场景。