1

在这个例子中，预期的结果是让圆先淡出然后淡入。这适用于链接。片段中的注释行

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>

4

3 回答 3

0

正如文档中所述，这确实是一个问题：

多个补间可以指向同一个实例，但是如果它们影响相同的属性，则可能会出现意外行为。要停止对象上的所有补间，请使用 removeTweens 或在 props 参数中传递 override:true。

通过覆盖意味着所有之前的补间都将被杀死——这有点违背时间线的目的。正如我所解释的，我正在为多个选项处理一长串补间。我例外 - 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 循环创建完整的补间。之后，我只是将其添加到时间轴中。

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

于 2016-03-20T14:44:09.500 回答
0

您遇到的问题是由于使用 TweenJS 补间的属性是确定性的。这意味着您可以跳转到补间中的任何点，这将是您所期望的。如果您制作多个补间来管理单个属性，则两者都不是确定性的。

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

于 2016-03-18T16:59:32.243 回答
0

您正在使用的操作是异步的，因此您必须在第一次调用 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 方法的参数传递.

于 2016-03-18T10:57:13.133 回答