CreateJS:在没有链接的情况下多次更改属性之间的TweenJS时间线
在这个例子中，预期的结果是使圆圈fadeOut，然后是fadeIn。这个用链子可以用。片段中的注释行
createjs.Tween.get(circle).wait(0).to({alpha:0.1},2000).wait(2000).to({alpha:1},2000)如果我在同一个对象上将它们分成两个单独的调用，则不起作用。回调不是一种选择，因为在渐入佳境和逐渐淡出的圆圈之间，可能会有其他孩子发出其他的吐温。
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>
回答 3
Stack Overflow用户
发布于 2016-03-20 14:44:09
正如文件中所述，这确实是一个问题：
多条消息可以指向同一个实例，但是如果它们影响到相同的属性，则可能会出现意想不到的行为。若要停止对象上的所有吐温，请在道具参数中使用removeTweens或pass :true。
传递覆盖意味着所有先前的tweens都会被删除--这有点违背了时间线的目的。正如我解释过的，我正在处理一长串多选项的tweens。我是例外- addTween链的动画自动-这是不会发生的。幸运的是，它可以用一个简单的for循环来修复。
<!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);
circle.anims = [
[0, {
alpha: 0.1
},
2000
],
[0, {
alpha: 1
},
2000
]
]
for (var i in circle.anims) {
var c = createjs.Tween.get(circle)
for (var j in circle.anims) {
var tw = circle.anims[j];
c.wait(tw[0]);
c.to(tw[1], tw[2]);
}
}
timeline.addTween(c)
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>
我只是将目标对象的所有之间的属性作为数组，然后使用for循环创建完整的吐温。之后，我就把它加到时间线上。
再次感谢你的回答。希望这能帮到别人。
Stack Overflow用户
发布于 2016-03-18 10:57:13
您所使用的操作是异步的，因此您必须使用“调用”方法在第一次调用吐温之后继续执行，如下所示：
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方法的一个参数来模拟使用递归函数进行链接。
Stack Overflow用户
发布于 2016-03-18 16:59:32
您所遇到的问题是由于使用TweenJS发布的属性是确定性的。这意味着，你可以跳到任何一点之间，它将是你所期望的。如果您制作了管理单个属性的多条消息，则两者都不能是确定性的。
我建议要么用链子(我知道你说你不想要)，要么用一个链式的“呼叫”来在另一个链接完成时启动一段时间。也许不是你所期望的，但希望能给你一个更好的想法，为什么这不起作用。
https://stackoverflow.com/questions/36082174
复制相似问题
腾讯云开发者
