颤动 - JavaScript

颤动是一种视觉效果，其本质是通过快速改变一个元素的位置来达到让它看起来动起来的效果。在 JavaScript 中，我们可以使用 CSS 属性 animation 或者 setInterval 来实现颤动效果。

使用 CSS Animation

CSS Animation 可以通过指定关键帧来实现颤动效果。这种方式的好处是效果会更加平滑，而且比较容易控制。

/* 定义关键帧 */
@keyframes shake {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-5px, 5px); }
  50% { transform: translate(0, 0); }
  75% { transform: translate(5px, -5px); }
  100% { transform: translate(0, 0); }
}

/* 应用动画 */
.element {
  animation: shake 1s ease-in-out infinite;
}

上面的代码会让 element 元素颤动起来，整个过程持续 1 秒，使用 ease-in-out 缓动函数，并且无限循环。

使用 setInterval

setInterval 是 JavaScript 提供的一个定时器，可以让我们通过一些逻辑来实现颤动效果。这种方式比 CSS Animation 更加灵活，我们可以根据自己的需求自由调整颤动效果的时间和幅度。

function shake(element, times = 10, distance = 5, duration = 100) {
  let count = 0;
  const startX = parseInt(window.getComputedStyle(element).getPropertyValue('left'));
  const startY = parseInt(window.getComputedStyle(element).getPropertyValue('top'));

  const timer = setInterval(() => {
    if (count < times) {
      element.style.left = startX + (Math.random() - 0.5) * distance + 'px';
      element.style.top = startY + (Math.random() - 0.5) * distance + 'px';
      count++;
    } else {
      element.style.left = startX + 'px';
      element.style.top = startY + 'px';
      clearInterval(timer);
    }
  }, duration);
}

/* 调用 shake 函数 */
const element = document.querySelector('.element');
shake(element, 10, 5, 100);

上面的代码会让 element 元素颤动 10 次，每次颤动的距离为 5 像素，整个过程持续时间为 100 毫秒。

总结

无论是使用 CSS Animation 还是 setInterval，都可以实现颤动效果。CSS Animation 更加适合简单的颤动，而 setInterval 则更加适合需要复杂逻辑的颤动。根据具体的需求选择合适的实现方式即可。