0

我有一个通过补间慢慢缩小的栏。我想要两个按钮来控制这个栏的方向，这样如果我点击“向上”，栏会开始爬回原来的形状，“向下”会导致它再次开始收缩。

var bar1Command = bar1.graphics.drawRect(75, 130, 10, 130).command;
var tween1 = createjs.Tween.get(bar1Command, { loop: false, paused: false }).to({ h: 0, y: 260 }, 10000);
var tween2 = createjs.Tween.get(bar1Command, { loop: false, paused: true }).to({h: 130, y: 130}, 10000);

function up() {
  tween1.setPaused(true);
  tween2.setPaused(false);
}

function down() {
  tween1.setPaused(false);
  tween2.setPaused(true);
}

https://jsfiddle.net/rgg8p9k6/

我不确定一个补间是否有可能影响另一个对象留下的状态，因为当我点击“向上”时，栏会跳到它的原始位置。

谢谢您的帮助！

4

1 回答 1

1

您可以通过使用override:true选项 increatejs.Tween.get()停止现有补间并将其替换为另一个来做到这一点。

另请注意，由于到终点的距离会根据它们何时改变方向而变化，因此您需要相应地调整新补间的持续时间，以保持速度恒定：

var duration = 10000;

function up() {
  duration = 10000 * ((130 - bar1Command.h) / 130);
  tween1 = createjs.Tween.get(bar1Command, { loop: false, override:true }).to({ h: 130, y: 130 }, duration);
}

function down() {
  duration = 10000 * (bar1Command.h / 130);
  tween1 = createjs.Tween.get(bar1Command, { loop: false, override:true }).to({ h: 0, y: 260 }, duration);
}

工作示例：https ://jsfiddle.net/pc4rjnLg/1/

于 2017-01-23T01:24:48.723 回答