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曲线
如果有写的不对的地方,欢迎各位大佬批评指正。