页面加载动画
1.先看效果
2.源代码
"use client"
import React, { useState, useEffect } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
export default function SmoothLoader() {
const [loading, setLoading] = useState(true)
useEffect(() => {
const timer = setTimeout(() => setLoading(false), 4000)
return () => clearTimeout(timer)
}, [])
const circleVariants = {
hidden: { scale: 0, opacity: 0 },
visible: (i: number) => ({
scale: 1,
opacity: 1,
transition: {
delay: i * 0.1,
duration: 0.5,
repeat: Infinity,
repeatType: "reverse" as const,
},
}),
}
const lineVariants = {
hidden: { scaleX: 0 },
visible: {
scaleX: 1,
transition: {
duration: 1,
ease: "easeInOut",
repeat: Infinity,
repeatType: "reverse" as const,
},
},
}
const containerVariants = {
hidden: { opacity: 1 },
visible: {
opacity: 1,
transition: {
when: "beforeChildren",
staggerChildren: 0.2,
},
},
exit: {
opacity: 0,
transition: {
when: "afterChildren",
staggerChildren: 0.1,
staggerDirection: -1,
},
},
}
const itemVariants = {
hidden: { y: 20, opacity: 0 },
visible: {
y: 0,
opacity: 1,
transition: {
duration: 0.5,
ease: "easeOut",
},
},
exit: {
y: -20,
opacity: 0,
transition: {
duration: 0.5,
ease: "easeIn",
},
},
}
return (
{loading ? (
key="loader" className="relative w-64 h-64" variants={containerVariants} initial="hidden" animate="visible" exit="exit" > {[...Array(5)].map((_, i) => ( key={i} className="absolute top-1/2 left-1/2 w-16 h-16 rounded-full border-4 border-white" style={{ transform: `rotate(${i * 72}deg) translate(80px) rotate(-${i * 72}deg)`, }} variants={circleVariants} custom={i} /> ))} className="absolute top-1/2 left-0 w-full h-1 bg-white origin-left" variants={lineVariants} /> className="absolute top-1/2 left-0 w-full h-1 bg-white origin-left" style={{ transform: "rotate(90deg)" }} variants={lineVariants} /> className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white text-4xl font-bold" variants={itemVariants} > Loading ) : ( key="content" className="text-center" initial={{ opacity: 0, scale: 0.8 }} animate={{ opacity: 1, scale: 1 }} transition={{ duration: 0.5 }} > Enjoy your stay! )} Welcome to Our Website
)
}
扫描二维码分享
评论区
请登录后发表评论。