tween.js简介

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曲线

如果有写的不对的地方，欢迎各位大佬批评指正。