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的参数改为目标元素的选择器即可。