启动页loading和开始按钮等

src/components/LongImageSerialFrames.vue

@@ -43,18 +43,30 @@ const props = defineProps({
     type: Number,
     default: 41
   },
+  loop: {
+    type: Boolean,
+    default: true,
+  }
 })
 
 const frameWidth = ref(props.totalWidth / props.frameNumber)
 console.assert(Number.isInteger(frameWidth.value), `序列帧的每帧宽度不是整数，可能导致播放时抖动！总宽度：${props.totalWidth}，帧数：${props.frameNumber}，每帧宽度：${frameWidth.value}`)
 
+const emit = defineEmits(['over'])
+
 const frameIdx = ref(0)
 let intervalId = null
 onMounted(() => {
   intervalId = setInterval(() => {
     frameIdx.value++
     if (frameIdx.value === props.frameNumber) {
-      frameIdx.value = 0
+      if (props.loop) {
+        frameIdx.value = 0
+      } else {
+        frameIdx.value--
+        clearInterval(intervalId)
+        emit('over')
+      }
     }
   }, props.frameDuration)
 })
@@ -68,7 +80,6 @@ onBeforeUnmount(() => {
 .single-long-image-serial-frames {
   position: absolute;
   overflow: hidden;
-  pointer-events: none;
   > .long-image {
     position: absolute;
     height: 100%;

src/views/HomeView.vue

@@ -490,7 +490,7 @@ const handletouchstart = (event) => {
 const touchMove = (event) => {
   let currentY = event.changedTouches[0].pageY
   let tY = currentY - fingerPosYWhenTouchStart.value
-  if (tY < -5 && isAtBottomWhenTouchStart.value) {
+  if (tY < -1 && isAtBottomWhenTouchStart.value) {
     isShowVideoFadeToNextPage.value = true
     nextTick(() => {
       videoFadeToNextPageEl.value.play()

src/views/StartupView.vue

@@ -19,7 +19,7 @@
       draggable="false"
     >
 
-    <Transition name="fade-in-out">
+    <Transition name="fade-in">
       <img
         v-if="isShowLoadingTip"
         class="loading-tip"
@@ -27,19 +27,19 @@
         alt=""
         draggable="false"
       >
-      <button
-        v-else-if="isShowStartBtn"
-        class="start"
-        @click="onClickStart"
-      >
-        <img
-          class="bg"
-          src="@/assets/images/start-btn-bg.png"
-          alt=""
-          draggable="false"
-        >
-      </button>
     </Transition>
+    <SerialFrames
+      v-if="!isShowLoadingTip"
+      class="btn-start"
+      :class="isStartBtnBlink ? 'animation-show-hide' : ''"
+      :image-src="require(`@/assets/images/btn-start.png`)"
+      :total-width="864"
+      :height="72"
+      :frame-number="12"
+      :loop="false"
+      @over="isStartBtnBlink = true"
+      @click="onClickStart"
+    />
 
     <Transition name="fade-in">
       <video
@@ -83,13 +83,10 @@ const {
 
 
 const isShowLoadingTip = ref(true)
-const isShowStartBtn = ref(false)
 setTimeout(() => {
   isShowLoadingTip.value = false
-}, 2000)
-setTimeout(() => {
-  isShowStartBtn.value = true
-}, 4000)
+}, 3000)
+const isStartBtnBlink = ref(false)
 
 const isShowVideo = ref(false)
 const isShowSkip = ref(false)
@@ -148,30 +145,13 @@ function onVideoEnd() {
     width: calc(72 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     height: calc(72 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
   }
-  >button.start{
+  >.btn-start{
     position: absolute;
     left: 50%;
-    bottom: calc(56 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    transform: translateX(-50%);
-    width: calc(100 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    height: calc(100 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    font-family: KaiTi, KaiTi;
-    font-weight: 400;
-    font-size: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    color: #FFFFFF;
-    line-height: calc(29 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    >img.bg{
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-47%, -47%);
-      width: calc(90 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      height: calc(90 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      // animation-name: spin;
-      // animation-duration: 1s;
-      // animation-timing-function: linear;
-      // animation-iteration-count: infinite;
-    }
+    bottom: calc(75 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    transform: translateX(-48%);
+    width: calc(72 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    height: calc(72 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
   }
 
   >video.transition-video{