状态动画与侦听器

通过侦听器我们能监听到任何数值属性的数值更新。可能听起来很抽象，所以让我们先来看看使用 GreenSock 一个例子：

  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
  3. <div id="animated-number-demo">
  4.   <input v-model.number="number" type="number" step="20">
  5.   <p>{{ animatedNumber }}</p>
  6. </div>
  1. new Vue({
  2.   el: '#animated-number-demo',
  3.   data: {
  4.     number: 0,
  5.     tweenedNumber: 0
  6.   },
  7.   computed: {
  8.     animatedNumber: function() {
  9.       return this.tweenedNumber.toFixed(0);
  10.     }
  11.   },
  12.   watch: {
  13.     number: function(newValue) {
  14.       TweenLite.to(this.$data, 0.5, { tweenedNumber: newValue });
  15.     }
  16.   }
  17. })

状态动画与侦听器 - 图1

当你把数值更新时，就会触发动画。这个是一个不错的演示，但是对于不能直接像数字一样存储的值，比如 CSS 中的 color 的值，通过下面的例子我们来通过 Tween.js 和 Color.js 实现一个例子：

  1. <script src="https://cdn.jsdelivr.net/npm/tween.js@16.3.4"></script>
  2. <script src="https://cdn.jsdelivr.net/npm/color-js@1.0.3"></script>
  4. <div id="example-7">
  5.   <input
  6.     v-model="colorQuery"
  7.     v-on:keyup.enter="updateColor"
  8.     placeholder="Enter a color"
  9.   >
  10.   <button v-on:click="updateColor">Update</button>
  11.   <p>Preview:</p>
  12.   <span
  13.     v-bind:style="{ backgroundColor: tweenedCSSColor }"
  14.     class="example-7-color-preview"
  15.   ></span>
  16.   <p>{{ tweenedCSSColor }}</p>
  17. </div>
  1. var Color = net.brehaut.Color
  3. new Vue({
  4.   el: '#example-7',
  5.   data: {
  6.     colorQuery: '',
  7.     color: {
  8.       red: 0,
  9.       green: 0,
  10.       blue: 0,
  11.       alpha: 1
  12.     },
  13.     tweenedColor: {}
  14.   },
  15.   created: function () {
  16.     this.tweenedColor = Object.assign({}, this.color)
  17.   },
  18.   watch: {
  19.     color: function () {
  20.       function animate () {
  21.         if (TWEEN.update()) {
  22.           requestAnimationFrame(animate)
  23.         }
  24.       }
  26.       new TWEEN.Tween(this.tweenedColor)
  27.         .to(this.color, 750)
  28.         .start()
  30.       animate()
  31.     }
  32.   },
  33.   computed: {
  34.     tweenedCSSColor: function () {
  35.       return new Color({
  36.         red: this.tweenedColor.red,
  37.         green: this.tweenedColor.green,
  38.         blue: this.tweenedColor.blue,
  39.         alpha: this.tweenedColor.alpha
  40.       }).toCSS()
  41.     }
  42.   },
  43.   methods: {
  44.     updateColor: function () {
  45.       this.color = new Color(this.colorQuery).toRGB()
  46.       this.colorQuery = ''
  47.     }
  48.   }
  49. })
  1. .example-7-color-preview {
  2.   display: inline-block;
  3.   width: 50px;
  4.   height: 50px;
  5. }

状态动画与侦听器 - 图2