tween.js简介
引言
我以前是做unity的，在unity中经常使用Dotween来做一些简单的动画，学习threejs后，有些相关的业务也需要做一些简单的动画，我就想着看js中有没有类似于dotween的，查了查发现了tweenjs。这里对tweenjs做一些简单的介绍，加深我的学习。
@tweenjs/tween.js - npm (npmjs.com)
tweenjs 是使用 JavaScript 中的一个简单的补间动画库，支持数字、对象的属性和 CSS 样式属性的赋值，并允许链接补间动画和行动结合起来，创造出复杂的序列。
tweenjs 以平滑的方式修改元素的属性值，需要传递给 tween 要修改的值、动画结束时的最终值和动画花费时间（duration），之后 tween 引擎就可以计算从开始动画点到结束动画点之间值，从而产生平滑的动画效果。和dotween的效果一样，就是使用方法稍微有点区别。
安装
# yarn
yarn add @tweenjs/tween.js
# npm
npm install @tweenjs/tween.js --save
使用
添加引用
import Tween from '@tweenjs/tween.js';
方法简介
开始和停止
start和stop方法来控制tween动画的开始和停止。
let position = {
x:100,y:100,z:100};
let testTween = new TWEEN.Tween(position);
testTween.start(); //开始
testTween.stop(); //停止
start方法可以接收一个时间参数，如果使用了时间参数，表示动画将等待该时间之后执行，等同于delay。
动画组合
chain
重复执行
repeat方法接收一个用于描述重复多少次的参数，无穷的话参数传递Infinity。
testTween.repeat(10); //重复执行10次然后停止
testTween.repeat(Infinity); //动画一直执行
yoyo方法只在repeat时起作用，只运行一次时没有效果。传递参数boolean，当为true时，动画效果类似于yoyo球效果，动画在开始或结束处向反方向运行。
testTween.yoyo(true); //启用yoyo效果
比如某一个动画是从1变动到100，如果重复的话，到100之后会从1重新开始，如果使用yoyo，则到100之后会从100缓动到1，再从1缓动到100。
延迟
delay方法用来控制动画的延时。
testTween.delay(5000); //延时5S执行
全局方法
| 方法 | 介绍 |
|---|---|
| TWEEN.update | 该方法用于所有被激活的tweens，传递的参数是时间，如果没有传递参数则使用当前时间。 |
| TWEEN.getAll | 该方法用户获取当前所有被激活的tweens，返回一个数组。 |
| TWEEN.removeAll | 该方法删除所有的tweens。 |
| TWEEN.add | 该方法向已经激活的tween数组中添加一个tween对象，参数为tween对象。 |
| TWEEN.remove | 该方法从已经激活的tween数组中移除一个tween对象，参数为tween对象。 |
easing
| 函数 | 简介 |
|---|---|
| Linear | 线性匀速运动效果 |
| Quadratic | 二次方的缓动 |
| Cubic | 三次方的缓动 |
| Quartic | 四次方的缓动 |
| Quintic | 五次方的缓动 |
| Sinusoidal | 正弦曲线的缓动 |
| Exponential | 指数曲线的缓动 |
| Circular | 圆形曲线的缓动 |
| Elastic | 指数衰减的正弦曲线缓动 |
| Back | 超过范围的三次方的缓动 |
| Bounce | 指数衰减的反弹缓动 |
类型
| 类型 | 简介 |
|---|---|
| In | 加速，先慢后快 |
| Out | 减速，先快后慢 |
| InOut | 前半段加速，后半段减速 |
具体表现效果如下：
Unity Dotween曲线介绍 Ease曲线 Ease图表 Ease效果示例_众里寻春秋的博客-CSDN博客_ease曲线
使用方法
.easing(TWEEN.Easing.easing函数.easing类型)
//例子
//.easing(TWEEN.Easing.Quadratic.Out);
回调函数
| 函数 | 介绍 |
|---|---|
| onStart | 动画开始时触发 |
| onStop | 动画stop时触发 |
| onUpdate | tween每次更新时触发 |
| onComplete | 动画全部结束时触发 |
testTween.onStart(function (object) {
console.log("start");
}).onUpdate(function (object) {
console.log("update");
});
完整的例子
let position = {
x:100,y:100,z:100};
let testTween = new TWEEN.Tween(position);
testTween.to({
x:200,y:200,z:200}, 1000);
testTween.onStart(function () {
console.log("start");
}).onUpdate(function (object) {
console.log("update", object);
}).onComplete(function(){
console.log("complete");
});
testTween.easing(TWEEN.Easing.Quadratic.Out);
testTween.yoyo(true);
testTween.repeat(10);
testTween.start(); //开始
参考文档
Unity Dotween曲线介绍 Ease曲线 Ease图表 Ease效果示例_众里寻春秋的博客-CSDN博客_ease曲线
如果有写的不对的地方，欢迎各位大佬批评指正。