gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 05:11:33 25 4
gpt4 key购买 nike

我有一个通过补间慢慢缩小的栏。我想要有两个按钮来控制该栏的方向,这样,如果我点击“向上”,栏将开始爬回其原始形式,而“向下”将使其再次开始缩小。

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/

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

感谢您的帮助!

最佳答案

您可以通过使用 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);
}

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

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

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com