导入:
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);
},