feat: 序列动画的进度条（现在有点小bug,对不上点

Author: SaltyFive

app/components/animate/AnimateHandler.vue

@@ -2,20 +2,30 @@
   <div ref="container" :style="{ opacity: 0 }" class="w-full h-full flex items-center justify-center -z-100">
     <slot />
   </div>
+  <div v-if="showProgressBar" class="fixed bottom-0 left-0 w-full h-2">
+    <motion.div
+      class="w-full h-2 bg-blue-200 transition-all"
+      :style="{ width: progressPercent }"
+    />
+  </div>
 </template>
 
 <script setup lang="ts">
 import type { AnimationSequence } from 'motion-v';
-import { animate } from 'motion-v';
+import { animate, motion } from 'motion-v';
 
 const props = defineProps<{
   initSequence: () => AnimationSequence; // 初始化序列
   enterSequence: () => AnimationSequence; // 进入动画序列
   exitSequence: () => AnimationSequence; // 退出动画序列
   infinitySequence?: () => AnimationSequence; // 无限循环动画序列
 
-  enterDelay?: number; // 进入动画延迟 毫秒
-  exitDelay?: number; // 退出动画延迟 毫秒
+  enterDelay?: number; // 进入动画延迟 秒
+  exitDelay?: number; // 退出动画延迟 秒
+
+  showProgressBar?: boolean; // 是否显示进度条
+  enterDuration?: number; // 进入动画持续时间（秒）
+  exitDuration?: number; // 退出动画持续时间（秒）
 }>();
 
 const emit = defineEmits<{
@@ -36,6 +46,11 @@ const aniStatus = reactive<AnimateStatus>({
   stage: 'init',
   status: 'done',
 });
+const progressValue = useMotionValue(0);
+// useMotionValueEvent(progressValue, 'change', (latest) => {
+// console.log(`Progress: ${latest}`);
+// });
+const progressPercent = useTransform(progressValue, value => `${value * 100}%`);
 
 async function runSequence(seq: AnimationSequence, options?: { duration?: number }) {
   if (!seq)
@@ -69,9 +84,12 @@ async function runEnterSequence() {
   const seq: AnimationSequence = [
     [container.value!, { opacity: [0, 1], y: ['100vh', 0] }, { at: '0', duration: 0.5 }],
   ];
+
   await runSequence(seq);
-  if (props.enterSequence)
+  if (props.enterSequence) {
+    animate(progressValue, 0.5, { duration: getSequenceDuration(props.enterSequence()), ease: 'linear' });
     await runSequence(props.enterSequence(), {});
+  }
   emit('enterComplete');
   aniStatus.stage = 'exit';
   aniStatus.status = 'done';
@@ -84,12 +102,15 @@ async function runExitSequence() {
   aniStatus.stage = 'exit';
   aniStatus.status = 'running';
   emit('exitStart');
+
   if (props.exitSequence) {
+    animate(progressValue, 1, { duration: getSequenceDuration(props.exitSequence()), ease: 'linear' });
     await runSequence(props.exitSequence());
   }
   const seq: AnimationSequence = [
     [container.value!, { opacity: [1, 0], y: [0, '-100vh'] }, { at: '+0', duration: 1 }],
   ];
+
   await runSequence(seq, {});
   emit('exitComplete');
   aniStatus.stage = 'exit';
@@ -99,15 +120,62 @@ async function runExitSequence() {
 async function runFullSequence() {
   await runInitSequence();
   // console.log('Init Sequence Completed');
-  if (props.enterDelay)
-    await new Promise(resolve => setTimeout(resolve, props.enterDelay));
+  if (typeof props.enterDelay)
+    await new Promise(resolve => setTimeout(resolve, (props.enterDelay ?? 0) * 1000));
   await runEnterSequence();
   // console.log('Enter Sequence Completed');
-  if (props.exitDelay)
-    await new Promise(resolve => setTimeout(resolve, props.exitDelay));
+  if (typeof props.exitDelay)
+    await new Promise(resolve => setTimeout(resolve, (props.exitDelay ?? 0) * 1000));
   await runExitSequence();
 }
 
+function getSequenceDuration(sequence: AnimationSequence): number {
+  let prevStart = 0;
+  let prevEnd = 0;
+  let totalDuration = 0;
+  for (const item of sequence) {
+    const [, , options = {}] = item as any;
+    const { at, duration = 0.3, delay = 0 } = options as any;
+
+    // 处理 delay 可能是函数（例如 stagger）
+    let delayNum = 0;
+    if (typeof delay === 'function') {
+      delayNum = 0.1;
+    } else {
+      delayNum = delay || 0;
+    }
+
+    // 解析 at
+    let start: number;
+    if (at === undefined) {
+      start = prevEnd;
+    } else if (typeof at === 'number') {
+      start = at;
+    } else if (typeof at === 'string') {
+      if (at === '<') {
+        start = prevStart;
+      } else if (at.startsWith('+')) {
+        start = prevEnd + Number.parseFloat(at);
+      } else if (at.startsWith('-')) {
+        start = prevEnd - Number.parseFloat(at);
+      } else {
+        // 标签等忽略
+        start = prevEnd;
+      }
+    } else {
+      start = prevEnd;
+    }
+
+    start += delayNum;
+    const end = start + duration;
+    totalDuration = Math.max(totalDuration, end);
+    prevStart = start;
+    prevEnd = end;
+  }
+  // console.log(`Calculated sequence duration: ${totalDuration}s`);
+  return totalDuration;
+}
+
 defineExpose({
   runFullSequence,
   runInitSequence,

app/components/animate/FirstReason.vue

@@ -23,9 +23,12 @@
       ['.minor-intro-text', { opacity: [1, 0], y: [0, 50] }, { duration: 0.2, at: '<' }],
       [{ opacity: [1, 0] }, { duration: 0.3, at: '+1' }],
     ]"
+    :show-progress-bar="true"
+    :enter-duration="2"
+    :exit-duration="1"
 
-    :enter-delay="5000"
-    :exit-delay="3000"
+    :enter-delay="3"
+    :exit-delay="3"
 
     @init-complete="console.log('Init Complete')"
     @enter-start="() => {

app/components/animate/SecondReason.vue

@@ -27,6 +27,8 @@
       [imgBox1, { opacity: [1, 0], y: [0, -200], scale: [1, 0.4] }, { duration: 0.3, at: '+0.1' }],
       ['.minor-intro-text', { opacity: [1, 0], y: [0, 50] }, { duration: 0.3, at: '+0.2' }],
     ]"
+    :enter-duration="2"
+    :exit-duration="1"
     @init-complete="console.log('Init Complete')"
     @enter-start="() => console.log('Enter Start')"
     @enter-complete="console.log('Enter Complete')"

app/components/animate/ThirdReason.vue

@@ -21,7 +21,10 @@
       ['.minor-intro-text', { opacity: [1, 0], y: [0, 50] }, { duration: 0.3, at: '+0.1' }],
       [imgBox1, { opacity: [1, 0], y: [0, -200], scale: [1, 0.4] }, { duration: 0.4, at: '+0.2' }],
     ]"
-    :exit-delay="10000"
+    :exit-delay="5"
+    :show-progress-bar="true"
+    :enter-duration="4"
+    :exit-duration="5"
     @init-complete="console.log('Init Complete')"
     @enter-start="() => {
       console.log('Enter Start')

app/pages/animate.test.vue

@@ -1,5 +1,5 @@
 <template>
-  <ThirdReason
+  <FirstReason
     v-if="stage === 0"
     ref="sReasonRef"
     title1="为什么选择我们？"
@@ -10,14 +10,14 @@
 </template>
 
 <script lang="ts" setup>
-import ThirdReason from '@/components/animate/ThirdReason.vue';
+import FirstReason from '@/components/animate/FirstReason.vue';
 
 definePageMeta({
   layout: 'fullscreen',
 });
 
 const stage = ref(0);
-const sReasonRef = ref<InstanceType<typeof ThirdReason>>();
+const sReasonRef = ref<InstanceType<typeof FirstReason>>();
 
 onMounted(() => {
   sReasonRef.value?.playFull();