gpt4 book ai didi

javascript - CreateJS:TweenJS 时间线补间多次更改属性而无需链接

转载 作者:行者123 更新时间:2023-11-28 06:14:39 27 4
gpt4 key购买 nike

在此示例中,预期结果是使圆圈淡出然后淡入。这与链接一起工作正常。代码片段中的注释行

createjs.Tween.get(circle).wait(0).to({alpha:0.1},2000).wait(2000).to({alpha:1},2000)

如果我将它们分成对同一对象的 2 个单独的调用,则它不起作用。回调不是一种选择,因为在淡入和淡出圆圈之间可能存在其他子元素的补间。

Tweenjs 似乎覆盖了所有其他先前的属性更改,只保留最后一个。对此有何建议?

<!DOCTYPE html>
<html>
<head>
<title>TweenJS: Canvas Tweening Example</title>

<script type="text/javascript" src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>

<script id="editable">
function init() {
stage = new createjs.Stage("canvas1");
var timeline=new createjs.Timeline();

var circle = new createjs.Shape();
circle.graphics.beginFill("#FF0000").drawCircle(50, 50, 50);
stage.addChild(circle);

timeline.addTween(
//circle should fadeTo 0.1 then back to 1
//createjs.Tween.get(circle).wait(0).to({alpha:0.1},2000).wait(2000).to({alpha:1},2000) //works
createjs.Tween.get(circle).wait(0).to({alpha:0.1},2000), //this tween is ignore
createjs.Tween.get(circle).wait(2000).to({alpha:1},2000) //only this tween fires
)


timeline.setPaused(false);

createjs.Ticker.setFPS(20);
createjs.Ticker.addEventListener("tick", stage);
}
</script>
</head>

<body onload="init();">
<canvas id="canvas1" width="960" height="350"></canvas>
</body>
</html>

最佳答案

您使用的操作是异步的,因此您必须在第一次调用 tween 后使用“call”方法继续执行,如下所示:

createjs.Tween.get(circle, false, null, false).wait(100).to({alpha:0},2000).call(function() {
createjs.Tween.get(circle, false, null, false).wait(1000).to({alpha:1},2000);
});

您还可以传入对命名函数的引用,例如

createjs.Tween.get(circle, false, null, false).wait(100).to({alpha:0},2000).call(function_name);

因此,您可以通过一个包含需要执行的所有操作的数组,以及一个一次提取数组中的元素并执行它们的函数,并将其自身作为参数传递来模拟递归函数的链接。 .call方法。

关于javascript - CreateJS:TweenJS 时间线补间多次更改属性而无需链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36082174/

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