tween.js--使用/教程/实例

简介

​说明​

        本文介绍JavaScript的动画库twween.js的用法。

        Vue 的过渡系统提供了非常多简单的方法设置进入、离开和列表的动画效果。

        那么对于数据元素本身的动效呢？包括数字和运算、颜色的显示、SVG 节点的位置、元素的大小和其他的属性等。所有的原始数字都被事先存储起来，可以直接转换到数字。做到这一步，我们就可以结合 Vue 的响应式和组件系统，使用第三方库来实现切换元素的过渡状态

​官网​

​​[翻译] tween.js 中文使用指南​​​    //对应的​​英文指南​​

Vue+tween.js

​1.安装tween.js​

在工程目录下执行：

npm install @tweenjs/tween.js        //这是新版，老版是：npm install tween.js

​2. 导入​

<script>
import Tween from "@tweenjs/tween.js"
export default {
  // xxx
}
</script>

​实例​(输入数字，显示渐变效果)

​router/index.js​

import Vue from 'vue'
import Router from 'vue-router'
import CompA from "@/components/CompA";

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/compA',
      name: 'compA',
      component: CompA
    }
  ]
})

​components/CompA.vue​

<template>
  <div class="compA">
    <input v-model.number="num" type="number" step="20">
    <p>{{ animatedNumber }}</p>
  </div>
</template>

<script>
import TWEEN from "@tweenjs/tween.js";

export default {
  data() {
    return {
      num: 0,
      animatedNumber: 0
    }
  },
  watch: {
    num: function (newValue, oldValue) {
      this.myTween(newValue, oldValue)
    }
  },
  methods: {
    myTween(newValue, oldValue) {
      let vm = this;
      const animate = function () {
        if (TWEEN.update()) {
          requestAnimationFrame(animate);
        }
      }

      new TWEEN.Tween({tweeningValue: oldValue})
        .to({tweeningValue: newValue}, 500)
        .onUpdate((object) => {
          vm.animatedNumber = object.tweeningValue.toFixed(0)
        })
        .start()

      animate();
    }
  }
}
</script>

<style scoped>
</style>

​注意​

不同版本Tween的onUpdate问题

@tween/tween.js：里边的回调函数，第一个参数为Tween对象。

        （不能像下边tween.js那样写，否则this.tweeningNumber.toFixed(0)会报错：Error in callback for watcher "num": "TypeError: Cannot read property 'toFixed' of undefined"）

        //我不会告诉你，我查这个问题查了一天????

tween.js：需要这么写：

new TWEEN.Tween({ tweeningNumber: oldValue })
  .easing(TWEEN.Easing.Quadratic.Out)
  .to({ tweeningNumber: newValue }, 500)
  .onUpdate(function () {
    vm.animatedNumber = this.tweeningNumber.toFixed(0)
  })
  .start();

​测试​

访问：​​http://localhost:8080/#/compA​​

​​​​