tween用户使用指南

Posted 2020-08-30 往逝之因

tween.js user guide

tween.js用户指南

 

1.What is a tween? How do they work? Why do you want to use them?

一、什么是tween?它如何工作？为何你需要使用它？

tween允许你以缓和的方式改变一个对象属性的值。你只要告诉它要改变什么属性，停止改变时属性的终值该是什么，以及这一变化要经历多少时间，然后tweening的引擎就会从变化开始到变化结束关注该属性当前值。例如，假设你有一个有x和y坐标的位置对象：

var position = { x:100, y:0 }

如果你想把x值从100变到200，你只要：

// 首先为这一position对象创建一个tween
var tween =newTWEEN.Tween(position);

// 告诉tween我们想把x属性在1000毫秒内改变
tween.to({ x:200 }, 1000);

事实上这并不会做任何事情，这个tween虽然被创建了，但未被激活，你需要启动它：

tween.start();

最后，为了尽可能地让运动平缓，你应该在动画的同一个主循环内使用TWEEN.update。通常这看起来像：

animate();

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

这会让引擎关注每一帧激活的position;在一秒后（也就是1000毫秒，tween变量建立时传入的参数），position.x会变成200。

如果你想看到position的数值变化的话，你可以使用onUpdate函数把x打印到控制台：

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

这个函数会在每一次tween更新时被调用；它发生多少次取决于许多因素——比如你的计算机的运行速度和工作状态等…

现在我们只是把属性值打印到控制台，但如果你把Tween用于其它场景，比如用来改变一个three.js对象的位置：

var tween =newTWEEN.Tween(cube.position)
        .to({ x:100, y:100, z:100 }, 10000)
        .start();

animate();

functionanimate() {
    requestAnimationFrame(animate);
    TWEEN.update();

threeRenderer.render(scene, camera);
}

这种情况下，因为three.js的渲染器会在渲染前读取对象的位置，因此你就没必要清楚的调用一个onUpdate函数啦！！
可能你已经在上面的代码里发现了不一样的内容：链式调用！！因为每个tween的方法返回了tween实例本身，因此你可以把下述代码：

var tween =newTWEEN.Tween(position);
tween.to({ x:200 }, 1000);
tween.start();

写成

var tween =newTWEEN.Tween(position)
    .to({ x:200 }, 1000)
    .start();

你会在提供的例子中看到许多链式调用tween方法的地方，因此有必要先去熟悉它。看看04-simplest这个例子吧！

 

2.Animating with tween.js

二、使用tween.js来生成动画！！

tween.js是不会自动工作的，因此必须要调用update方法。推荐的作法是把它放进动画函数的主循环内，最好是使用requestAnimationFrame来获得最好的图形渲染效果。看起来像这样：

animate();

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

如果update没有传入参数，它会使用当前时间来计算从上次运行到现在过了多久，也就是会立即调用。

而如果你给update传入了参数，例如：

TWEEN.update(100);

这意味着 "update with time = 100 milliseconds"。你可以使用这个来确保你代码中所有基于时间的函数总是使用相同的时间值。比如你有一个player并且想同步地运行tween的话，你的animate代码可能会看起来像：

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

可以查看github中的test.js来了解如何给TWEEN.update()传入不同的值来模仿经过的时间。

 

3.Controlling a tween

三、控制一个tween的动画

strat and stop

我们已经知道Tween.start是启动一个tween，除此之外还有许多其他用来控制一个tween的方法。可能其中最重要的一个就是与start详解tween.js 中文使用指南

tween.js的动画效果

关于Tween的chain方法由于浅拷贝出现不能启用一个tween的bug

关于Tween的chain方法由于浅拷贝出现不能启用一个tween的bug

关于Tween的chain方法由于浅拷贝出现不能启用一个tween的bug

使用TweenMax的简单Tween动画