Vue.js：关于组件里使用 Gsap 添加状态过渡动画的问题

[wanghao]

有同学对 Vue 课程里的 Gsap 过渡动画有疑问，下面我做一下解释。

https://ninghao.net/package/vuejs-javascript-framework

• number 是组件里的一个数据，初始化 0
• tweenedNumber 也是组件里的一个数组，初始值也是 0
• 点按组件按钮会让 number 这个数据的值增加 10
• 在组件里我们 watch 了 number 数据的变化
• number 数据有变化时，将会使用 gsap 添加过渡动画，最终将 number 新的值交给 tweenedNumber
  • 将组件里的数据告诉 gsap，也就是 this.$data
  • gsap 修改的是 tweenedNumber 数据的值，但并不是直接将它改为 number 最新的值，而是从 tweenedNumber 的原始值，慢慢过渡到 number 最新的值。比如 tweenedNumber 原始值是 0，number 最新的值是 10，gsap 可能会将 tweenedNumber 的值先改为 0.5522，然后是 1.2016，接着是 1.7916，最终的结果为 10。

• 由于 gsap 修改的 tweenedNumber 的值可能为小数，所以我们在组件里定义了一个计算属性 animatedNumber，它返回的值就是去掉小数，保存整数的 tweenedNumber 的值。

• 组件里的数据有变化，组件就会被重建，所以我们在组件里能看到数据（animatedNumber）将从 0 到 1，2，3，4 一直到最终的 10。

<template>
  <div class="page">
    <div class="card">
      <div class="card__header">
        <h3 class="card-title">{{ name }}</h3>
        <div class="card-subtitle">Transition & Animation</div>
      </div>
      <div class="card__content">
        <div class="emoji">{{ animatedNumber }}</div>
      </div>
      <div class="card__action">
        <button @click="number = number + 10" :class="{ active: isActive }">
          请按这里
        </button>
      </div>
    </div>
    <div class="status">
      <small>isActive: {{ isActive }}</small>
    </div>
  </div>
</template>

<script>
import _ from 'lodash';
import gsap from 'gsap';

export default {
  data() {
    return {
      name: '宁皓网',
      isActive: true,
      emojiList: ['🌲 ', '🌳 ', '🌴'],
      number: 0,
      tweenedNumber: 0,
    };
  },

  computed: {
    animatedNumber() {
      return this.tweenedNumber.toFixed(0);
    },
  },

  watch: {
    number(newValue) {
      gsap.to(this.$data, { duration: 0.5, tweenedNumber: newValue });
    },
    
    tweenedNumber(newValue) {
      console.log('tweenedNumber: ', this.tweenedNumber);
    },
  },

  methods: {
    shuffle() {
      this.emojiList = _.shuffle(this.emojiList);
    },

    pop() {
      this.emojiList.pop();
    },
  },
};
</script>

<style>
@import './styles/app.css';
@import './styles/card.css';
@import './styles/animate.css';
</style>