js实现窗口抖动
实现窗口抖动效果
窗口抖动是一种常见的视觉反馈效果，可以通过CSS和JavaScript结合实现。以下是两种实现方式：
使用CSS动画和JavaScript触发
.shake {
animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes shake {
10%, 90% { transform: translateX(-5px); }
20%, 80% { transform: translateX(10px); }
30%, 50%, 70% { transform: translateX(-15px); }
40%, 60% { transform: translateX(15px); }
}function shakeElement(element) {
element.classList.add('shake');
element.addEventListener('animationend', () => {
element.classList.remove('shake');
}, {once: true});
}
// 使用示例
const windowElement = document.querySelector('.window');
shakeElement(windowElement);纯JavaScript实现
function shakeWindow(element, duration = 500, distance = 10) {
const startTime = Date.now();
const originalPosition = element.getBoundingClientRect().left;
function update() {
const elapsed = Date.now() - startTime;
const progress = elapsed / duration;
if (progress >= 1) {
element.style.transform = '';
return;
}
// 使用正弦函数创建抖动效果
const shake = Math.sin(progress * Math.PI * 10) *
(1 - progress) * distance;
element.style.transform = `translateX(${shake}px)`;
requestAnimationFrame(update);
}
update();
}
// 使用示例
const windowElement = document.querySelector('.window');
shakeWindow(windowElement);增强版抖动效果
以下代码实现了更自然的多方向抖动效果：
function advancedShake(element, {
duration = 700,
intensity = 15,
shakeCount = 5
} = {}) {
const startTime = Date.now();
const originalTransform = element.style.transform;
function update() {
const elapsed = Date.now() - startTime;
const progress = elapsed / duration;
if (progress >= 1) {
element.style.transform = originalTransform;
return;
}
// 计算当前阶段的衰减系数
const decay = 1 - progress;
// 随机生成X和Y方向的偏移
const x = (Math.random() * 2 - 1) * intensity * decay;
const y = (Math.random() * 2 - 1) * intensity * decay;
element.style.transform = `${originalTransform} translate(${x}px, ${y}px)`;
requestAnimationFrame(update);
}
update();
}注意事项
- 抖动效果会改变元素的transform属性，确保不影响元素原有的transform样式
- 对于频繁触发的抖动效果，建议添加防抖机制
- 在移动设备上使用时，注意性能影响
- 可以通过调整duration和intensity参数控制抖动强度和持续时间
这些方法可以应用于任何DOM元素，只需将querySelector的参数改为目标元素的选择器即可。
