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

使用 tweenlite 被动补间属性

passively tween a property with tweenlite

javascript

gsap

使用 tweenlite 被动补间 属性

passively tween a property with tweenlite

javascript

gsap

使用 tweenlite 被动补间属性