js实现开屏动画

使用CSS动画实现开屏动画

通过CSS的@keyframes和animation属性可以轻松实现开屏动画效果。定义一个全屏遮罩层，应用动画效果后自动隐藏。

<style>
  .splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    animation: fadeOut 1.5s ease-in-out forwards;
  }

  @keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; visibility: hidden; }
  }
</style>

<div class="splash-screen">
  <img src="logo.png" alt="App Logo">
</div>

使用JavaScript控制动画

通过JavaScript可以更精确地控制动画时间和行为，添加事件监听确保资源加载完成后再执行动画。

window.addEventListener('load', function() {
  const splash = document.querySelector('.splash-screen');
  setTimeout(() => {
    splash.style.opacity = '0';
    setTimeout(() => {
      splash.style.display = 'none';
    }, 1000);
  }, 2000);
});

结合Canvas实现复杂动画

对于更复杂的开屏动画效果，可以使用Canvas绘制。这种方法适合需要自定义图形动画的场景。

<canvas id="splashCanvas"></canvas>

<script>
  const canvas = document.getElementById('splashCanvas');
  const ctx = canvas.getContext('2d');

  function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
  }

  window.addEventListener('resize', resizeCanvas);
  resizeCanvas();

  function animate() {
    // 绘制动画逻辑
    requestAnimationFrame(animate);
  }

  animate();
</script>

使用GSAP库实现高级动画

GSAP是一个强大的动画库，可以创建更流畅和复杂的开屏动画效果。

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>

<script>
  gsap.to(".splash-screen", {
    opacity: 0,
    duration: 1.5,
    ease: "power2.inOut",
    onComplete: function() {
      document.querySelector(".splash-screen").style.display = "none";
    }
  });
</script>

响应式设计考虑

确保开屏动画在不同设备上都能正常显示，需要添加响应式设计。

.splash-screen img {
  max-width: 80%;
  height: auto;
}

@media (max-width: 768px) {
  .splash-screen {
    animation-duration: 1s;
  }
}

性能优化建议

避免开屏动画影响页面加载性能，可以考虑以下优化措施：

• 压缩动画使用的图片资源
• 使用CSS硬件加速（transform/opacity）
• 减少复杂的JavaScript计算
• 设置合适的动画持续时间（通常2-3秒为宜）