树生长页面改为手动滑动。

src/utils.js

@@ -1,4 +1,4 @@
-function setSlideToRoute(watchTargetRefName, routeDistName, vueCompContext) {
+function registerSlideToRoute(watchTargetRefName, routeDistName, vueCompContext) {
   let mc = new Hammer(vueCompContext.$refs[watchTargetRefName])
   mc.get('pan').set({ direction: Hammer.DIRECTION_ALL })
   mc.on("pandown", function me(ev) {
@@ -8,5 +8,5 @@ function setSlideToRoute(watchTargetRefName, routeDistName, vueCompContext) {
 }
 
 export default {
-  setSlideToRoute,
+  registerSlideToRoute,
 }

src/views/Chart.vue

@@ -383,7 +383,7 @@ export default {
       }
     }, 3000)
 
-    utils.setSlideToRoute('hammer-target', 'End', this)
+    utils.registerSlideToRoute('hammer-target', 'End', this)
   },
   destroyed() {
     this.chartHuodong.dispose()

src/views/Home.vue

@@ -71,7 +71,7 @@ export default {
     }
   },
   mounted() {
-    utils.setSlideToRoute('hammer-target', 'TreeAnimation', this)
+    utils.registerSlideToRoute('hammer-target', 'TreeAnimation', this)
 
     this.intervalId = setInterval(() => {
       if ((this.loadCountDown === 0)) {

src/views/TreeAnimation.vue

@@ -5,18 +5,14 @@
   >
     <div
       v-show="showTree"
+      ref="img-wrapper"
       class="img-wrapper"
+      @scroll="onImgWrapperScroll"
     >
-      <div
-        class="bbg"
-        :style="{
-          backgroundImage: `url(${require('@/assets/image/tall-tree.png')})`,
-          backgroundPosition:`0 calc(100% - ${animationBottom.value}px)`
-        }"
-      />
       <img
-        id="tree-image"
-        src="@/assets/image/tall-tree-for-computing-height.jpg"
+        ref="tree-image"
+        class="tree-image"
+        src="@/assets/image/tall-tree.png"
         alt=""
         @load="onTreeImgLoad"
       >
@@ -47,91 +43,64 @@
 </template>
 
 <script>
-import TWEEN from '@tweenjs/tween.js'
+
+function avoidPulldownRefresh(event, vueContext) {
+  if (vueContext.$refs['img-wrapper'].scrollTop === 0) {
+    event.preventDefault()
+  } else {
+    return
+  }
+}
 
 export default {
   data() {
     return {
       showTree: false,
       showSlideTip: false,
-      animationBottom: {
-        value: 0
-      },
-      requestAnimationId: null,
-      treeImageNode: null,
-      timeoutId: null,
     }
   },
   computed: {
 
   },
+  created() {
+    document.addEventListener('touchmove', avoidPulldownRefresh, {
+      passive: false,
+    })
+  },
   mounted() {
   },
   destroyed() {
-    cancelAnimationFrame(this.requestAnimationId)
-    clearTimeout(this.timeoutId)
+    document.removeEventListener('touchmove', avoidPulldownRefresh, {
+      passive: false,
+    })
   },
   methods: {
-    animate() {
-      TWEEN.update()
-      // 这个动画如果用css实现，在ios里会有图片显示不全的问题。如果用tree img元素绝对定位且动态改变位置，在安卓版微信内置浏览器上又会有bug。
-      this.requestAnimationId = requestAnimationFrame(this.animate)
-    },
     onTreeImgLoad() {
       this.showTree = true
+      this.$nextTick(() => {
+        this.$refs['img-wrapper'].scrollTop = this.$refs['tree-image'].scrollHeight
+      })
 
-      this.timeoutId = setTimeout(() => {
-        this.treeImageNode = document.getElementById('tree-image')
-        const tween1 = new TWEEN.Tween(this.animationBottom)
-        tween1.to({
-          value: -this.treeImageNode.clientHeight * 0.305
-        }, 39344 * 0.305)
-        tween1.easing(TWEEN.Easing.Sinusoidal.InOut)
-
-        const tween2 = new TWEEN.Tween(this.animationBottom)
-        tween2.to({
-          value: -this.treeImageNode.clientHeight * 0.50
-        }, 39344 * (0.50 - 0.305))
-        tween2.easing(TWEEN.Easing.Sinusoidal.InOut)
-
-        const tween3 = new TWEEN.Tween(this.animationBottom)
-        tween3.to({
-          value: -this.treeImageNode.clientHeight * 0.59
-        }, 39344 * (0.59 - 0.50))
-        tween3.easing(TWEEN.Easing.Sinusoidal.InOut)
-
-        const tween4 = new TWEEN.Tween(this.animationBottom)
-        tween4.to({
-          value: -this.treeImageNode.clientHeight * 0.7
-        }, 39344 * (0.7 - 0.59))
-        tween4.easing(TWEEN.Easing.Sinusoidal.InOut)
-
-        const tween5 = new TWEEN.Tween(this.animationBottom)
-        tween5.to({
-          value: -this.treeImageNode.clientHeight * 0.8
-        }, 39344 * (0.8 - 0.7))
-        tween5.easing(TWEEN.Easing.Sinusoidal.InOut)
-
-        const tween6 = new TWEEN.Tween(this.animationBottom)
-        tween6.to({
-          value: window.innerHeight - this.treeImageNode.clientHeight
-        }, 39344 * (1 - 0.8) - 39344 * window.innerHeight / this.treeImageNode.clientHeight)
-        tween6.onComplete(() => {
-          this.showSlideTip = true
-
-          utils.setSlideToRoute('hammer-target', 'TreeSelection', this)
-        })
-        tween6.easing(TWEEN.Easing.Sinusoidal.InOut)
-
-        tween1.chain(tween2)
-        tween2.chain(tween3)
-        tween3.chain(tween4)
-        tween4.chain(tween5)
-        tween5.chain(tween6)
-
-        tween1.start()
-        this.requestAnimationId = this.animate()
-      }, 1000)
+      let mc = new Hammer(this.$refs['hammer-target'])
+      mc.get('pan').set({ direction: Hammer.DIRECTION_ALL })
+      const that = this
+      mc.on("pandown", function me() {
+        if (that.$refs['img-wrapper'].scrollTop === 0) {
+          that.$router.push({ name: 'TreeSelection' })
+          mc.off('pandown', me)
+        } else {
+          return
+        }
+      })
+    },
+    onImgWrapperScroll(e) {
+      if (this.$refs['tree-image'].scrollHeight - window.innerHeight - e.target.scrollTop <= 50) {
+        this.showSlideTip = true
+      } else if ( e.target.scrollTop === 0) {
+        this.showSlideTip = true
+      } else {
+        this.showSlideTip = false
+      }
     }
   }
 }
@@ -143,31 +112,13 @@ export default {
   height: 100%;
   position: relative;
   > .img-wrapper {
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 18.28rem;
-    top: 0;
-    bottom: 0;
-    overflow: hidden;
-    .bbg{
-      width: 100%;
-      height: 100%;
-      background-repeat: no-repeat;
-      background-size: 100% auto;
-      background-position: 0 100%;
-      animation-name: emerge;
-      animation-duration: 1s;
-      animation-timing-function: linear;
-      animation-delay: 0s;
-      animation-fill-mode: forwards;
-    }
-    > img {
-      position: absolute;
-      width: 100%;
-      opacity: 0;
-      bottom: 0;
-      z-index: -1;
+    height: 100%;
+    widows: 100%;;
+    overflow: auto;
+    > .tree-image {
+      display: block;
+      margin: 0 auto;
+      width: 18.28rem;
     }
   }
   > .loading {
@@ -196,34 +147,4 @@ export default {
     opacity: 1;
   }
 }
-@keyframes start-slide {
-  0% {
-    top: 100%;
-    transform: translateY(-100%);
-  }
-  100% {
-    top: 100%;
-    transform: translateY(-95%);
-  }
-}
-@keyframes linear-slide {
-  0% {
-    top: 100%;
-    transform: translateY(-95%);
-  }
-  100% {
-    top: 0%;
-    transform: translateY(-5%);
-  }
-}
-@keyframes end-slide {
-  0% {
-    top: 0%;
-    transform: translateY(-5%);
-  }
-  100% {
-    top: 0;
-    transform: translateY(0);
-  }
-}
 </style>

src/views/TreeSelection.vue

@@ -188,7 +188,7 @@ export default {
     }),
   },
   mounted() {
-    utils.setSlideToRoute('hammer-target', 'Chart', this)
+    utils.registerSlideToRoute('hammer-target', 'Chart', this)
     this.intervalId = setInterval(() => {
       let idxBackup = 0
       switch (this.currentTab) {