vue中使用tween.js_vue中使用tween.js

vue中使用tween.js

1，安装

cnpm install --save @tweenjs/tween.js
2，在合适的位置创建tween.js文件，内容如下：

import TWEEN from '@tweenjs/tween.js'

export default{
  install:function(Vue){
    Vue.prototype.$tween = this
    Vue.prototype.$tweener = TWEEN
  },
  pause:function(tw){
    tw.pause()
  },
  update:function(tw){
    TWEEN.update()
  },
  fade:function(target,to,during,delay,repeat,easing,onUpdate,onComplete){
    /**
     * target：源
     * to：属性
     * during：执行时间
     * delay:延时
     * repeat：循环次数
     */
    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)
    if(repeat) tw.repeat(repeat)
    tw.start()
    return tw
  },
}

3，在main.js中引入

import tween from "./utils/tween"

Vue.use(tween)

4，使用

在组件中使用方法

this.$tween.fade(this.xxx.position,{x:20,y:20,z:20},3000,500,5)

this.$tween.update()

爆款云服务器s6 2核4G 低至0.46/天，具体规则查看活动详情

未经允许不得转载：【java爱好者】博客