javascript - 一个元素上有多个补间

我有一个通过补间缓慢缩小的栏。我想有两个按钮来控制该条的方向，因此，如果我按下“向上”，该条将开始爬回其原始形状，而“向下”将使其再次开始收缩。

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/

我不确定一个补间是否有可能影响对象被另一个补间保留的状态，因为当我按下“上”时，小节会跳到其原始位置。

谢谢您的帮助！

最佳答案

您可以通过使用override:true中的createjs.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/

关于javascript - 一个元素上有多个补间，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41797375/