Tween.js是一个专门用来处理补间动画的js库，tween的词来自于in-between。用户只需要告诉the tweening engine哪些属性需要渐变，属性的终值以及渐变时间，the tweening engine会自动对中间过程做插值。 tween.js用在哪些地方？ tween.js提供了哪些内容？ How do they work? 1、首先需要初始化一个tween instance进行属性配置
let position = {x: 100, y: 0}
let tween = new TWEEN.Tween(position)
tween.to({x: 200}, 1000)
每个tween都默认是TWEEN.Group的实例，如果希望tween不和TWEEN.Group关联，则传递第二个参数为false
const tween = new TWEEN.Tween(position, false)
2、启动tween运行，tween实例不会自动运行，需要显性调用start方法
tween.start() // tween根据配置开始运行
tween.start(time) // 从特定时间time开始运行tween
tween.start(undefined, true) // 从上次补件动画的值开始而不是初始值
controlling a tween的方法除了start外还有stop,用来取消一个tween 3、使用tween, 有两种方法使用tween补间的值
// 1、回调
tween.onUpdate(function(object){
console.log(object.x)
})
// 2、update方法
tween.update() // 获取当前时间的值
tween.update(100) // 获取持续时间100ms的值
4、支持链式，多个tween方法可以做sequence
tweenA.chain(tweenB) // tweenB begin after tweenA finishes
tweenB.chain(tweenA) // infinite chain
tweenA.chain(tweenB, tweenC) // tweenB, tweenC同时开始
5、repeat,重复一个tween
tween.repeat(10)
tween.repeat(Infinity)
6、yoyo
tween.yoyo(false) // default value
tween.yoyo(true) tween will 'yoyou' between start and end values
7、delay
8、repeatDelay
9、dynamic
Callbacks: tween life cycle
- onStart: when a tween is started, 只执行一次，tween repeat的时候不会再执行
- onEveryStart: 每次开始都会执行
- onStop: 显示调用stop方法的时候会执行，tween正常执行完毕不会调用
- onUpdate: 每次更新值的时候调用
- onComplete: tween正常执行完毕调用
- onRepeat: 当一个tween执行完成一次重复并准备开始下一个重复的时候调用
easing function，补件方程
支持的方程有：
Linear, Quadratic, Cubic, Quartic, Quintic, Sinusoidal, Exponential, Circular, Elastic, Back and Bounce
每个方程支持的类型:In, Out and InOut.
支持自定义方程
Tween State：isPlaying、isPaused
