一、安装及引用
# yarn
yarn add @tweenjs/tween.js
# npm
npm install @tweenjs/tween.js --save
引用
import Tween from '@tweenjs/tween.js'
二、基本使用
import TWEEN from '@tweenjs/tween.js'
const actionPos = {x:0, y:0}
const myTween = new TWEEN.Tween(actionPos)
myTwen.to({x:100, y:200}, 5000)
.onUpdate((pos)=>console.log(pos))
.onComplete(()=>console.log('finish'))
.start()
function animate() {
window.requestAnimationFrame(animate)
TWEEN.update()
}
animate()
三、常用方法
常用的回调
onStart // 动画开始时触发
onStop // 动画调用stop()时触发
onUpdate // 更新时画面时触发
onComplete // 动画正常结束时触发
一些重要的方法
tween.start() // 启动动画
tween.delay(int) // 延时一个时间
tween.stop() // 停止
tween.repeat(10) // 设置重复10次, repeat(Infinity) 无限循环
tween.chain(tween) // 链接下一个动画
tween.easing(fun) // 设置动画函数
// easing的fun可以是自定义的函数,包括一个输入参数,一个返回参数
// Tween自带函数的变量公式为 tween.easing(TWEEN.Easing.函数名.类型名)
/ TWEEN.Easing.Quadratic.In
// TWEEN.Easing.Quadratic.Out
// tween自带的一些函数,如下:
easing函数 | 描述 |
---|---|
Linear | 线性匀速运动效果 |
Quadratic | 二次方的缓动(t^2) |
Cubic | 三次方的缓动() |
Quartic | 四次方的缓动() |
Quintic | 五次方的缓动 |
Sinusoidal | 正弦曲线的缓动() |
Exponential | 指数曲线的缓动() |
Circular | 圆形曲线的缓动() |
Elastic | 指数衰减的正弦曲线缓动() |
Back | 超过范围的三次方的缓动 |
Bounce | 指数衰减的反弹缓动 |
easing类型 | 描述 |
---|---|
In | 加速,先慢后快 |
Out | 减速,先快后慢 |
InOut | 前半段加速,后半段减速 |
全局方法
TWEEN.update() // 激活所有tween
TWEEN.getAll() // 获取所有激活tween数组
TWEEN.removeAll // 移除所有激活的tween
TWEEN.add(tween) // 添加一个到激活的列表中
TWEEN.remove(tween) // 移除一个