TweenJs在vuejs中的使用

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

一．TweenJs的基本用法：
1.载入 TweenJs 库（如：）
2.启用 requestAnimationFrame;
3.配置并开始动画;

二．使用说明
2.1以下的列子将以vue项目作为举例，引入的方式以本地方式为例。在 methods 中增加一个动画监听方法，并在 mounted 中初始化监听。

2.2通过2.1已将TweenJs初始化到我们的项目中，接下来我们将实现一个简单的动画。

<

2.3 通过运行2.2 里的代码（这里省略样式的布局），便可以看到了一个往复运动的动画。

三．接下来我们说一说补间动画的控制
start 和 stop

到目前为止，我们已经了解了Tween.start方法，但是还有更多的方法来控制单个补间。 也许最重要的一个是 star 对应的方法：停止 。 如果你想取消一个补间，只要调用这个方法通过一个单独的补间:

tween.stop();
停止一个从未开始或已经停止的补间没有任何效果。

start 方法接受一个参数 time。如果你使用它，那么补间不会立即开始，直到特定时刻，否则会尽快启动（i.e 即在下次调用 TWEEN.update）。

update

补间也有一个更新的方法—这实际上是由 TWEEN.update 调用的。 你通常不需要直接调用它，除非你是个 疯狂的hacker。

chain

当你顺序排列不同的补间时，事情会变得有趣，例如在上一个补间结束的时候立即启动另外一个补间。我们称这为链式补间，这使用 chain 方法去做。因此，为了使 tweenB 在 tewwnA 启动：
tweenA.chain(tweenB)

或者，对于一个无限的链式，设置tweenA一旦tweenB完成就开始：
tweenA.chain(tweenB)
tweenB.chain(tweenA)

在其他情况下，您可能需要将多个补间链接到另一个补间，以使它们（链接的补间）同时开始动画：

tweenA.chain(tweenB,tweenC)
tweenA.chain(tweenB,tweenC)
警告：调用 tweenA.chain（tweenB） 实际上修改了tweenA，所以tweenA总是在tweenA完成时启动。 chain 的返回值只是tweenA，不是一个新的tween。

repeat

如果你想让一个补间永远重复，你可以链接到自己，但更好的方法是使用 repeat 方法。 它接受一个参数，描述第一个补间完成后需要多少次重复

tween.repeat(10); // 循环10次
tween.repeat(Infinity); // 无限循环