feat: 重构应用加载流程和动画管理
- 新增 AppLoader 组件作为全局加载器 - 引入 Pinia 状态管理应用加载状态 - 创建 usePageScrollLock 组合式函数管理滚动锁定 - 重构首页动画流程，使用 Promise 链式调用 - 移除旧的 HomeLoader 组件 - 优化头部导航栏的入场动画触发逻辑
This commit is contained in:
@@ -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,70 +32,64 @@ 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(heroPanelRef.value, {
|
||||
scale: 1,
|
||||
force3D: true,
|
||||
transformOrigin: 'center center',
|
||||
})
|
||||
|
||||
gsap.set(heroPanelElement, {
|
||||
scale: 1,
|
||||
force3D: true,
|
||||
transformOrigin: 'center center',
|
||||
})
|
||||
let renderedScale = -1
|
||||
|
||||
let renderedScale = -1
|
||||
const updateHeroPanelScale = () => {
|
||||
const exitDistance = window.innerHeight
|
||||
const totalDistance = heroPinDistance + exitDistance
|
||||
const currentScroll = $lenis ? $lenis.scroll : window.scrollY
|
||||
const currentDistance = gsap.utils.clamp(0, totalDistance, currentScroll - stageTop)
|
||||
|
||||
const setHeroPanelScale = (scale: number) => {
|
||||
if (Math.abs(renderedScale - scale) < 0.001) {
|
||||
return
|
||||
}
|
||||
const newScale = currentDistance <= heroPinDistance
|
||||
? gsap.utils.interpolate(1, pinEndScale, currentDistance / heroPinDistance)
|
||||
: gsap.utils.interpolate(pinEndScale, finalScale, (currentDistance - heroPinDistance) / exitDistance)
|
||||
|
||||
renderedScale = scale
|
||||
gsap.set(heroPanelElement, { scale })
|
||||
}
|
||||
|
||||
const updateHeroPanelScale = () => {
|
||||
const exitDistance = getExitDistance()
|
||||
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)
|
||||
|
||||
if (currentDistance <= heroPinDistance) {
|
||||
setHeroPanelScale(gsap.utils.interpolate(1, pinEndScale, currentDistance / heroPinDistance))
|
||||
return
|
||||
}
|
||||
|
||||
setHeroPanelScale(
|
||||
gsap.utils.interpolate(
|
||||
pinEndScale,
|
||||
finalScale,
|
||||
(currentDistance - heroPinDistance) / exitDistance,
|
||||
),
|
||||
)
|
||||
}
|
||||
|
||||
// CSS sticky 负责固定；ticker 每帧读取当前滚动距离，避免依赖 scroll/ScrollTrigger 事件链。
|
||||
updateHeroPanelScale()
|
||||
gsap.ticker.add(updateHeroPanelScale)
|
||||
|
||||
cleanupHeroScroll = () => {
|
||||
gsap.ticker.remove(updateHeroPanelScale)
|
||||
if (Math.abs(renderedScale - newScale) > 0.001) {
|
||||
renderedScale = newScale
|
||||
gsap.set(heroPanelRef.value, { scale: newScale })
|
||||
}
|
||||
}
|
||||
|
||||
setupHeroScroll()
|
||||
updateHeroPanelScale()
|
||||
gsap.ticker.add(updateHeroPanelScale)
|
||||
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>
|
||||
Reference in New Issue
Block a user