在此示例中，预期结果是使圆圈淡出然后淡入。这与链接一起工作正常。代码片段中的注释行
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/