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

有人可以帮我解释一下。一步一步。

最诚挚的问候。

Answer 1

为circle对象创建补间。它会遍历说明：

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

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

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更改补间目标上未补间的其他属性。

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

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代码

1 个答案: