Question

在这个例子中，预期的结果是使圆圈fadeOut然后fadeIn。这适用于链接。代码段中的注释行

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

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

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

＆＃13;

<!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>

＆＃13;

Answer 1

您正在使用的操作是异步的，因此必须在第一次调用补间后使用方法“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方法。

Answer 2

您遇到的问题是由于使用TweenJS补充的属性具有确定性。这意味着您可以跳转到补间中的任何位置，它将位于您期望的位置。如果您创建多个管理单个属性的补间，则两者都不具有确定性。

我建议使用链接（我知道你说你不想要），或者使用链式“调用”来启动另一个补间。也许不是你所希望的，但希望能让你更好地了解为什么这不起作用。

Answer 3

这确实是一个问题，因为它在文档中说明：

多个补间可以指向同一个实例，但是如果它们有影响相同的属性可能会出现意外行为。停止所有对象上的补间，使用removeTweens或传递override：true 道具争论。

传递覆盖意味着所有以前的补间都将被终止 - 它有点违背了时间轴的目的。正如我解释的那样，我正在使用一长串补间列表来实现多种选择。我除了 - addTween自动链接动画 - 这不会发生。值得庆幸的是，它可以通过一个简单的for循环来修复。

＆＃13;

<!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>

＆＃13;

我只是将目标对象的所有补间属性作为数组提供，然后使用for循环创建完整的补间。之后，我只是将其添加到时间线。

再次感谢您的回答。希望这会帮助其他人。

CreateJS：TweenJS时间轴补间多次更改属性而不进行链接

3 个答案: