0

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

有人可以为我解释一下吗。一步一步。

此致。

4

1 回答 1

1

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

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

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

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

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

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

干杯。

于 2016-08-10T22:03:30.623 回答