• 状态动画与侦听器

    状态动画与侦听器

    通过侦听器我们能监听到任何数值属性的数值更新。可能听起来很抽象，所以让我们先来看看使用 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