当前位置：首页 > JavaScript

js实现扩散

2026-02-01 14:04:50JavaScript

实现扩散效果的几种方法

在JavaScript中实现扩散效果可以通过多种方式，以下是几种常见的方法：

使用Canvas绘制扩散圆环

通过Canvas的API可以绘制动态扩散的圆环效果。创建一个canvas元素，然后使用requestAnimationFrame实现动画效果。

js实现扩散

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let radius = 0;
const maxRadius = 100;

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(canvas.width/2, canvas.height/2, radius, 0, Math.PI * 2);
  ctx.strokeStyle = 'rgba(0, 150, 255, 0.5)';
  ctx.lineWidth = 2;
  ctx.stroke();

  radius += 1;
  if (radius < maxRadius) {
    requestAnimationFrame(animate);
  }
}
animate();

CSS动画结合JavaScript

通过CSS的transform和opacity属性创建扩散效果，用JavaScript控制动画的触发。

js实现扩散

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

@keyframes diffuse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(5);
    opacity: 0;
  }
}

function createDiffuseCircle(x, y) {
  const circle = document.createElement('div');
  circle.classList.add('diffuse-circle');
  circle.style.left = `${x}px`;
  circle.style.top = `${y}px`;
  document.body.appendChild(circle);

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

document.addEventListener('click', (e) => {
  createDiffuseCircle(e.clientX, e.clientY);
});

使用WebGL实现高级扩散效果

对于更复杂的扩散效果，可以使用WebGL和着色器程序。Three.js等库可以简化这个过程。

import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.SphereGeometry(1, 32, 32);
const material = new THREE.MeshBasicMaterial({ 
  color: 0x0096ff,
  transparent: true,
  opacity: 0.5
});
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

camera.position.z = 5;

let scale = 1;
function animate() {
  requestAnimationFrame(animate);
  scale += 0.01;
  sphere.scale.set(scale, scale, scale);
  if (scale > 3) scale = 1;
  renderer.render(scene, camera);
}
animate();

性能优化建议

对于需要频繁创建和销毁的扩散效果，建议使用对象池技术来重用DOM元素或Three.js对象，避免频繁的创建和垃圾回收。

const circlePool = [];
function getCircle() {
  if (circlePool.length > 0) {
    return circlePool.pop();
  }
  const circle = document.createElement('div');
  circle.classList.add('diffuse-circle');
  return circle;
}

function releaseCircle(circle) {
  circlePool.push(circle);
}

以上方法可以根据具体需求选择适合的实现方式，从简单的CSS动画到复杂的WebGL渲染都能实现不同程度的扩散效果。

标签: js