当前位置：首页 > JavaScript

js实现图片抖动效果

2026-04-04 09:18:31JavaScript

实现图片抖动效果的几种方法

使用CSS动画

通过CSS的@keyframes定义抖动动画，并应用到图片元素上。这种方法性能较好，适合简单抖动效果。

.shake {
  animation: shake 0.5s infinite;
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

const img = document.querySelector('img');
img.classList.add('shake');

使用JavaScript定时器

通过setInterval不断修改图片位置实现抖动效果，适合需要更复杂控制的场景。

function shakeImage(element, duration = 500, distance = 5) {
  const startTime = Date.now();
  const originalPosition = element.style.transform || 'translateX(0)';

  const interval = setInterval(() => {
    const elapsed = Date.now() - startTime;
    if (elapsed >= duration) {
      clearInterval(interval);
      element.style.transform = originalPosition;
      return;
    }

    const progress = elapsed / duration;
    const offset = Math.sin(progress * Math.PI * 10) * distance;
    element.style.transform = `translateX(${offset}px)`;
  }, 16);
}

// 使用示例
const img = document.querySelector('img');
shakeImage(img, 1000, 10);

使用GSAP动画库

GreenSock Animation Platform (GSAP)提供更强大的动画控制能力。

// 先引入GSAP库
gsap.to("img", {
  x: 10,
  duration: 0.1,
  repeat: 5,
  yoyo: true,
  ease: "power1.inOut"
});

三维抖动效果

结合CSS 3D变换创建更生动的抖动效果。

.shake-3d {
  animation: shake3d 0.8s infinite;
}

@keyframes shake3d {
  0%, 100% { transform: translate3d(0, 0, 0); }
  20% { transform: translate3d(-5px, 0, 5px); }
  40% { transform: translate3d(5px, 0, -5px); }
  60% { transform: translate3d(-5px, 0, -5px); }
  80% { transform: translate3d(5px, 0, 5px); }
}

随机抖动算法

通过随机数生成更自然的抖动效果。

js实现图片抖动效果

function randomShake(element, duration = 1000) {
  const startTime = Date.now();
  const originalTransform = element.style.transform;

  const animate = () => {
    const elapsed = Date.now() - startTime;
    if (elapsed >= duration) {
      element.style.transform = originalTransform;
      return;
    }

    const x = (Math.random() * 10) - 5;
    const y = (Math.random() * 10) - 5;
    element.style.transform = `translate(${x}px, ${y}px)`;
    requestAnimationFrame(animate);
  };

  animate();
}

每种方法都有其适用场景，CSS动画适合简单需求，JavaScript实现提供更多控制，GSAP适合复杂动画，3D效果和随机算法可以创建更丰富的视觉效果。