+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/composables/animation-store.ts b/src/composables/animation-store.ts
new file mode 100644
index 0000000..f177c60
--- /dev/null
+++ b/src/composables/animation-store.ts
@@ -0,0 +1,23 @@
+// src/composables/animation-store.ts (or wherever you prefer)
+import { reactive } from 'vue'
+import type { InjectionKey } from 'vue'
+
+// Defines the data structure for a single loaded animation
+export interface AnimationData {
+ status: 'idle' | 'loading' | 'loaded' | 'error';
+ frames: ImageData[];
+ width: number;
+ height: number;
+ totalFrames: number;
+ error?: string;
+ progress: number;
+}
+
+// Defines the store, which is a map from a unique animation ID to its data
+export type AnimationStore = MapLoading Animation...
+ {{ error }}
+
+ 
- 
@@ -736,6 +738,27 @@ async function finishCollect() {
+
+
+
+
+
+
+ {{ userdata.username }}
+
+ 用时
+
+ {{ fmtTime(timeSpent/1000) }}
+
+
+
@@ -812,7 +835,7 @@ async function finishCollect() {
@keyframes line-in {
from {
- transform: translateX(-150%);
+ transform: translateX(-210%);
}
to {
diff --git a/src/pages/Page1.vue b/src/pages/Page1.vue
index 78443ff..295a305 100644
--- a/src/pages/Page1.vue
+++ b/src/pages/Page1.vue
@@ -6,7 +6,7 @@ import { regions, type RegionData, type Store } from '../data';
import AniEle from '../components/AniEle.vue';
const regionsPos = [
- { w: 68.8, h: 68.8, l: -1, t: -4, src: assets.p1.大北区, tt: '大北区', trt: -13, ad: 6, key: '大北区' },
+ { w: 68.8, h: 68.8, l: -1, t: 0, src: assets.p1.大北区, tt: '大北区', trt: -13, ad: 6, key: '大北区' },
{ w: 73.3, h: 73.3, l: 44, t: 20, src: assets.p1.大东区, tt: '大东区', ad: 3, key: '大东区' },
{ w: 62.3, h: 63.7, l: -32, t: 72, src: assets.p1['大南区&免税'], tt: '大南区&免税', trt: 5, ad: 3, key: '大南区&免税' },
{ w: 59.6, h: 59.6, l: -37, t: 15, src: assets.p1.大西区, tt: '大西区', ad: 5, key: '大西区' },
@@ -112,6 +112,7 @@ function startExploration() {
alert('请输入你的名字！');
return;
}
+ startExplorationRules.value[0].reverse = true;
emit('startExploration', {
region: selectedRegion.value,
store: selectedStores.value[selectedStoreIndex.value].店铺,
@@ -122,7 +123,6 @@ function startExploration() {
// 动画管理
let fadeInAnimations: Animation[] = [];
let swapInAnimations: Animation[] = [];
-let scaleInAnimations: Animation[] = [];
let bubbleDropAnimations: Animation[] = [];
// 保存所有动画的数组
@@ -160,38 +160,6 @@ function createSwapInAnimation(element: Element, delay: number = 0) {
return animation;
}
-// Scale in 动画（容器）
-function createScaleInContainerAnimation(element: Element, delay: number = 0) {
- const animation = element.animate([
- { transform: 'scale(0)' },
- { transform: 'scale(1)' }
- ], {
- duration: 500,
- easing: 'cubic-bezier(0.5, 0, 0.71, 1.85)',
- delay: (delay + 0.2) * 1000,
- fill: 'forwards'
- });
- scaleInAnimations.push(animation);
- allAnimations.push(animation);
- return animation;
-}
-
-// Scale in 动画（文本）
-function createScaleInTextAnimation(element: Element, delay: number = 0) {
- const animation = element.animate([
- { transform: 'scale(0)' },
- { transform: 'scale(1)' }
- ], {
- duration: 500,
- easing: 'cubic-bezier(0.5, 0, 0.71, 1.5)',
- delay: (delay + 0.2 + 0.1) * 1000,
- fill: 'forwards'
- });
- scaleInAnimations.push(animation);
- allAnimations.push(animation);
- return animation;
-}
-
// 气泡下降动画
function createBubbleDropAnimation(element: Element, startTop: string, startLeft: string, endTop: string, endLeft: string, delay: number = 0, duration: number = 600) {
const animation = element.animate([
@@ -216,15 +184,18 @@ function createBubbleDropAnimation(element: Element, startTop: string, startLeft
return animation;
}
-const mainLogo = useTemplateRef('main-logo');
-
const mainLogoRules = ref([
{ name: 'main', frame: 41, loop: 1, pauseAfter: true, duration: 33, reverse: false }
]);
+const selectInfoRules = ref([{ name: 'main', frame: 26, loop: 1, duration: 33, reverse: false }]);
+const startExplorationRules = ref([{ name: 'start', frame: 19, loop: 1, duration: 33, reverse: false }]);
+
+
// 反向播放所有动画来淡出
function reverseAllAnimations() {
mainLogoRules.value[0].reverse = true;
-
+ selectInfoRules.value[0].reverse = true;
+
allAnimations.forEach(animation => {
// 确保动画已经完成
if (animation.playState === 'finished') {
@@ -252,9 +223,13 @@ function fadeOutAllAnimations() {
(window as any).reverseAllAnimations = reverseAllAnimations;
(window as any).fadeOutAllAnimations = fadeOutAllAnimations;
+
+const showSelectInfo = ref(false);
+const showSun = ref(false);
onMounted(() => {
+ const wait = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
// 等待一帧确保所有元素都已渲染
- requestAnimationFrame(() => {
+ requestAnimationFrame(async () => {
// 初始化logo淡入动画
const logo = document.querySelector('.logo');
if (logo) {
@@ -269,21 +244,6 @@ onMounted(() => {
createSwapInAnimation(element, delay);
});
- // 初始化scale-in动画
- const scaleInContainers = document.querySelectorAll('.scale-in-ctn');
- scaleInContainers.forEach((element) => {
- const htmlElement = element as HTMLElement;
- const delay = parseFloat(htmlElement.style.getPropertyValue('--base-delay')?.replace('s', '') || '0');
- createScaleInContainerAnimation(element, delay);
- });
-
- const scaleInTexts = document.querySelectorAll('.scale-in-txt');
- scaleInTexts.forEach((element) => {
- const htmlElement = element as HTMLElement;
- const delay = parseFloat(htmlElement.style.getPropertyValue('--base-delay')?.replace('s', '') || '0');
- createScaleInTextAnimation(element, delay);
- });
-
// 初始化气泡动画
const regionBubbles = document.querySelectorAll('.region-bubble');
regionBubbles.forEach((bubble, index) => {
@@ -365,6 +325,11 @@ onMounted(() => {
bubble.addEventListener('pointerdown', pDown);
bubble.addEventListener('pointerup', pUp, { once: true });
});
+
+ await wait(1300);
+ showSelectInfo.value = true;
+ await wait(300);
+ showSun.value = true;
});
});
@@ -381,7 +346,12 @@ onUnmounted(() => {
{{ userdata.region }}
+ {{ userdata.store }}
+
+
@@ -400,31 +370,10 @@ onUnmounted(() => {
-
-
- 点击
-
-
- 选择
-
-
- 阵营
-
-
- 点击
-
-
- 选择
-
-
- 阵营
-
+
-
+
+
@@ -454,16 +403,34 @@ onUnmounted(() => {