chart页加入tweening过程

package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@tweenjs/tween.js": "^18",
     "core-js": "^3.6.5",
     "less": "3.0.4",
     "less-loader": "^5.0.0",

src/views/Chart.vue

@@ -20,7 +20,7 @@
       <h3>
         观众数
       </h3>
-      <span class="number">{{ yearDataDetail[currentYearIndex]['观众数'] }}</span>
+      <span class="number">{{ dataForShowRounded['观众数'] }}</span>
       <img
         src="@/assets/image/circle1.png"
         alt=""
@@ -34,7 +34,7 @@
       }"
     >
       <h3>临展数</h3>
-      <span class="number">{{ yearDataDetail[currentYearIndex]['临展数'] }}</span>
+      <span class="number">{{ dataForShowRounded['临展数'] }}</span>
       <img
         src="@/assets/image/circle2.png"
         alt=""
@@ -48,7 +48,7 @@
       }"
     >
       <h3>活动数</h3>
-      <span class="number">{{ yearDataDetail[currentYearIndex]['活动数'] }}</span>
+      <span class="number">{{ dataForShowRounded['活动数'] }}</span>
       <img
         src="@/assets/image/circle4.png"
         alt=""
@@ -62,7 +62,7 @@
       }"
     >
       <h3>微信粉丝</h3>
-      <span class="number">{{ yearDataDetail[currentYearIndex]['微信粉丝'] }}</span>
+      <span class="number">{{ dataForShowRounded['微信粉丝'] }}</span>
       <img
         src="@/assets/image/circle3.png"
         alt=""
@@ -76,7 +76,7 @@
       }"
     >
       <h3>外展数</h3>
-      <span class="number">{{ yearDataDetail[currentYearIndex]['外展数'] }}</span>
+      <span class="number">{{ dataForShowRounded['外展数'] }}</span>
       <img
         src="@/assets/image/circle5.png"
         alt=""
@@ -91,6 +91,8 @@
 </template>
 
 <script>
+import TWEEN from '@tweenjs/tween.js'
+
 export default {
   name: 'Chart',
   props: {
@@ -216,30 +218,60 @@ export default {
         },
       ],
       lastPushBubbleTime: null,
+      dataForShow: {
+        '观众数': 0,
+        '临展数': 0,
+        '活动数': 0,
+        '外展数': 0,
+        '专题活动': 0,
+        '微信粉丝': 0,
+      },
+      requestAnimationId: null,
     }
   },
   computed: {
     pickerItemHeight() {
       return 0.12919 * window.innerWidth
+    },
+    dataForShowRounded() {
+      const ret = {}
+      for (const key in this.dataForShow) {
+        if (Object.hasOwnProperty.call(this.dataForShow, key)) {
+          ret[key] = Math.round(this.dataForShow[key])
+        }
+      }
+      return ret
     }
   },
   mounted() {
     this.animate()
+    this.onChange(null, null, this.currentYearIndex)
+  },
+  destroyed() {
+    cancelAnimationFrame(this.requestAnimationId)
   },
   methods: {
-    onConfirm(value, index) {
-      console.log(`Value: ${value}, Index: ${index}`)
-    },
     onChange(picker, value, index) {
       this.currentYearIndex = index
-    },
-    onCancel() {
-      console.log('Cancel')
+      const tween = new TWEEN.Tween(this.dataForShow)
+      const that = this
+      tween.to({
+        '观众数': that.yearDataDetail[that.currentYearIndex]['观众数'],
+        '临展数': that.yearDataDetail[that.currentYearIndex]['临展数'],
+        '活动数': that.yearDataDetail[that.currentYearIndex]['活动数'],
+        '外展数': that.yearDataDetail[that.currentYearIndex]['外展数'],
+        '专题活动': that.yearDataDetail[that.currentYearIndex]['专题活动'],
+        '微信粉丝': that.yearDataDetail[that.currentYearIndex]['微信粉丝'],
+      }, 1500)
+      tween.easing(TWEEN.Easing.Quartic.Out)
+      tween.start()
     },
     goNextPage() {
       this.$router.push('treeSelection')
     },
     animate(callTime) {
+      console.log('asdfsdf')
+      TWEEN.update()
       for (let index = 0; index < 5; index++) {
         const item = this.bubbleTranslation[index]
         if (callTime - this.lastPushBubbleTime > 1000) {
@@ -253,7 +285,7 @@ export default {
         }
         item.x += item.vx
         if (Math.abs(item.x) > 1) {
-          item.vx *= -0.9
+          item.vx *= -1
         }
 
         if (callTime - this.lastPushBubbleTime > 1000) {
@@ -267,14 +299,14 @@ export default {
         }
         item.y += item.vy
         if (Math.abs(item.y) > 1) {
-          item.vy *= -0.9
+          item.vy *= -1
         }
       }
 
       if (callTime - this.lastPushBubbleTime > 1000) {
         this.lastPushBubbleTime = callTime
       }
-      requestAnimationFrame(this.animate)
+      this.requestAnimationId = requestAnimationFrame(this.animate)
     }
   }
 }