Three.js - tween.js 补间动画

本文介绍了如何结合three.js和tween.js创建平滑的3D动画。tween.js是一个小型JavaScript库,用于平滑地改变对象属性。文章详细讲解了tween.js的使用方法,包括创建动画、控制动画、使用自定义Easing函数以及设置回调函数。还提供了全局方法和各种过渡效果,帮助开发者实现更丰富的动画效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

tween.js 是一个小型的可生成平滑过渡效果的JavaScript库。
tween.js允许你以平滑的方式修改元素的属性值。你只需要告诉tween你想修改什么值,以及动画结束时它的最终值是什么,动画花费多少时间等信息,tween引擎就可以计算从开始动画点到结束动画点之间值,来产生平滑的动画效果。
github地址:https://github.com/sole/tween.js,克隆下载即可使用。
首先在页面引入src下的Tween.js

<script src="../../libs/tween/Tween.js"></script>

###一、 使用方式
加入我们获取一球体的position对象,其中position对象中包含,x、y、z三个属性,此时我们想让x = x+100,也即是,让球体按照x轴移动100。

1、我们可以这样做,如下代码:
// 获取球体的 position 属性
var position = sphere.position;
// 示例化 Tween对象,并传入一个需要处理的 对象(position)
var tween = new TWEEN.Tween(position);
// 在1000ms 内position.x 的值增加100
tween.to({x:100}, 1000);
2、上面只是创建了 tween对象,需要触发它,实现动画效果
tween.start()
3、为了平滑动画效果,还需要在一个循环动画中调用TWEEN.update()方法。
function animate(){
	TWEEN.update();
	requestAnimationFrame(animate);
}

效果如图:
这里写图片描述
这个动作将会更新所有被激活的tweens,在1秒钟(例如1000ms)position.x 将增加100。
我们可以使用onUpdate回调函数,将结果打印在控制台上。

tween.upDate(function(){
	console.log(this.x);
})

这里写图片描述

###二、 tween.js 动画
Tween.js不像TweenMax.js,它本身不会运行,需要通过update()方法,不断的进行刷新来运行,推荐在动画中使用requestAnimationFrame方法来获得更加平滑和良好的效果。
看下面的例子:

animate();

function animate() {
    requestAnimationFrame(animate);
    // [...]
    TWEEN.update();
    // [...]
}

这里使用无参数调用方式,update方法将明确当前时间,以便于获取上一次动画的执行时间。
你也可以为update方法明确一个时间:

TWEEN.update(100);

上面语句的意思是说:update的时间=100毫秒。你可以使用这种方法来明确代码中所有随时间变化的函数。例如,动画已经开始,你想所有动画都同步进行,你的animate代码一改像这样:

var currentTime = player.currentTime;
TWEEN.update(currentTime);

三、控制动画的方法

1、start 和 stop

Tween.startTween.stop分别用于控制tween动画的开始和结束。
对于已经结束和没有开始的动画,Tween.stop方法不起作用。Tween.start方法同样接收一个时间参数。如果你使用了该参数,tween动画将在延时该时间数后才开始动画。否则它将立刻开始动画。

2、update

可以通过TWEEN.update()方法来执行动画的更新。

3、chain

如果你想制作多个多行,例如:一个动画在另一个动画结束后开始。可以通过chain方法来使实现。如下的代码,tweenBtweenA之后开始动画:

tweenA.chain(tweenB);

可以像下面这样制作一个无限循环的动画:

tweenA.chain(tweenB);
tweenB.chain(tweenA);

例如我们让示例中的sphere来回移动就可以这样做

var tweenSphere = new TWEEN.Tween(scene.getObjectByName('cube').position);
tweenSphere.to({x:400}, 2000);
// tweenCube.easing(TWEEN.Easing.Elastic.InOut);
tweenSphere.start();
tweenSphere.onUpdate(function () {
    console.log("x: "+this.x);
});

var tweenSphereBack = new TWEEN.Tween(scene.getObjectByName('cube').position);
tweenSphereBack.to({x:-400}, 2000);
tweenSphere.chain(tweenSphereBack);
tweenSphereBack.chain(tweenSphere);

效果图
这里写图片描述

4、repeat

如果你想制作循环动画可以使用chain来实现,但是更好的方法是使用repeat方法。它接收一个用于描述你想循环多少次的参数:

tween.repeat(10); // 重复10次后结束
tween.repeat(Infinity); // 一直循环
5、yoyo

这个函数只在你使用repeat方法是起作用。当它被激活时,tween 的效果类似yoyo效果。该效果是动画会在开始或结束处向反方向反弹。

tween.yoyo(true);
6、delay

delay方法用于控制动画之间的延时。

tween.delay(1000);
tween.start();

四、全局方法

以下的方法定义在 TWEEN的全局对象中,其中大多数方法你都用不上,除了update方法:

TWEEN.update(time)

该方法用于所有被激活的tweens,如果time没有被指定,将使用当前时间。

TWEEN.getAll 和 TWEEN.removeAll

这两个方法用于胡获取被激活的tweens数组的一个引用,或从数组中删除所有tweens

TWEEN.add(tween) 和 TWEEN.remove(tween)

用于向被激活的tweens中添加一个tween,或移除一个tween。

以上方法通常只是在内部使用,一般情况下你了解即可。

可用的easing函数:TWEEN.Easing(过渡效果)
tween.js提供了一些可用的easing函数。可用函数有:Linear, Quadratic, Cubic, Quartic, Quintic, Sinusoidal, Exponential, Circular, Elastic, Back 和 Bounceeasing 类型分为:In, Out 和 InOut.
效果请查询:http://sole.github.io/tween.js/examples/03_graphs.html 地址

五、使用自定义的Easing函数

你不但可以使用tween.js提供的easing函数,还可以自定义easing函数。但必须遵守下面的规则:

  • 它必须接收一个参数。
  • 它必须基于输入参数返回一个值。

easing函数仅在每个tween每次被更新时调用,而不管有多少属性被改变。结果随后会被用于初始值:

easedElapsed = easing(k);
for each property:
newPropertyValue = initialPropertyValue + propertyDelta * easedElapsed;

下面是一个使用Math.floor来做easing效果的例子:

function tenStepEasing(k) {
    return Math.floor(k * 10) / 10;
}

你可以在tween 这样使用它:

tween.easing(tenStepEasing);

六、回调函数

另外一个有用的特性是你可以在每次tween循环周期的指定时间点调用自定义的函数。

例如:假设你想使一些不能直接修改参数的对象执行动画,要访问该对象的参数只能通过setter方法,你可以通过update方法的回调函数来设置新的setter值。

var trickyObjTween = new TWEEN.Tween({
    propertyA: trickyObj.getPropertyA(),
    propertyB: trickyObj.getPropertyB()
})
    .to({ propertyA: 100, propertyB: 200 })
    .onUpdate(function() {
        this.setA( this.propertyA );
        this.setB( this.propertyB );
    });

或者如果你想确认tween动画开始后某个对象指定状态下的某个值,你可以通过start回调来获取它:

var tween = new TWEEN.Tween(obj)
    .to({ x: 100 })
    .onStart(function() {
        this.x = 0;
    });
onStart

tween开始动画前的回调函数。

onStop

tween结束动画后的回调函数。

onUpdate

在tween每次被更新后执行。

onComplete

在tween动画全部结束后执行。

更多关于tween的资料请参考:https://github.com/sole/tween.js/blob/master/docs/user_guide.md

tween的相关资料:http://www.createjs.cc/tweenjs/

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值