導(dǎo)入：

v3：

v2:

npm install --save @tweenjs/tween.js

創(chuàng)建:

創(chuàng)建tween.js放入plugins目錄中

import TWEEN from '@tweenjs/tween.js'

export default{
  install:function(Vue){
    Vue.prototype.$tween = this;
    Vue.prototype.$tweener = TWEEN;
  },
  pause:function(tw){
    tw.pause();
  },
  fade:function(target,to,during,delay,easing,onUpdate,onComplete){
    if(!target || !to){
      return;
    }
    if(during==null){
      during = 260;
    }
    let tw = new TWEEN.Tween(target).to(to,during);
    if(delay) tw.delay(delay);
    tw.easing(easing || TWEEN.Easing.Linear.None)
    if(onUpdate) tw.onUpdate(onUpdate);
    if(onComplete) tw.onComplete(onComplete);
    tw.start();
    return tw;
  },
}

調(diào)用：

/**緩動(dòng) */
import tween from "./plugins/tween";
Vue.use(tween);

//new Vue中需要添加動(dòng)畫刷新：
mounted(){
    this.tweenUpdate();
  },
methods:{
    tweenUpdate(){
      requestAnimationFrame(this.tweenUpdate);
      this.$tweener.update();
    },
},

使用：

在任何事件調(diào)用即可中直接使用

onTestClick() {
      this.$tween.fade(this,{testValue:10000},60000);
},

效果