javascript - 使用 tweenlite 被动补间属性

Question

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

例如，以下代码将在 15 秒内将对象中的坐标从 0 调整到 15。发生这种情况时，我还想更新 target.position 的 x 和 y 变量，但我无法执行此操作，因为 TweenLite 似乎“占用”对象直到完成(例如，直到 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

我通过使用 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
        }
    }
})