当前位置：首页 > JavaScript

js实现掉落

2026-04-05 23:18:42JavaScript

实现掉落效果的方法

使用JavaScript实现掉落效果可以通过多种方式完成，以下是几种常见的实现方法：

使用CSS动画结合JavaScript控制

通过CSS定义动画关键帧，再通过JavaScript动态添加元素或触发动画。

.falling {
  animation: fall 3s linear forwards;
}

@keyframes fall {
  from { transform: translateY(-100px); }
  to { transform: translateY(calc(100vh + 100px)); }
}

function createFallingElement() {
  const element = document.createElement('div');
  element.className = 'falling';
  document.body.appendChild(element);

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

// 定期创建掉落元素
setInterval(createFallingElement, 500);

使用requestAnimationFrame实现物理效果

通过requestAnimationFrame逐帧更新元素位置，模拟重力加速度效果。

function startFalling(element) {
  let posY = 0;
  let velocity = 0;
  const gravity = 0.2;

  function animate() {
    velocity += gravity;
    posY += velocity;
    element.style.transform = `translateY(${posY}px)`;

    if (posY < window.innerHeight) {
      requestAnimationFrame(animate);
    } else {
      element.remove();
    }
  }

  requestAnimationFrame(animate);
}

// 创建并启动掉落元素
function createPhysicsElement() {
  const element = document.createElement('div');
  document.body.appendChild(element);
  startFalling(element);
}

setInterval(createPhysicsElement, 1000);

使用Canvas实现批量掉落效果

对于需要大量掉落元素的场景，使用Canvas会更高效。

<canvas id="fallingCanvas"></canvas>

const canvas = document.getElementById('fallingCanvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const items = [];
const gravity = 0.5;

class FallingItem {
  constructor() {
    this.x = Math.random() * canvas.width;
    this.y = -20;
    this.size = Math.random() * 10 + 5;
    this.speed = Math.random() * 2 + 1;
  }

  update() {
    this.y += this.speed;
    this.speed += gravity;
  }

  draw() {
    ctx.fillStyle = '#000';
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
    ctx.fill();
  }

  isOut() {
    return this.y > canvas.height + this.size;
  }
}

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

  // 随机添加新元素
  if (Math.random() < 0.05) {
    items.push(new FallingItem());
  }

  // 更新和绘制所有元素
  items.forEach((item, index) => {
    item.update();
    item.draw();

    // 移除超出屏幕的元素
    if (item.isOut()) {
      items.splice(index, 1);
    }
  });

  requestAnimationFrame(animate);
}

animate();

实现细节优化

添加随机性

可以通过随机设置以下参数使掉落效果更自然：

初始位置
大小
下落速度
旋转角度

性能考虑

对于大量元素，建议：

使用对象池复用元素
对于不需要精确物理模拟的场景，使用CSS动画
限制同时存在的元素数量

交互增强

可以添加鼠标交互，如点击元素使其消失或改变轨迹：

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

  items.forEach((item, index) => {
    const distance = Math.sqrt(
      Math.pow(mouseX - item.x, 2) + 
      Math.pow(mouseY - item.y, 2)
    );

    if (distance < item.size) {
      items.splice(index, 1);
    }
  });
});