feat: 重构应用加载流程和动画管理
- 新增 AppLoader 组件作为全局加载器 - 引入 Pinia 状态管理应用加载状态 - 创建 usePageScrollLock 组合式函数管理滚动锁定 - 重构首页动画流程，使用 Promise 链式调用 - 移除旧的 HomeLoader 组件 - 优化头部导航栏的入场动画触发逻辑
This commit is contained in:
@@ -0,0 +1,140 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||||
import gsap from 'gsap'
|
||||
import { useAppStore } from '~/stores/app'
|
||||
import { usePageScrollLock } from '~/composables/usePageScrollLock'
|
||||
|
||||
const loaderRef = ref<HTMLElement | null>(null)
|
||||
const loaderBarRef = ref<HTMLElement | null>(null)
|
||||
const appStore = useAppStore()
|
||||
|
||||
// Lock scroll while app is loading
|
||||
usePageScrollLock(appStore.isAppLoading)
|
||||
|
||||
let loaderTween: gsap.core.Tween | null = null
|
||||
let removeLoadListener: (() => void) | null = null
|
||||
let introStartTimer: ReturnType<typeof window.setTimeout> | null = null
|
||||
|
||||
onMounted(() => {
|
||||
const loaderElement = loaderRef.value
|
||||
const loaderBarElement = loaderBarRef.value
|
||||
|
||||
if (!loaderElement || !loaderBarElement) return
|
||||
|
||||
// Initial GSAP setup
|
||||
gsap.set(loaderElement, { display: 'grid', yPercent: 0, autoAlpha: 1 })
|
||||
gsap.set(loaderBarElement, { scaleX: 0.18, transformOrigin: 'left center' })
|
||||
|
||||
// Loader bar bouncing animation
|
||||
loaderTween = gsap.to(loaderBarElement, {
|
||||
scaleX: 0.82,
|
||||
duration: 1.2,
|
||||
ease: 'power1.inOut',
|
||||
repeat: -1,
|
||||
yoyo: true,
|
||||
})
|
||||
|
||||
const loaderStartedAt = window.performance.now()
|
||||
const minLoaderDuration = 1200
|
||||
|
||||
const finishLoading = () => {
|
||||
removeLoadListener?.()
|
||||
removeLoadListener = null
|
||||
|
||||
if (introStartTimer) {
|
||||
window.clearTimeout(introStartTimer)
|
||||
introStartTimer = null
|
||||
}
|
||||
|
||||
const remainingTime = Math.max(0, minLoaderDuration - (window.performance.now() - loaderStartedAt))
|
||||
|
||||
introStartTimer = window.setTimeout(() => {
|
||||
// End the loader loop and slide out
|
||||
loaderTween?.kill()
|
||||
loaderTween = null
|
||||
|
||||
const tl = gsap.timeline({
|
||||
onComplete: () => {
|
||||
gsap.set(loaderElement, { display: 'none' })
|
||||
appStore.setAppLoading(false)
|
||||
}
|
||||
})
|
||||
|
||||
tl.to(loaderBarElement, {
|
||||
scaleX: 1,
|
||||
duration: 0.25,
|
||||
ease: 'power2.out',
|
||||
}).to(loaderElement, {
|
||||
yPercent: -100,
|
||||
duration: 0.75,
|
||||
ease: 'power4.inOut',
|
||||
})
|
||||
}, remainingTime)
|
||||
}
|
||||
|
||||
if (document.readyState === 'complete') {
|
||||
finishLoading()
|
||||
} else {
|
||||
window.addEventListener('load', finishLoading, { once: true })
|
||||
removeLoadListener = () => window.removeEventListener('load', finishLoading)
|
||||
}
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
loaderTween?.kill()
|
||||
if (introStartTimer) window.clearTimeout(introStartTimer)
|
||||
removeLoadListener?.()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="loaderRef" class="page-loader" aria-hidden="true">
|
||||
<div class="page-loader-content">
|
||||
<p>Loading</p>
|
||||
<span class="page-loader-line">
|
||||
<span ref="loaderBarRef" class="page-loader-line-inner" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.page-loader {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 90;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: #fff;
|
||||
background: #000;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.page-loader-content {
|
||||
width: min(220px, calc(100vw - 48px));
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.page-loader-content p {
|
||||
margin: 0 0 14px;
|
||||
}
|
||||
|
||||
.page-loader-line {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
background: rgb(255 255 255 / 20%);
|
||||
}
|
||||
|
||||
.page-loader-line-inner {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
transform: scaleX(0);
|
||||
transform-origin: left center;
|
||||
}
|
||||
</style>
|
||||
@@ -1,7 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, onBeforeUnmount, ref } from 'vue'
|
||||
import { useNuxtApp } from '#app'
|
||||
import type Lenis from 'lenis'
|
||||
import gsap from 'gsap'
|
||||
|
||||
const heroPinDistance = 1200
|
||||
@@ -33,23 +32,38 @@ const heroPanelRef = ref<HTMLElement | null>(null)
|
||||
|
||||
let cleanupHeroScroll: (() => void) | null = null
|
||||
|
||||
onMounted(() => {
|
||||
const heroStageElement = heroStageRef.value
|
||||
const heroPanelElement = heroPanelRef.value
|
||||
const play = () => new Promise<void>((resolve) => {
|
||||
if (!heroRef.value) return resolve()
|
||||
|
||||
if (!heroStageElement || !heroPanelElement) {
|
||||
return
|
||||
let eventDispatched = false
|
||||
|
||||
gsap.to(heroRef.value, {
|
||||
yPercent: 0,
|
||||
duration: 1.2,
|
||||
ease: 'power3.out',
|
||||
onUpdate() {
|
||||
if (!eventDispatched && this.progress() > 0.6) {
|
||||
eventDispatched = true
|
||||
window.dispatchEvent(new CustomEvent('hero-intro-done'))
|
||||
}
|
||||
},
|
||||
onComplete: resolve,
|
||||
})
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
if (heroRef.value) {
|
||||
gsap.set(heroRef.value, { yPercent: 100 })
|
||||
}
|
||||
|
||||
const { $lenis } = useNuxtApp()
|
||||
if (!heroStageRef.value || !heroPanelRef.value) return
|
||||
|
||||
const { $lenis } = useNuxtApp() as { $lenis?: { scroll: number } }
|
||||
const pinEndScale = 0.65
|
||||
const finalScale = 0.18
|
||||
const getExitDistance = () => window.innerHeight
|
||||
const stageTop = heroStageRef.value.offsetTop
|
||||
|
||||
const setupHeroScroll = () => {
|
||||
cleanupHeroScroll?.()
|
||||
|
||||
gsap.set(heroPanelElement, {
|
||||
gsap.set(heroPanelRef.value, {
|
||||
scale: 1,
|
||||
force3D: true,
|
||||
transformOrigin: 'center center',
|
||||
@@ -57,46 +71,25 @@ onMounted(() => {
|
||||
|
||||
let renderedScale = -1
|
||||
|
||||
const setHeroPanelScale = (scale: number) => {
|
||||
if (Math.abs(renderedScale - scale) < 0.001) {
|
||||
return
|
||||
}
|
||||
|
||||
renderedScale = scale
|
||||
gsap.set(heroPanelElement, { scale })
|
||||
}
|
||||
|
||||
const updateHeroPanelScale = () => {
|
||||
const exitDistance = getExitDistance()
|
||||
const exitDistance = window.innerHeight
|
||||
const totalDistance = heroPinDistance + exitDistance
|
||||
// Lenis 存在时只读 Lenis 的平滑滚动值，避免向上滚时 window.scrollY 和 Lenis 值互相打架。
|
||||
const currentScroll = $lenis ? $lenis.scroll : window.scrollY
|
||||
const currentDistance = gsap.utils.clamp(0, totalDistance, currentScroll - heroStageElement.offsetTop)
|
||||
const currentDistance = gsap.utils.clamp(0, totalDistance, currentScroll - stageTop)
|
||||
|
||||
if (currentDistance <= heroPinDistance) {
|
||||
setHeroPanelScale(gsap.utils.interpolate(1, pinEndScale, currentDistance / heroPinDistance))
|
||||
return
|
||||
const newScale = currentDistance <= heroPinDistance
|
||||
? gsap.utils.interpolate(1, pinEndScale, currentDistance / heroPinDistance)
|
||||
: gsap.utils.interpolate(pinEndScale, finalScale, (currentDistance - heroPinDistance) / exitDistance)
|
||||
|
||||
if (Math.abs(renderedScale - newScale) > 0.001) {
|
||||
renderedScale = newScale
|
||||
gsap.set(heroPanelRef.value, { scale: newScale })
|
||||
}
|
||||
}
|
||||
|
||||
setHeroPanelScale(
|
||||
gsap.utils.interpolate(
|
||||
pinEndScale,
|
||||
finalScale,
|
||||
(currentDistance - heroPinDistance) / exitDistance,
|
||||
),
|
||||
)
|
||||
}
|
||||
|
||||
// CSS sticky 负责固定；ticker 每帧读取当前滚动距离，避免依赖 scroll/ScrollTrigger 事件链。
|
||||
updateHeroPanelScale()
|
||||
gsap.ticker.add(updateHeroPanelScale)
|
||||
|
||||
cleanupHeroScroll = () => {
|
||||
gsap.ticker.remove(updateHeroPanelScale)
|
||||
}
|
||||
}
|
||||
|
||||
setupHeroScroll()
|
||||
cleanupHeroScroll = () => gsap.ticker.remove(updateHeroPanelScale)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
@@ -107,6 +100,7 @@ onBeforeUnmount(() => {
|
||||
defineExpose({
|
||||
heroStageRef,
|
||||
heroRef,
|
||||
play,
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,16 +1,49 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { ref, onBeforeUnmount } from 'vue'
|
||||
import gsap from 'gsap'
|
||||
|
||||
const introTitle = 'ArcticNewOne'
|
||||
const introLetters = introTitle.split('')
|
||||
|
||||
const introRef = ref<HTMLElement | null>(null)
|
||||
const introTitleRef = ref<HTMLElement | null>(null)
|
||||
let ctx: gsap.Context | null = null
|
||||
|
||||
defineExpose({
|
||||
introRef,
|
||||
introTitleRef
|
||||
const play = () => new Promise<void>((resolve) => {
|
||||
if (!introRef.value || !introTitleRef.value) return resolve()
|
||||
|
||||
const chars = gsap.utils.toArray('.hero-intro-char', introRef.value)
|
||||
const tm = introRef.value.querySelector('.hero-intro-tm')
|
||||
|
||||
if (!chars.length || !tm) return resolve()
|
||||
|
||||
ctx = gsap.context(() => {
|
||||
// 初始化样式
|
||||
gsap.set(introRef.value, { display: 'grid', yPercent: 0, autoAlpha: 1 })
|
||||
gsap.set(introTitleRef.value, { y: 0, autoAlpha: 1 })
|
||||
gsap.set(chars, { y: 0, yPercent: 110 })
|
||||
gsap.set(tm, { autoAlpha: 0 })
|
||||
|
||||
gsap.timeline({
|
||||
defaults: { ease: 'power3.out' },
|
||||
onComplete: () => {
|
||||
gsap.set(introRef.value, { display: 'none' })
|
||||
resolve()
|
||||
}
|
||||
})
|
||||
// 逐字升起
|
||||
.to(chars, { yPercent: 0, duration: 0.75, stagger: 0.055 })
|
||||
// TM 渐显
|
||||
.to(tm, { autoAlpha: 1, duration: 0.4, ease: 'power2.out' })
|
||||
// 停顿 0.35s 后，整体上移并淡出标题
|
||||
.addLabel('introOut', '+=0.35')
|
||||
.to(introTitleRef.value, { autoAlpha: 0, duration: 1.05, ease: 'power4.inOut' }, 'introOut')
|
||||
.to(introRef.value, { yPercent: -100, duration: 1.05, ease: 'power4.inOut' }, 'introOut')
|
||||
}, introRef.value)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => ctx?.revert())
|
||||
|
||||
defineExpose({ play })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -35,7 +68,7 @@ defineExpose({
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 80;
|
||||
display: grid;
|
||||
display: none;
|
||||
place-items: center;
|
||||
overflow: hidden;
|
||||
color: #fff;
|
||||
|
||||
@@ -1,65 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
// 定义 loader 相关的 DOM 引用
|
||||
const loaderRef = ref<HTMLElement | null>(null)
|
||||
const loaderBarRef = ref<HTMLElement | null>(null)
|
||||
|
||||
// 暴露这两个 ref 供外部使用
|
||||
defineExpose({
|
||||
loaderRef,
|
||||
loaderBarRef
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="loaderRef" class="page-loader" aria-hidden="true" v-once>
|
||||
<div class="page-loader-content">
|
||||
<p>Loading</p>
|
||||
<span class="page-loader-line">
|
||||
<span ref="loaderBarRef" class="page-loader-line-inner" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.page-loader {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 90;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: #fff;
|
||||
background: #000;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.page-loader-content {
|
||||
width: min(220px, calc(100vw - 48px));
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.page-loader-content p {
|
||||
margin: 0 0 14px;
|
||||
}
|
||||
|
||||
.page-loader-line {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
background: rgb(255 255 255 / 20%);
|
||||
}
|
||||
|
||||
.page-loader-line-inner {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
transform: scaleX(0);
|
||||
transform-origin: left center;
|
||||
}
|
||||
</style>
|
||||
@@ -1,12 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
import { onBeforeUnmount, onMounted, ref, computed } from 'vue'
|
||||
import { onBeforeUnmount, onMounted, ref, computed, watch } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import gsap from 'gsap'
|
||||
import { ScrollTrigger } from 'gsap/ScrollTrigger'
|
||||
import { useAppStore } from '~/stores/app'
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger)
|
||||
|
||||
const { t } = useI18n()
|
||||
const route = useRoute()
|
||||
const appStore = useAppStore()
|
||||
|
||||
// 导航菜单数据配置
|
||||
const navItems = computed<Array<{name: string, path: string}>>(() => [
|
||||
@@ -22,6 +26,7 @@ const bottomHeaderRef = ref<HTMLElement | null>(null)
|
||||
let topHeaderTween: gsap.core.Tween | null = null
|
||||
let bottomHeaderScrollTrigger: ReturnType<typeof ScrollTrigger.create> | null = null
|
||||
let isBottomHeaderVisible = false
|
||||
let fallbackTimer: ReturnType<typeof setTimeout> | null = null
|
||||
|
||||
const setBottomHeaderVisible = (visible: boolean) => {
|
||||
if (!bottomHeaderRef.value || isBottomHeaderVisible === visible) {
|
||||
@@ -39,22 +44,16 @@ const setBottomHeaderVisible = (visible: boolean) => {
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// 移除之前这里强制设置透明度的代码，直接依靠 css 控制
|
||||
// gsap.set(topHeaderRef.value, { y: '100vh', opacity: 0 })
|
||||
|
||||
// 顶部导航在页面刚开始滚动的前 200px 内逐渐上移并隐藏。
|
||||
topHeaderTween = gsap.to(topHeaderRef.value, {
|
||||
yPercent: -140,
|
||||
autoAlpha: 0,
|
||||
ease: 'none',
|
||||
paused: true, // 初始不执行，等进场动画完毕再绑定到 ScrollTrigger
|
||||
})
|
||||
|
||||
// 定义一个供外部或延迟调用的入场动画方法
|
||||
const playHeaderIntro = () => {
|
||||
// 定义一个供外部或延迟调用的入场动画方法
|
||||
const playHeaderIntro = () => {
|
||||
if (!topHeaderRef.value) return
|
||||
|
||||
// 如果已经触发过，清理可能存在的保底定时器
|
||||
if (fallbackTimer) {
|
||||
clearTimeout(fallbackTimer)
|
||||
fallbackTimer = null
|
||||
}
|
||||
|
||||
gsap.fromTo(topHeaderRef.value,
|
||||
{
|
||||
y: '100vh',
|
||||
@@ -71,6 +70,7 @@ onMounted(() => {
|
||||
// 动画完成时，强制把 style 的 opacity 移除，防止被内联样式锁死
|
||||
if (topHeaderRef.value) {
|
||||
topHeaderRef.value.style.opacity = ''
|
||||
}
|
||||
// 进场动画完毕后，再将滚动消失动画挂载到 ScrollTrigger
|
||||
if (topHeaderTween) {
|
||||
ScrollTrigger.create({
|
||||
@@ -82,34 +82,22 @@ onMounted(() => {
|
||||
ScrollTrigger.refresh()
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 监听自定义事件，当首页的 Hero 动画完成或到达特定阶段时触发导航栏入场
|
||||
const handleHeroReady = () => {
|
||||
// 监听自定义事件，当首页的 Hero 动画完成或到达特定阶段时触发导航栏入场
|
||||
const handleHeroReady = () => {
|
||||
playHeaderIntro()
|
||||
}
|
||||
}
|
||||
|
||||
// 如果是在客户端执行，判断是否在首页
|
||||
if (typeof window !== 'undefined') {
|
||||
// 使用 setTimeout 宏任务确保所有 GSAP 设置生效，并且跳过初始渲染卡顿
|
||||
setTimeout(() => {
|
||||
if (window.location.pathname === '/') {
|
||||
// 首页：等待自定义事件
|
||||
window.addEventListener('hero-intro-done', handleHeroReady, { once: true })
|
||||
|
||||
// 增加一个保底的 setTimeout，防止首页的动画事件因为某种原因未能触发（例如用户快速切换路由）
|
||||
setTimeout(() => {
|
||||
// 不再判断太复杂的 opacity 计算，只要 3.5s 到了，且 topHeaderRef 还有，直接执行，防止各种 bug 导致锁死
|
||||
playHeaderIntro()
|
||||
}, 3500) // 等待 3.5 秒（足够首页 intro 动画执行完）
|
||||
} else {
|
||||
// 非首页的保底进场
|
||||
playHeaderIntro()
|
||||
}
|
||||
}, 0)
|
||||
}
|
||||
onMounted(() => {
|
||||
// 顶部导航在页面刚开始滚动的前 200px 内逐渐上移并隐藏。
|
||||
topHeaderTween = gsap.to(topHeaderRef.value, {
|
||||
yPercent: -140,
|
||||
autoAlpha: 0,
|
||||
ease: 'none',
|
||||
paused: true, // 初始不执行，等进场动画完毕再绑定到 ScrollTrigger
|
||||
})
|
||||
|
||||
// 底部导航默认藏在视口下方，只有滚动到深处并向上滚时才出现。
|
||||
gsap.set(bottomHeaderRef.value, {
|
||||
@@ -139,16 +127,44 @@ onMounted(() => {
|
||||
ScrollTrigger.refresh()
|
||||
})
|
||||
|
||||
// 监听全局加载状态，当加载完成后再决定 Header 的进场时机
|
||||
watch(() => appStore.isAppLoading, (isLoading) => {
|
||||
if (!isLoading && typeof window !== 'undefined') {
|
||||
if (route.path === '/') {
|
||||
// 首页：等待自定义事件
|
||||
window.addEventListener('hero-intro-done', handleHeroReady, { once: true })
|
||||
|
||||
// 增加一个保底的 setTimeout，防止首页的动画事件因为某种原因未能触发
|
||||
// 从 loading 结束开始算起，首页的 intro 和 hero 动画加起来大约 3~4 秒
|
||||
fallbackTimer = setTimeout(() => {
|
||||
window.removeEventListener('hero-intro-done', handleHeroReady)
|
||||
playHeaderIntro()
|
||||
}, 5000)
|
||||
} else {
|
||||
// 非首页：加载完成后直接进场
|
||||
playHeaderIntro()
|
||||
}
|
||||
}
|
||||
}, { immediate: true })
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (fallbackTimer) {
|
||||
clearTimeout(fallbackTimer)
|
||||
fallbackTimer = null
|
||||
}
|
||||
if (typeof window !== 'undefined') {
|
||||
window.removeEventListener('hero-intro-done', handleHeroReady)
|
||||
}
|
||||
topHeaderTween?.scrollTrigger?.kill()
|
||||
topHeaderTween?.kill()
|
||||
bottomHeaderScrollTrigger?.kill()
|
||||
topHeaderTween = null
|
||||
bottomHeaderScrollTrigger = null
|
||||
isBottomHeaderVisible = false
|
||||
if (topHeaderRef.value && bottomHeaderRef.value) {
|
||||
gsap.killTweensOf([topHeaderRef.value, bottomHeaderRef.value])
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
@@ -0,0 +1,50 @@
|
||||
import { onMounted, onBeforeUnmount, watch, type Ref } from 'vue'
|
||||
import { useNuxtApp } from '#app'
|
||||
import type Lenis from 'lenis'
|
||||
import { useAppStore } from '~/stores/app'
|
||||
|
||||
export const usePageScrollLock = (isLocked: Ref<boolean> | boolean) => {
|
||||
const { $lenis } = useNuxtApp() as ReturnType<typeof useNuxtApp> & { $lenis?: Lenis }
|
||||
|
||||
const lockScroll = () => {
|
||||
if (import.meta.client) {
|
||||
document.documentElement.classList.add('is-home-intro-active')
|
||||
$lenis?.scrollTo(0, { immediate: true })
|
||||
$lenis?.stop()
|
||||
}
|
||||
}
|
||||
|
||||
const unlockScroll = () => {
|
||||
if (import.meta.client) {
|
||||
document.documentElement.classList.remove('is-home-intro-active')
|
||||
$lenis?.start()
|
||||
}
|
||||
}
|
||||
|
||||
// If passed a boolean, lock immediately and unlock on unmount
|
||||
if (typeof isLocked === 'boolean') {
|
||||
if (isLocked) {
|
||||
onMounted(() => {
|
||||
lockScroll()
|
||||
})
|
||||
onBeforeUnmount(() => {
|
||||
unlockScroll()
|
||||
})
|
||||
}
|
||||
} else {
|
||||
// If passed a ref, watch its value
|
||||
watch(isLocked, (locked) => {
|
||||
if (locked) {
|
||||
lockScroll()
|
||||
} else {
|
||||
unlockScroll()
|
||||
}
|
||||
}, { immediate: true })
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
unlockScroll()
|
||||
})
|
||||
}
|
||||
|
||||
return { lockScroll, unlockScroll }
|
||||
}
|
||||
@@ -2,11 +2,13 @@
|
||||
import ArcticNewOneCursor from '~/components/layouts/ArcticNewOneCursor.vue';
|
||||
import ArcticNewOneFooter from '~/components/layouts/ArcticNewOneFooter.vue';
|
||||
import ArcticNewOneHeader from '~/components/layouts/ArcticNewOneHeader.vue';
|
||||
import AppLoader from '~/components/common/AppLoader.vue';
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<AppLoader />
|
||||
<ArcticNewOneHeader />
|
||||
<slot />
|
||||
<ArcticNewOneFooter />
|
||||
|
||||
+18
-217
@@ -1,19 +1,18 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import type Lenis from 'lenis'
|
||||
import gsap from 'gsap'
|
||||
import { ScrollTrigger } from 'gsap/ScrollTrigger'
|
||||
import { useUserStore } from '~/stores/user'
|
||||
import HomeLoader from '~/components/home/HomeLoader.vue'
|
||||
import { useAppStore } from '~/stores/app'
|
||||
import { usePageScrollLock } from '~/composables/usePageScrollLock'
|
||||
import HomeIntro from '~/components/home/HomeIntro.vue'
|
||||
import HomeHero from '~/components/home/HomeHero.vue'
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger)
|
||||
|
||||
const { t } = useI18n()
|
||||
const isIntroActive = ref(true)
|
||||
const userStore = useUserStore()
|
||||
const appStore = useAppStore()
|
||||
|
||||
const isIntroActive = ref(true)
|
||||
|
||||
const demoUserName = computed(() => userStore.displayName)
|
||||
const demoUserRole = computed(() => userStore.role)
|
||||
|
||||
@@ -28,6 +27,9 @@ useHead({
|
||||
},
|
||||
})
|
||||
|
||||
// 使用组合式函数管理 Lenis 滚动锁定
|
||||
usePageScrollLock(isIntroActive)
|
||||
|
||||
// 首页的 SEO 和 Meta 优化，支持国际化响应式
|
||||
useSeoMeta({
|
||||
title: () => t('home.title'),
|
||||
@@ -38,228 +40,27 @@ useSeoMeta({
|
||||
twitterDescription: () => t('home.welcome'),
|
||||
})
|
||||
|
||||
const pageRef = ref<HTMLElement | null>(null)
|
||||
const homeLoaderRef = ref<InstanceType<typeof HomeLoader> | null>(null)
|
||||
const homeIntroRef = ref<InstanceType<typeof HomeIntro> | null>(null)
|
||||
const homeHeroRef = ref<InstanceType<typeof HomeHero> | null>(null)
|
||||
|
||||
let heroAnimationContext: gsap.Context | null = null
|
||||
let removeLoadListener: (() => void) | null = null
|
||||
let restorePageScroll: (() => void) | null = null
|
||||
let hasIntroStarted = false
|
||||
let loaderTween: gsap.core.Tween | null = null
|
||||
let introTimeline: gsap.core.Timeline | null = null
|
||||
let introStartTimer: ReturnType<typeof window.setTimeout> | null = null
|
||||
// 监听全局加载状态，加载完成后依次播放开场和首屏动画
|
||||
watch(() => appStore.isAppLoading, async (isLoading) => {
|
||||
if (!isLoading) {
|
||||
await homeIntroRef.value?.play()
|
||||
await homeHeroRef.value?.play()
|
||||
|
||||
const setHomeIntroActive = (active: boolean) => {
|
||||
isIntroActive.value = active
|
||||
document.documentElement.classList.toggle('is-home-intro-active', active)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const pageElement = pageRef.value
|
||||
const loaderElement = homeLoaderRef.value?.loaderRef
|
||||
const loaderBarElement = homeLoaderRef.value?.loaderBarRef
|
||||
const introElement = homeIntroRef.value?.introRef
|
||||
const introTitleElement = homeIntroRef.value?.introTitleRef
|
||||
const heroElement = homeHeroRef.value?.heroRef
|
||||
|
||||
if (
|
||||
!pageElement
|
||||
|| !loaderElement
|
||||
|| !loaderBarElement
|
||||
|| !introElement
|
||||
|| !introTitleElement
|
||||
|| !heroElement
|
||||
) {
|
||||
return
|
||||
// 动画播放完毕后解除页面滚动锁定
|
||||
isIntroActive.value = false
|
||||
}
|
||||
|
||||
const introCharElements = gsap.utils.toArray('.hero-intro-char', introElement)
|
||||
const tmElement = introElement.querySelector('.hero-intro-tm')
|
||||
|
||||
if (introCharElements.length === 0 || !tmElement) {
|
||||
return
|
||||
}
|
||||
|
||||
const { $lenis } = useNuxtApp() as ReturnType<typeof useNuxtApp> & { $lenis?: Lenis }
|
||||
|
||||
heroAnimationContext = gsap.context(() => {
|
||||
const playIntro = () => {
|
||||
if (hasIntroStarted) {
|
||||
return
|
||||
}
|
||||
|
||||
hasIntroStarted = true
|
||||
removeLoadListener?.()
|
||||
removeLoadListener = null
|
||||
if (introStartTimer) {
|
||||
window.clearTimeout(introStartTimer)
|
||||
introStartTimer = null
|
||||
}
|
||||
loaderTween?.kill()
|
||||
loaderTween = null
|
||||
introTimeline?.kill()
|
||||
|
||||
introTimeline = gsap.timeline({
|
||||
defaults: { ease: 'power3.out' },
|
||||
onComplete: () => {
|
||||
gsap.set(introElement, { display: 'none' })
|
||||
gsap.set(heroElement, { clearProps: 'transform' })
|
||||
restorePageScroll?.()
|
||||
restorePageScroll = null
|
||||
ScrollTrigger.refresh()
|
||||
introTimeline = null
|
||||
},
|
||||
})
|
||||
|
||||
introTimeline
|
||||
.to(loaderBarElement, {
|
||||
scaleX: 1,
|
||||
duration: 0.25,
|
||||
ease: 'power2.out',
|
||||
})
|
||||
.to(loaderElement, {
|
||||
yPercent: -100,
|
||||
duration: 0.75,
|
||||
ease: 'power4.inOut',
|
||||
})
|
||||
.set(loaderElement, {
|
||||
display: 'none',
|
||||
})
|
||||
.set(introElement, {
|
||||
display: 'grid',
|
||||
yPercent: 0,
|
||||
autoAlpha: 1,
|
||||
})
|
||||
.set(introTitleElement, {
|
||||
y: 0,
|
||||
autoAlpha: 1,
|
||||
})
|
||||
.set(tmElement, {
|
||||
autoAlpha: 0,
|
||||
})
|
||||
.fromTo(introCharElements, {
|
||||
yPercent: 110,
|
||||
y: 0,
|
||||
}, {
|
||||
yPercent: 0,
|
||||
y: 0,
|
||||
duration: 0.75,
|
||||
stagger: 0.055,
|
||||
})
|
||||
.to(tmElement, {
|
||||
autoAlpha: 1,
|
||||
duration: 0.4,
|
||||
ease: 'power2.out',
|
||||
})
|
||||
.addLabel('introOut', '+=0.35')
|
||||
.to(introTitleElement, {
|
||||
autoAlpha: 0,
|
||||
duration: 1.05,
|
||||
ease: 'power4.inOut',
|
||||
}, 'introOut')
|
||||
.to(introElement, {
|
||||
yPercent: -100,
|
||||
duration: 1.05,
|
||||
ease: 'power4.inOut',
|
||||
}, 'introOut')
|
||||
.to(heroElement, {
|
||||
yPercent: 0,
|
||||
duration: 1.05,
|
||||
ease: 'power4.inOut',
|
||||
onUpdate: function() {
|
||||
// 当 Hero (白色背景) 的 yPercent 运动到 40% 的时候（即大部分背景已经上浮到了屏幕内，还没完全贴顶），触发导航栏出场
|
||||
const progress = this.progress()
|
||||
// 使用一个标记防止重复触发
|
||||
if (progress > 0.6 && !this._headerTriggered) {
|
||||
this._headerTriggered = true
|
||||
window.dispatchEvent(new Event('hero-intro-done'))
|
||||
}
|
||||
},
|
||||
onStart: function() {
|
||||
this._headerTriggered = false
|
||||
}
|
||||
}, 'introOut')
|
||||
}
|
||||
|
||||
const releasePageScroll = () => {
|
||||
setHomeIntroActive(false)
|
||||
$lenis?.start()
|
||||
}
|
||||
|
||||
// 首屏入场期间只通过 html class 锁滚动，避免 class 和 inline overflow 两套状态互相覆盖。
|
||||
setHomeIntroActive(true)
|
||||
$lenis?.scrollTo(0, { immediate: true })
|
||||
$lenis?.stop()
|
||||
restorePageScroll = releasePageScroll
|
||||
|
||||
// Loading 层先接管首屏；真正的品牌入场等 window.load 完成后再开始。
|
||||
gsap.set(loaderElement, { display: 'grid', yPercent: 0, autoAlpha: 1 })
|
||||
gsap.set(loaderBarElement, { scaleX: 0.18, transformOrigin: 'left center' })
|
||||
gsap.set(introElement, { display: 'grid', yPercent: 0, autoAlpha: 0 })
|
||||
gsap.set(introTitleElement, { y: 0, autoAlpha: 1 })
|
||||
// 强制清除 CSS 中的 translateY 像素值，避免被 GSAP 解析为固定 y 像素导致一直不可见
|
||||
gsap.set(introCharElements, { y: 0, yPercent: 110 })
|
||||
gsap.set(tmElement, { autoAlpha: 0 })
|
||||
gsap.set(heroElement, { yPercent: 100 })
|
||||
|
||||
loaderTween = gsap.to(loaderBarElement, {
|
||||
scaleX: 0.82,
|
||||
duration: 1.2,
|
||||
ease: 'power1.inOut',
|
||||
repeat: -1,
|
||||
yoyo: true,
|
||||
})
|
||||
|
||||
const loaderStartedAt = window.performance.now()
|
||||
const minLoaderDuration = 1200
|
||||
const queueIntro = () => {
|
||||
const remainingTime = Math.max(0, minLoaderDuration - (window.performance.now() - loaderStartedAt))
|
||||
|
||||
introStartTimer = window.setTimeout(() => {
|
||||
window.requestAnimationFrame(playIntro)
|
||||
}, remainingTime)
|
||||
}
|
||||
|
||||
if (document.readyState === 'complete') {
|
||||
queueIntro()
|
||||
return
|
||||
}
|
||||
|
||||
window.addEventListener('load', queueIntro, { once: true })
|
||||
removeLoadListener = () => window.removeEventListener('load', queueIntro)
|
||||
}, pageElement)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
setHomeIntroActive(false)
|
||||
hasIntroStarted = false
|
||||
if (introStartTimer) {
|
||||
window.clearTimeout(introStartTimer)
|
||||
introStartTimer = null
|
||||
}
|
||||
loaderTween?.kill()
|
||||
loaderTween = null
|
||||
introTimeline?.kill()
|
||||
introTimeline = null
|
||||
removeLoadListener?.()
|
||||
removeLoadListener = null
|
||||
restorePageScroll?.()
|
||||
restorePageScroll = null
|
||||
heroAnimationContext?.revert()
|
||||
heroAnimationContext = null
|
||||
})
|
||||
}, { immediate: true })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main
|
||||
ref="pageRef"
|
||||
id="top"
|
||||
:data-demo-user="demoUserName"
|
||||
:data-demo-user-role="demoUserRole"
|
||||
>
|
||||
<HomeLoader ref="homeLoaderRef" />
|
||||
<HomeIntro ref="homeIntroRef" />
|
||||
<HomeHero ref="homeHeroRef" />
|
||||
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref } from 'vue'
|
||||
|
||||
export const useAppStore = defineStore('app', () => {
|
||||
const isAppLoading = ref(true)
|
||||
|
||||
const setAppLoading = (loading: boolean) => {
|
||||
isAppLoading.value = loading
|
||||
}
|
||||
|
||||
return {
|
||||
isAppLoading,
|
||||
setAppLoading,
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user