Question

我正在尝试按照一系列步骤创建一个应按顺序插入某些值的补间。

由于某些原因，似乎所有中间步骤都丢失了，实际上只使用了最后一步。例如，给出以下代码：

var tween = new TWEEN.Tween(start).to(X, 10000).to(Y, 5000);
tween.start();

我希望看到对象start的值在十秒内转到X中的值，然后在此步骤完成后，达到值{5}中的Y：总持续时间为15秒。我所看到的是在5秒内转到Y的值，就像从未调用.to(X, 10000)一样。

我已阅读链.to调用的代码，因此它似乎应该有效（例如this问题）并且文档中的第一个example似乎暗示了这种用法

我正在使用的实际代码从表示中间步骤的对象数组构建Tween。所以代码更多的是：

var tween = new TWEEN.Tween(steps[0]);
for (var i=1; i < steps.length; i++)
{
    tween.to(steps[i], timings[i]);
}
tween.onUpdate(callback)
tween.start();

上面的代码是正确的还是我犯了一些愚蠢的错误？我注意到有chain方法，我应该使用它而不是为每个步骤创建不同的补间吗？

MWE：

<html>
    <head>
        <script src="tween.min.js"></script>
    </head>
    <body>

        <script>
            var start = {x:0};
            var tween = new TWEEN.Tween(start);
            tween.to({x: 10}, 10000);
            tween.to({x: -100}, 10000);
            tween.onUpdate(function () {
                console.log("called");
                start.x = this.x;
            });

            tween.start();

            function check() {
                requestAnimationFrame(check);

                TWEEN.update();
                console.log("start.x = " + start.x);
            }

            check();
        </script>
    </body>
</html>

注意输出如何：

"start.x = 0.0"
"start.x = -0.24"
"start.x = -0.5599999999999999"
"start.x = -0.6799999999999999"
"start.x = -0.7000000000000001"
   ....
"start.x = -100.0"

虽然我希望它类似于：

"start.x = 0.0"
"start.x = 0.33"
    ...
"start.x = 10.0"
"start.x = 9.81"
   ...
"start.x = 0.0"
"start.x = -0.24"
"start.x = -0.5599999999999999"
"start.x = -0.6799999999999999"
"start.x = -0.7000000000000001"
   ....
"start.x = -100.0"

Answer 1

你可以这样做来链接补间

var tweenA = new TWEEN.Tween({x:0})
.tween.to({x: 10}, 10000);
.start();

var tweenB = new TWEEN.Tween({x: 10})
.tween.to({x: -100}, 10000);

tweenA.chain(tweenB);

如何正确链接补间？

1 个答案: