颤振 - Javascript

简介

颤振（又称震动、抖动）是指在Javascript中，在元素被添加、删除、样式改变等操作时，元素产生的短暂的抖动效果。颤振可以为网站增添趣味性，同时提高用户体验。

实现方法

CSS动画

在CSS中，我们可以通过keyframes定义一个简单的动画，然后使用animation属性应用到元素上。例如：

@keyframes shake {
  0% { transform: translate(0, 0); }
  10% { transform: translate(-10px, 0); }
  20% { transform: translate(10px, 0); }
  30% { transform: translate(-10px, 0); }
  40% { transform: translate(10px, 0); }
  50% { transform: translate(-10px, 0); }
  60% { transform: translate(10px, 0); }
  70% { transform: translate(-10px, 0); }
  80% { transform: translate(10px, 0); }
  90% { transform: translate(-10px, 0); }
  100% { transform: translate(0, 0); }
}

.shake {
  animation: shake 0.5s;
}

这样我们就定义了一个名称为shake的动画，然后在元素上添加class为shake，元素就可以在0.5秒内产生颤振效果。

Javascript实现

在Javascript中，我们可以使用setInterval实现颤振效果。例如：

function shake(element, times, interval) {
  let count = 0;
  let intervalId = setInterval(() => {
    if (++count === times) {
      clearInterval(intervalId);
    }
    element.style.transform = 'translate(' + (
      Math.floor(Math.random() * 3) - 1) + 'px, ' + (
      Math.floor(Math.random() * 3) - 1) + 'px)';
  }, interval);
}

这样我们就定义了一个名为shake的函数，它可以接受三个参数：元素对象、颤振次数和颤振间隔时间。例如在元素上添加下面的事件监听器：

document.getElementById('myElement').addEventListener('click', () => {
  shake(document.getElementById('myElement'), 10, 100);
});

这样当用户点击myElement元素时，myElement就产生了10次颤振效果。

总结

以上是两种Javascript中实现颤振的方法，其中CSS实现较为简单，可以直接使用。而Javascript实现虽然稍微麻烦一点，但是我们可以更加细致地调整颤振的次数和间隔时间，以达到更为理想的效果。