用Tweenlite被动地补间属性

Question

我希望能够被动地补间对象上的属性，以便在补间期间可以更新该对象，并且TweenLite会继续进行。

例如，以下代码将在15秒内将对象中的坐标从0过渡到15 。 在发生这种情况的同时，我还想更新target.position的x和y变量，因为TweenLite似乎“ hog”了对象直到完成（例如，直到经过15秒），所以我无法执行此操作。

// target.position starts at { x:0, y: 0 }
TweenLite.to(target.position, 15, {
    x: 15,
    y: 15,
    ease: Power4.easeOut
})

// for examples sake i'd like to do the following, yet it does not have an effect
setTimeout(function(){ target.position.x += 10 }, 1000)
setTimeout(function(){ target.position.y += 15 }, 2500)
setTimeout(function(){ target.position.x -= 17 }, 7500)

Answer 1

我通过使用Tahir Ahmed建议的ModifiersPlugin解决了我的问题。

ModifiersPlugin在回调中为您提供两个值，它是当前值和补间的运行总计，我将其命名为cX和rT 。 回调中返回的内容将在下一次调用中由TweenLite使用，并再次作为rT给出。 这很方便，因此我可以让ModifiersPlugin照顾它自己的运行总计，补间到x和y但实际上不更新target.position ..非常有用。

我要做的就是算出需要的更改，因此，将其称为dX并将其添加到目标位置的增量，可以被动地对变量进行补间！

我的代码现在看起来像这样：

// just some dummy example data
target.position.x = 200
target.position.y = 300

x = 300
y = 400

TweenLite.to({ x: target.position.x, y: target.position.y }, 0.3, {
    x: x,
    y: y,
    ease: Power4.easeOut,
    modifiers: {
        x: function(cX, rT) {

            // get delta (current change in) value from running total - current
            const dX = cX - rT.x
            target.position.x += dX

            // update running total with current delta
            rT.x += dX
            return rT.x
        },
        y: function(cY, rT) {
            const dY = cY - rT.y
            target.position.y += dY
            rT.y += dY
            return rT.y
        }
    }
})