一个元素上的多个补间
Multiple Tweens on One Element
我有一个通过补间慢慢缩小的栏。我想要有两个按钮来控制这个条的方向,这样如果我点击 'Up' 条就会开始回升到它原来的形式并且 'Down' 会导致它再次开始收缩。
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/
我不确定一个补间是否有可能影响对象被另一个补间留下的状态,因为当我点击 'Up' 时,栏会跳转到它的原始位置。
感谢您的帮助!
您可以使用 createjs.Tween.get()
中的 override:true
选项来停止现有的补间动画并将其替换为另一个补间动画。
另请注意,由于到终点的距离根据它们改变方向的时间而变化,因此您需要相应地调整新补间的持续时间,以保持速度恒定:
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);
}
我有一个通过补间慢慢缩小的栏。我想要有两个按钮来控制这个条的方向,这样如果我点击 'Up' 条就会开始回升到它原来的形式并且 'Down' 会导致它再次开始收缩。
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/
我不确定一个补间是否有可能影响对象被另一个补间留下的状态,因为当我点击 'Up' 时,栏会跳转到它的原始位置。
感谢您的帮助!
您可以使用 createjs.Tween.get()
中的 override:true
选项来停止现有的补间动画并将其替换为另一个补间动画。
另请注意,由于到终点的距离根据它们改变方向的时间而变化,因此您需要相应地调整新补间的持续时间,以保持速度恒定:
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);
}