详解tween.js的使用教程

前面的话

TweenJS提供了一个简单但强大的渐变界面。它支持渐变的数字对象属性&CSS样式属性，并允许链接补间动画和行动结合起来，创造出复杂的序列。本文将详细介绍tween.js的使用

 概述

tween.js允许以平滑的方式修改元素的属性值。只需要告诉tween想修改什么值，以及动画结束时它的最终值是什么，动画花费多少时间等信息，tween引擎就可以计算从开始动画点到结束动画点之间值，来产生平滑的动画效果

例如，假设有一个对象position，它的坐标为 x 和 y：

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

如果想改变 x 的值从100到200，只需要这样做：

// Create a tween for position firstvar tween = new TWEEN.Tween(position); // Then tell the tween we want to animate the x property over 1000 millisecondstween.to({ x: 200 }, 1000);

到这里只是创建了tween对象，需要激活它，让它开始动画：

// And set it to starttween.start();

最后为了平滑动画效果，需要在同一个循环动画中调用TWEEN.update方法。代码如下：

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

这个动作将会更新所有被激活的tweens，在1秒钟（例如1000ms）position.x 将变为200。

也可以使用onUpdate回调函数将结果打印到控制台上

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

这个函数在每次tweens被更新时都被调用。它的出现频次依赖于很多因素。例如：依赖于你的电脑或设备的运行速度

开始动画

Tween.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);

控制动画

【start和stop】

Tween.start和Tween.stop分别用于控制tween动画的开始和结束

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