style: award主页动画

src/views/AwardPage/components/Bloom.vue

@@ -26,13 +26,105 @@
 </template>
 
 <script setup lang="ts">
-		import { ref, onMounted } from 'vue'
-		import gsap from 'gsap'
+	import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
+	import { gsap } from 'gsap'
 
-		const titleRef = ref<HTMLElement | null>(null)
-		const subtitleRef = ref<HTMLElement | null>(null)
-		const textRef = ref<HTMLElement | null>(null)
+	const titleRef = ref<HTMLElement | null>(null)
+	const subtitleRef = ref<HTMLElement | null>(null)
+	const textRef = ref<HTMLElement | null>(null)
 
+	const hasPlayedBloomAnim = ref(false)
+	let bloomObserver: IntersectionObserver | null = null
+
+	const setupBloomInitialState = () => {
+		const titleEls = [titleRef.value, subtitleRef.value].filter(Boolean) as HTMLElement[]
+		if (titleEls.length) {
+			gsap.set(titleEls, {
+				opacity: 0,
+				// start larger than final size, then animate down to scale:1
+				scale: 1.6,
+				transformOrigin: '50% 50%'
+			})
+		}
+
+		if (textRef.value) {
+			// start below and hidden
+			gsap.set(textRef.value, {
+				opacity: 0,
+				y: 60
+			})
+		}
+	}
+
+	const playBloomAnimation = () => {
+		if (hasPlayedBloomAnim.value) return
+		const titleEls = [titleRef.value, subtitleRef.value].filter(Boolean) as HTMLElement[]
+		const textEl = textRef.value
+		if (!titleEls.length || !textEl) return
+
+		const tl = gsap.timeline({ defaults: { ease: 'power2.out' } })
+
+		tl.to(titleEls, {
+			opacity: 1,
+			scale: 1,
+			duration: 0.9,
+			ease: 'back.out(1.6)',
+			stagger: 0.12
+		})
+
+		tl.to(
+			textEl,
+			{
+				opacity: 1,
+				y: -12,
+				scale: 1.05,
+				duration: 0.3,
+				ease: 'power2.out'
+			},
+			'+=0.12'
+		)
+		tl.to(
+			textEl,
+			{
+				y: 0,
+				scale: 1,
+				duration: 0.18,
+				ease: 'bounce.out'
+			},
+			'+=0.08'
+		)
+
+		hasPlayedBloomAnim.value = true
+		bloomObserver?.disconnect()
+	}
+
+	onMounted(() => {
+		nextTick(() => {
+			setupBloomInitialState()
+			if ('IntersectionObserver' in window) {
+				bloomObserver = new IntersectionObserver(
+					(entries) => {
+						entries.forEach((entry) => {
+							if (entry.isIntersecting) {
+								playBloomAnimation()
+							}
+						})
+					},
+					{ threshold: 0.3 }
+				)
+				if (titleRef.value) {
+					bloomObserver.observe(titleRef.value)
+				}
+			} else {
+				// fallback
+				playBloomAnimation()
+			}
+		})
+	})
+
+	onBeforeUnmount(() => {
+		bloomObserver?.disconnect()
+	})
 
 </script>
 
@@ -66,3 +158,4 @@
 		}
 	}
 </style>
+