vue使用tweenjs

导入:

v3:

v2:

npm install --save @tweenjs/tween.js

创建:

创建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;
  },
}

调用:

/**缓动 */
import tween from "./plugins/tween";
Vue.use(tween);

//new Vue中需要添加动画刷新:
mounted(){
    this.tweenUpdate();
  },
methods:{
    tweenUpdate(){
      requestAnimationFrame(this.tweenUpdate);
      this.$tweener.update();
    },
},

使用:

在任何事件调用即可中直接使用

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

效果

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容