nanjing-museum/src/views/TreeAnimation.vue

<template>
  <div
    ref="hammer-target"
    class="tree-animation"
  >
    <img
      v-for="index of frameNumber"
      v-show="((index - 1) === currentFrameIdx) || ((index - 1) === (currentFrameIdx - 1))"
      :key="index"
      :src="`${$publicPath}tree-grow-frames/初始画面_${(index - 1).toString().padStart(4, '0')}.jpg`"
      alt=""
      @load="onImgLoad(index - 1)"
      @error="onImgError(index - 1)"
    >
    <SlideTip
      v-show="currentFrameIdx === frameNumber - 1"
      class="slide-tip"
      text="了<br>解<br>详<br>情"
    />
    <van-loading
      v-show="isLoading"
      color="#1989fa"
      class="loading"
      type="spinner"
      size="3rem"
      vertical
    >
      <span style="font-size: 1rem;">
        {{ frameLoadProgress }}
      </span>
    </van-loading>
  </div>
</template>

<script>
const frameNumber = 927

export default {
  data() {
    return {
      frameNumber,
      loadedNumber: 0,
      currentFrameIdx: 0,
      intervalId: null,
      imgStateList: new Array(frameNumber),
      loadCountDown: 100,
      isLoading: true,
    }
  },
  computed: {
    frameLoadProgress() {
      return Math.floor(this.loadedNumber / frameNumber * 100) + '%'
    }
  },
  mounted() {
    this.intervalId = setInterval(() => {
      if (this.frameLoadProgress === '100%') {
      // if ((this.loadCountDown === 0) && (this.imgStateList[this.currentFrameIdx + 1] !== undefined)) {
        this.isLoading = false
        do {
          this.currentFrameIdx++
        } while (this.imgStateList[this.currentFrameIdx] === false)
        if (this.currentFrameIdx >= frameNumber - 1) {
          clearInterval(this.intervalId)
          let mc = new Hammer(this.$refs['hammer-target'])
          mc.get('pan').set({ direction: Hammer.DIRECTION_ALL })
          const that = this
          mc.on("panup", function me() {
            mc.off('panup', me)
            that.$router.push({ name: 'TreeSelection' })
          })
        }
      } else {
        this.isLoading = true
      }
    }, 31) // todo
  },
  unmounted() {
  },
  methods: {
    onImgLoad(idx) {
      if (idx < 100) {
        this.loadCountDown--
      }
      this.loadedNumber++
      this.imgStateList[idx] = true
    },
    onImgError(idx) {
      if (idx < 100) {
        this.loadCountDown--
      }
      this.loadedNumber++
      this.imgStateList[idx] = false
    }
  }
}
</script>

<style lang="less" scoped>
.tree-animation {
  width: 100%;
  height: 100%;
  position: relative;
  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
    top: 0;
    left: 0;
  }
  .loading {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>