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秒为宜）
