当前位置：首页 > JavaScript

js实现光圈效果

2026-03-01 09:32:16JavaScript

实现光圈效果的JavaScript方法

光圈效果可以通过多种方式实现，包括CSS动画、Canvas绘图或WebGL。以下是几种常见的实现方法：

使用CSS和JavaScript结合

通过CSS定义动画效果，JavaScript控制触发时机：

js实现光圈效果

.aura {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  box-shadow: 0 0 20px 10px rgba(0, 150, 255, 0.5);
  animation: pulse 2s infinite;
}

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

const element = document.createElement('div');
element.className = 'aura';
document.body.appendChild(element);

使用Canvas绘制动态光圈

Canvas提供了更灵活的控制方式：

js实现光圈效果

const canvas = document.createElement('canvas');
document.body.appendChild(canvas);
const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

let radius = 0;
let growing = true;

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, ${1 - radius/200})`;
  ctx.lineWidth = 10;
  ctx.stroke();

  if(growing) {
    radius += 2;
    if(radius > 200) growing = false;
  } else {
    radius -= 2;
    if(radius < 10) growing = true;
  }

  requestAnimationFrame(animate);
}

animate();

使用WebGL实现高级光圈效果

对于更复杂的光圈效果，WebGL是更好的选择：

// 初始化WebGL上下文
const canvas = document.createElement('canvas');
document.body.appendChild(canvas);
const gl = canvas.getContext('webgl');

// 顶点着色器
const vsSource = `
  attribute vec2 aPosition;
  void main() {
    gl_Position = vec4(aPosition, 0.0, 1.0);
  }
`;

// 片段着色器
const fsSource = `
  precision mediump float;
  uniform vec2 uResolution;
  uniform float uTime;

  void main() {
    vec2 uv = gl_FragCoord.xy / uResolution;
    float dist = distance(uv, vec2(0.5));
    float glow = 0.05 / dist * sin(uTime);
    gl_FragColor = vec4(0.0, 0.5, 1.0, glow);
  }
`;

// 编译着色器程序
const shaderProgram = initShaderProgram(gl, vsSource, fsSource);
// 绘制逻辑
function render(time) {
  // 设置uniform
  gl.uniform1f(gl.getUniformLocation(shaderProgram, 'uTime'), time/1000);
  // 绘制
  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
  requestAnimationFrame(render);
}
requestAnimationFrame(render);

使用GSAP动画库

GSAP可以简化动画实现：

import { gsap } from 'gsap';

const circle = document.createElement('div');
circle.style.cssText = `
  width: 100px; height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,150,255,0.8) 0%, transparent 70%);
  position: absolute;
`;
document.body.appendChild(circle);

gsap.to(circle, {
  scale: 1.5,
  opacity: 0.5,
  duration: 2,
  repeat: -1,
  yoyo: true,
  ease: "sine.inOut"
});