请解释这个 TweenJS 代码

Question

我是 CreateJS 的新手，我使用过这个示例代码，但不太了解它，因为没有逐个代码解释。代码如下：

createjs.Tween.get(circle, { loop: true })
  .to({ x: 400 }, 1000, createjs.Ease.getPowInOut(4))
  .to({ alpha: 0, y: 175 }, 500, createjs.Ease.getPowInOut(2))
  .to({ alpha: 0, y: 225 }, 100)
  .to({ alpha: 1, y: 200 }, 500, createjs.Ease.getPowInOut(2))
  .to({ x: 100 }, 800, createjs.Ease.getPowInOut(2));

谁能一步步为我解释一下please.Step。

此致。

Answer 1

为 circle 对象创建补间。它将循环执行指令：

createjs.Tween.get(circle, { loop: true })

Tween 调用是 "chained"，因此通过附加方法，它将按顺序运行它们。从技术上讲，每个方法只是 returns 对补间的引用，因此您可以按顺序调用一堆。代码中的换行符使其更具可读性，但基本上是：

tween.to(values).to(values).to(values);

第一个补间在 1000 毫秒的动画中将圆的 x 位置设置为 400px。它具有自定义值的便利性。查看 TweenJS Ease class 了解更多信息。

.to({ x: 400 }, 1000, createjs.Ease.getPowInOut(4))

在第一个动画之后，它会设置 alpha 和 y 值超过 500 毫秒，轻松程度略有不同。

.to({ alpha: 0, y: 175 }, 500, createjs.Ease.getPowInOut(2))

剩下的应该说得通了。

.to({ alpha: 0, y: 225 }, 100)
.to({ alpha: 1, y: 200 }, 500, createjs.Ease.getPowInOut(2))
.to({ x: 100 }, 800, createjs.Ease.getPowInOut(2));

您还可以在 Tween 上链接其他方法，例如 call() 调用函数，或 set 更改未被补间的 tween 目标上的其他属性。

仅供参考，这与更传统的东西相同：

var tween = createjs.Tween.get(circle, { loop: true });
tween.to({ x: 400 }, 1000, createjs.Ease.getPowInOut(4));
tween.to({ alpha: 0, y: 175 }, 500, createjs.Ease.getPowInOut(2));
tween.to({ alpha: 0, y: 225 }, 100);
tween.to({ alpha: 1, y: 200 }, 500, createjs.Ease.getPowInOut(2));
tween.to({ x: 100 }, 800, createjs.Ease.getPowInOut(2));

干杯。

请解释这个 TweenJS 代码

Please explain this TweenJS code

createjs

tweenjs