Merge branch 'master' into local-deploy

src/views/TreeAnimation.vue

@@ -40,50 +40,60 @@
 </template>
 
 <script>
+import TWEEN from '@tweenjs/tween.js'
 
 export default {
   data() {
     return {
       showTree: false,
       showSlideTip: false,
+      animationBottom: {
+        value: 0
+      },
+      requestAnimationId: null,
+      treeImageNode: null,
     }
   },
   computed: {
 
   },
   mounted() {
-
   },
-  unmounted() {
+  destroyed() {
+    cancelAnimationFrame(this.requestAnimationId)
   },
   methods: {
+    animate() {
+      console.log('animate!')
+      TWEEN.update()
+      // 这个动画如果用css实现，在ios里会有图片显示不全的问题。
+      this.treeImageNode.style.bottom = this.animationBottom.value + 'px'
+      this.requestAnimationId = requestAnimationFrame(this.animate)
+    },
     onTreeImgLoad() {
       this.showTree = true
 
       setTimeout(() => {
-        const treeImageNode = document.getElementById('tree-image')
-        let bottom = 0
-        let imageHeight = treeImageNode.clientHeight
-        const intervalId = setInterval(() => {
-          bottom -= 4
-          if ((-bottom) >= (imageHeight - window.innerHeight)) {
-            clearInterval(intervalId)
+        this.treeImageNode = document.getElementById('tree-image')
+        const tween = new TWEEN.Tween(this.animationBottom)
+        tween.to({
+          value: window.innerHeight - this.treeImageNode.clientHeight
+        }, 45000)
+        tween.onComplete(() => {
+          this.showSlideTip = true
 
-            // 这个动画如果用css实现，在ios里会有图片显示不全的问题。
-            treeImageNode.style.bottom = -(imageHeight - window.innerHeight) + 'px'
-            this.showSlideTip = true
+          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' })
+          })
+        })
+        tween.easing(TWEEN.Easing.Sinusoidal.InOut)
+        tween.start()
 
-            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 {
-            treeImageNode.style.bottom = bottom + 'px'
-          }
-        }, 30)
+        this.requestAnimationId = this.animate()
       }, 1000)
     }
   }