Tween.js基础方法

基础方法

• start(time)        

        开始动画

new TWEEN.Tween().start(time)
// 不加参数立即执行，加参数在特定时间执行

• stop()        

        关闭正在执行的动画

new TWEEN.Tween().stop()

• repeat(times)

        重复动画

new TWEEN.Tween().repeat(times)
// times 次数，表示这个动画重复多少次

• chain()

        链式衔接两个动画，例如：一个动画tweenA在另一个动画tweenB结束后开始。可以通过chain方法来使实现。

tweenA.chain(tweenB);//单链接

//循环无限链接
tweenA.chain(tweenB);
tweenB.chain(tweenA);

//将多个动画链接到另一个动画，以使它们同时开始动画：
tweenA.chain(tweenB,tweenC);

• yoyo(boolean)

        控制动画重复模式 , 只有在使用 repeat 时才有效 , 使动画像悠悠球一样来回运动 , 而不是重新开始,

new TWEEN.Tween().repeat(3)
new TWEEN.Tween().yoyo(true)
// 在repeat之后才能使用yoyo()

• delay(time)

        动画延时

new TWEEN.Tween().delay(time)
// time为具体延时时间 单位ms

• pause()

        暂停当前动画

new TWEEN.Tween().pause()

• resume()

        恢复被暂停的动画

new TWEEN.Tween().resume()

• to()

        控制动画的运动形式及方向, 当tween启动时，Tween.js将读取当前属性值并应用相对值来找出新的最终值，相对值必须使用引号，否则该值被视为绝对值

new TWEEN.Tween().to() 

// 对象的属性x的值最后将变成100
var absoluteTween = new TWEEN.Tween(absoluteObj).to({ x: 100 }); 
absoluteTween.start(); 

 //对象的属性x的值最后会+100
var relativeTween = new TWEEN.Tween(relativeObj).to({ x: "+100" });
relativeTween.start(); 

全局操作方法

• update(time)

        更新动画，一般配合window.requestAnimationFrame()使用

TWEEN.update()

• getAll()

        获取所有tweens数组

TWEEN.getAll()

• removeAll()

        删除所有tweens数组

TWEEN.removeAll()

• add()

        添加一个特定动画

var tween = new TWEEN.Tween()
TWEEN.add(tween)

• remove()

        删除一个特定动画

var tween = new TWEEN.Tween()
TWEEN.remove(tween)

• Group()

        将动画进行分组，TWEEN.update()和TWEEN.removeAll() , 不会影响到已经分好组的动画

//补间组
var groupA = new TWEEN.Group();
var groupB = new TWEEN.Group();
 
var tweenA = new TWEEN.Tween({ x: 1 }, groupA)
 .to({ x: 10 }, 100)
 .start();
 
var tweenB = new TWEEN.Tween({ x: 1 }, groupB)
 .to({ x: 10 }, 100)
 .start();
 
var tweenC = new TWEEN.Tween({ x: 1 })
 .to({ x: 10 }, 100)
 .start();
 
groupA.update(); // 只更新tweenA
groupB.update(); // 只更新tweenB
TWEEN.update(); // 只更新tweenC
 
groupA.removeAll(); // 只移除tweenA
groupB.removeAll(); // 只移除tweenB
TWEEN.removeAll(); // 只移除tweenC

回调函数

• onStart(callback)

        tween开始动画前的回调函数

new TWEEN.Tween().onStart((obj)=>{})
// 动画开始时执行,只执行一次

• onStop(callback)

        tween结束动画后的回调函数

new TWEEN.Tween().onStop((obj)=>{}) 

• onUpdate(callback)

        在tween每次被更新后执行

new TWEEN.Tween().onUpdate((obj)=>{})
// 返回实际更新后的值

• onComplete(callback)

        在tween动画全部结束后执行

new TWEEN.Tween().onComplete((obj)=>{})

缓动函数

TWEEN.Easing(TWEEN.Easing.easing函数，easing类型)

easing函数

• Linear              线性匀速运动效果
• Quadratic          二次方的缓动
• Cubic                三次方的缓动
• Quartic              四次方的缓动
• Quintic              五次方的缓动
• Sinusoidal         正弦曲线的缓动
• Exponential       指数曲线的缓动
• Circular             圆形曲线的缓动
• Elastic               指数衰减的正弦曲线缓动
• Back                  超过范围的三次方的缓动
• Bounce              指数衰减的反弹缓动

easing类型

• In               easeIn，加速，先慢后快
• Out            easeOut，减速，先快后慢
• InOut         easeInOut，前半段加速，后半段减速