js怎么实现抖动
JavaScript 实现抖动效果
抖动效果（Shake Effect）通常用于吸引用户注意力或提示错误操作。以下是几种实现方法：
使用 CSS 动画
通过 CSS 定义抖动动画，再用 JavaScript 触发：
.shake {
animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
20%, 40%, 60%, 80% { transform: translateX(5px); }
}function shakeElement(element) {
element.classList.add('shake');
setTimeout(() => element.classList.remove('shake'), 500);
}纯 JavaScript 实现
通过定时器动态修改元素位置：
function shake(element, intensity = 5, duration = 500) {
const startTime = Date.now();
const interval = setInterval(() => {
const elapsed = Date.now() - startTime;
const progress = elapsed / duration;
if (progress >= 1) {
clearInterval(interval);
element.style.transform = '';
return;
}
const shakeX = intensity * Math.sin(progress * 20) * (1 - progress);
element.style.transform = `translateX(${shakeX}px)`;
}, 16);
}使用第三方库
使用 jQuery 实现抖动效果：
$.fn.shake = function() {
this.css('position','relative');
for(let x = 1; x <= 3; x++) {
this.animate({left: -5}, 50)
.animate({left: 0}, 50)
.animate({left: 5}, 50)
.animate({left: 0}, 50);
}
};应用场景示例
表单验证失败时抖动输入框：
document.querySelector('form').addEventListener('submit', (e) => {
const input = document.querySelector('#username');
if (!input.value) {
shake(input);
e.preventDefault();
}
});性能优化建议
使用 transform 而非 left/top 进行动画，因为 transform 不会触发重排。对于频繁触发的抖动效果，建议使用 CSS 硬件加速：
.shake {
will-change: transform;
backface-visibility: hidden;
perspective: 1000px;
}以上方法可根据具体需求选择，CSS 动画实现最简单，纯 JavaScript 方案最灵活，第三方库适合已有 jQuery 的项目。
