历史回顾开始重做

src/App.vue

@@ -135,83 +135,83 @@ export default {
     HomeFadeIn,
   },
   setup () {
-    const isShowFadeInMask = ref(true)
+    const isShowFadeInMask = ref(false)
     const progress = ref(0)
-    onMounted(() => {
-      /**
-     * 加载unity
-     */
-      window.addEventListener("load", function () {
-        if ("serviceWorker" in navigator) {
-          navigator.serviceWorker.register("ServiceWorker.js")
-        }
-      })
+    // onMounted(() => {
+    //   /**
+    //  * 加载unity
+    //  */
+    //   window.addEventListener("load", function () {
+    //     if ("serviceWorker" in navigator) {
+    //       navigator.serviceWorker.register("ServiceWorker.js")
+    //     }
+    //   })
 
-      var canvas = document.querySelector("#unity-canvas")
+    //   var canvas = document.querySelector("#unity-canvas")
 
-      var buildUrl = "unity/Build"
-      var loaderUrl = buildUrl + "/SHIndustryMuseum_2.10.loader.js"
-      var config = {
-        dataUrl: buildUrl + "/SHIndustryMuseum_2.10.data.unityweb",
-        frameworkUrl: buildUrl + "/SHIndustryMuseum_2.10.framework.js.unityweb",
-        codeUrl: buildUrl + "/SHIndustryMuseum_2.10.wasm.unityweb",
-        streamingAssetsUrl: "StreamingAssets",
-        companyName: "DefaultCompany",
-        productName: "SHIndustryMuseum",
-        productVersion: "0.1",
-      }
+    //   var buildUrl = "unity/Build"
+    //   var loaderUrl = buildUrl + "/SHIndustryMuseum_2.10.loader.js"
+    //   var config = {
+    //     dataUrl: buildUrl + "/SHIndustryMuseum_2.10.data.unityweb",
+    //     frameworkUrl: buildUrl + "/SHIndustryMuseum_2.10.framework.js.unityweb",
+    //     codeUrl: buildUrl + "/SHIndustryMuseum_2.10.wasm.unityweb",
+    //     streamingAssetsUrl: "StreamingAssets",
+    //     companyName: "DefaultCompany",
+    //     productName: "SHIndustryMuseum",
+    //     productVersion: "0.1",
+    //   }
 
-      // By default Unity keeps WebGL canvas render target size matched with
-      // the DOM size of the canvas element (scaled by window.devicePixelRatio)
-      // Set this to false if you want to decouple this synchronization from
-      // happening inside the engine, and you would instead like to size up
-      // the canvas DOM size and WebGL render target sizes yourself.
-      // config.matchWebGLToCanvasSize = false;
-      if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
-      // Mobile device style: fill the whole browser client area with the game canvas:
-        var meta = document.createElement('meta')
-        meta.name = 'viewport'
-        meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes'
-        document.getElementsByTagName('head')[0].appendChild(meta)
-      }
+    //   // By default Unity keeps WebGL canvas render target size matched with
+    //   // the DOM size of the canvas element (scaled by window.devicePixelRatio)
+    //   // Set this to false if you want to decouple this synchronization from
+    //   // happening inside the engine, and you would instead like to size up
+    //   // the canvas DOM size and WebGL render target sizes yourself.
+    //   // config.matchWebGLToCanvasSize = false;
+    //   if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
+    //   // Mobile device style: fill the whole browser client area with the game canvas:
+    //     var meta = document.createElement('meta')
+    //     meta.name = 'viewport'
+    //     meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes'
+    //     document.getElementsByTagName('head')[0].appendChild(meta)
+    //   }
 
-      var script = document.createElement("script")
-      script.src = loaderUrl
-      script.onload = () => {
-        createUnityInstance(canvas, config, (paramProgress) => {
-          progress.value = Math.round(paramProgress * 100)
-          if (paramProgress > 0.95) {
-            setTimeout(() => {
-              isShowFadeInMask.value = false
-            }, 1000)
-          }
-        }).then((unityInstance) => {
-          window.gUnityInst = unityInstance
-          utils.loadUnitySceneGeneral()
-        }).catch((message) => {
-          alert(message)
-        })
-      }
-      window.onClickEnterprise = function (id) {
-        if (window.handleClickEnterprise) {
-          window.handleClickEnterprise(id)
-        }
-      }
-      window.onClickPlanet = function (id) {
-        if (window.handleClickPlanet) {
-          window.handleClickPlanet(id)
-        }
-      }
-      window.onMovedPlanet = function (id) {
-        if (window.handleMovedPlanet) {
-          window.handleMovedPlanet(id)
-        }
-      }
-      document.body.appendChild(script)
-      /**
-       * end of unity
-       */
-    })
+    //   var script = document.createElement("script")
+    //   script.src = loaderUrl
+    //   script.onload = () => {
+    //     createUnityInstance(canvas, config, (paramProgress) => {
+    //       progress.value = Math.round(paramProgress * 100)
+    //       if (paramProgress > 0.95) {
+    //         setTimeout(() => {
+    //           isShowFadeInMask.value = false
+    //         }, 1000)
+    //       }
+    //     }).then((unityInstance) => {
+    //       window.gUnityInst = unityInstance
+    //       utils.loadUnitySceneGeneral()
+    //     }).catch((message) => {
+    //       alert(message)
+    //     })
+    //   }
+    //   window.onClickEnterprise = function (id) {
+    //     if (window.handleClickEnterprise) {
+    //       window.handleClickEnterprise(id)
+    //     }
+    //   }
+    //   window.onClickPlanet = function (id) {
+    //     if (window.handleClickPlanet) {
+    //       window.handleClickPlanet(id)
+    //     }
+    //   }
+    //   window.onMovedPlanet = function (id) {
+    //     if (window.handleMovedPlanet) {
+    //       window.handleMovedPlanet(id)
+    //     }
+    //   }
+    //   document.body.appendChild(script)
+    //   /**
+    //    * end of unity
+    //    */
+    // })
 
     const isShowNavBar = ref(true)
     const activeNavItemIdx = ref(0)

src/router/index.js

@@ -1,6 +1,6 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 import GeneralView from '../views/General.vue'
-import HistoryView from '../views/History.vue'
+import HistoryView from '../views/HistoryNew.vue'
 import TreasureView from '../views/Treasure.vue'
 import TreasureDetail from '../views/TreasureDetail.vue'
 import RecordView from '../views/Record.vue'

src/views/HistoryNew.vue

@@ -0,0 +1,304 @@
+<template>
+  <div
+    class="history-view"
+    @touchstart.passive="onTouchStart"
+    @touchmove.passive="onTouchMove"
+    @touchend="onTouchEnd"
+    @touchcancel="onTouchCancel"
+  >
+    <div
+      class="gear-wrap"
+      @click="doTest"
+    >
+      <img
+        v-show="gearStatus==='idle'"
+        class="gear gear-static-1"
+        src="@/assets/images/gear-idle.png"
+        alt=""
+        draggable="false"
+      >
+      <img
+        v-show="gearStatus==='clockwise'"
+        class="gear gear-clockwise"
+        src="@/assets/images/gear-clockwise.png"
+        alt=""
+        draggable="false"
+      >
+      <img
+        v-show="gearStatus==='countercockwise'"
+        class="gear gear-counterclockwise"
+        src="@/assets/images/gear-counterclockwise.png"
+        alt=""
+        draggable="false"
+      >
+    </div>
+    <div
+      class="time-axis-wrap"
+      :style="{
+        left: timeAxisLeft,
+      }"
+    >
+      <img
+        class="time-axis one"
+        src="@/assets/images/time-axis.png"
+        alt=""
+        draggable="false"
+      >
+      <img
+        class="time-axis two"
+        src="@/assets/images/time-axis.png"
+        alt=""
+        draggable="false"
+      >
+    </div>
+    <div
+      class="test"
+      :style="{
+        left: testLeft,
+      }"
+    />
+  </div>
+</template>
+
+<script>
+import { reactive, toRefs, ref, watch, onMounted, onBeforeUnmount, } from 'vue'
+
+export default {
+  setup () {
+    // 时代阶段
+    const stageList = [
+      {
+        name: '开埠通商',
+        startTime: '1843',
+        endTime: '1894',
+        startTimeFriendly: '十九世纪四十年代',
+        endTimeFriendly: '十九世纪九十年代',
+        components: '上海近代工业蹒跚起步',
+      },
+      {
+        name: '曲折发展',
+        startTime: '1895',
+        endTime: '1936',
+        startTimeFriendly: '十九世纪九十年代',
+        endTimeFriendly: '二十世纪三十年代',
+        components: '上海近代工业起起伏伏',
+      },
+      {
+        name: '步履维艰',
+        startTime: '1937',
+        endTime: '1949',
+        startTimeFriendly: '二十世纪三十年代',
+        endTimeFriendly: '二十世纪五十年代',
+        components: '上海民族工业几经崩溃',
+      },
+      {
+        name: '筚路蓝缕',
+        startTime: '1950',
+        endTime: '1978',
+        startTimeFriendly: '二十世纪五十年代',
+        endTimeFriendly: '二十世纪七十年代',
+        components: '上海现代工业扬帆起航',
+      },
+      {
+        name: '改革开放',
+        startTime: '1979',
+        endTime: '1996',
+        startTimeFriendly: '二十世纪七十年代',
+        endTimeFriendly: '二十世纪九十年代',
+        components: '上海工业凤凰涅槃',
+      },
+      {
+        name: '战略负重',
+        startTime: '1997',
+        endTime: '2011',
+        startTimeFriendly: '二十世纪九十年代',
+        endTimeFriendly: '本世纪一十年代',
+        components: '上海工业筑梦前行',
+      },
+      {
+        name: '创新驱动',
+        startTime: '2012',
+        endTime: '2020',
+        startTimeFriendly: '本世纪一十年代',
+        endTimeFriendly: '本世纪二十年代',
+        components: '上海工业转型升级',
+      },
+      {
+        name: '追梦未来',
+        startTime: '2021',
+        endTime: '2035',
+        startTimeFriendly: '本世纪二十年代',
+        endTimeFriendly: '本世纪三十年代',
+        components: '上海工业再创辉煌',
+      },
+    ]
+    const currentTimeIdx = ref(0)
+
+    // 用户操作相关
+    const isMouseDown = ref(false)
+    const lastMoveEventTimeStamp = ref(0)
+    const lastTouchPos = ref(0)
+
+    // 镜头平移相关
+    const moveSpeed = ref(0)
+    const translateLength = ref(0)
+    const maxTranslateLength = ref(1000000)
+
+    // 用户操作改变镜头平移速度
+    function onTouchStart(e) {
+      isMouseDown.value = true
+      moveSpeed.value = 0
+      lastMoveEventTimeStamp.value = 0
+      lastAnimationTimeStamp = Date.now()
+      lastTouchPos.value = e.changedTouches[0].clientX
+      console.log('start!')
+    }
+    function onTouchEnd(e) {
+      isMouseDown.value = false
+      console.log('end!')
+    }
+    function onTouchCancel() {
+      isMouseDown.value = false
+    }
+    function onTouchMove(e) {
+      console.log('move!')
+      if (isMouseDown.value && e.changedTouches.length === 1) {
+        // 疯狂操作的极端情况下两个时间戳之间的时差会不合理，甚至为0
+        if (lastMoveEventTimeStamp.value && (e.timeStamp - lastMoveEventTimeStamp.value > 1)) {
+          // 更新speed
+          console.log('shabi')
+          const currentMoveSpeed = - (e.changedTouches[0].clientX - lastTouchPos.value) / (e.timeStamp - lastMoveEventTimeStamp.value) * 0.5
+          moveSpeed.value = moveSpeed.value * 0.9 + currentMoveSpeed * 0.1
+          lastTouchPos.value = e.changedTouches[0].clientX
+        }
+        lastMoveEventTimeStamp.value = e.timeStamp
+      }
+    }
+
+    /**
+     * 动画帧相关
+     */
+    let lastAnimationTimeStamp = 0
+    let animationFrameId = null
+    // 在每一帧更新镜头速度、位置
+    function animationFrameTask() {
+      const timeStamp = Date.now()
+      const timeElapsed = timeStamp - lastAnimationTimeStamp
+
+      // 速度减慢
+      if (moveSpeed.value > 0) {
+        moveSpeed.value -= ($.valueisMobile ? 0.001 : 0.003) * timeElapsed
+        if (moveSpeed.value < 0) {
+          moveSpeed.value = 0
+        }
+      } else if (moveSpeed.value < 0) {
+        moveSpeed.value += ($.valueisMobile ? 0.001 : 0.003) * timeElapsed
+        if (moveSpeed.value > 0) {
+          moveSpeed.value = 0
+        }
+      }
+
+      // 根据速度更新位置
+      translateLength.value += moveSpeed.value * timeElapsed
+      if (translateLength.value < 0) {
+        translateLength.value = 0
+        moveSpeed.value = 0
+      } else if (translateLength.value > maxTranslateLength.value) {
+        translateLength.value = maxTranslateLength.value
+        moveSpeed.value = 0
+      }
+      console.log(translateLength.value)
+      lastAnimationTimeStamp = timeStamp
+      animationFrameId = requestAnimationFrame(animationFrameTask)
+    }
+    onMounted(() => {
+      animationFrameId = requestAnimationFrame(animationFrameTask)
+    })
+    onBeforeUnmount(() => {
+      cancelAnimationFrame(animationFrameId)
+    })
+
+    // 动画
+    // 恢复历史位置
+    // if (this.longImageTranslateLengthRecord) {
+    //   this.translateLength = this.longImageTranslateLengthRecord
+    //   this.setLongImageTranslateLengthRecord(null)
+    // }
+
+
+    // 根据镜头平移距离计算当前时代
+    watch(translateLength, (vNew) => {
+    }, {
+      immediate: true,
+    })
+
+    const testSpeedRate = 1
+    const initialTestLeft = `1000px`
+    const testLeft = ref(initialTestLeft)
+    watch(translateLength, (vNew) => {
+      console.log('sdjgflksklfg', vNew)
+      testLeft.value = `calc(${initialTestLeft} - ${vNew * testSpeedRate}px)`
+    })
+
+    // 时间轴位移
+    const timeAxisLeft = ref('0px')
+    watch(translateLength, (vNew) => {
+      timeAxisLeft.value = `${-(vNew % 1920)}px`
+    })
+
+    // 齿轮
+    const gearStatus = ref('idle')
+    function doTest() {
+      gearStatus.value = 'clockwise'
+      setTimeout(() => {
+        gearStatus.value = 'idle'
+      }, 2000)
+    }
+
+    return {
+      onTouchStart,
+      onTouchEnd,
+      onTouchCancel,
+      onTouchMove,
+      testLeft,
+      timeAxisLeft,
+      gearStatus,
+      doTest,
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.history-view {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  >.gear-wrap {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: calc(100vw * 940 / 1920);
+    >img.gear{
+      width: 100%;
+    }
+  }
+  >.time-axis-wrap{
+    top: 54%;
+    position: absolute;
+    display: flex;
+    >.time-axis{
+      width: 1920px;
+    }
+  }
+  >.test{
+    position: absolute;
+    width: 100px;
+    height: 100px;
+    background-color: red;
+  }
+}
+</style>