Question

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

例如，以下代码将在15秒内将对象中的坐标从0补间到15。虽然发生了这种情况，但我还想更新x的{{1}}和y变量，而我不能这样做，因为TweenLite似乎＆＃34; hog＆＃34;对象直到完成为止（直到15秒为止）。

target.position

Answer 1

我使用Tahir Ahmed推荐的ModifiersPlugin解决了我的问题。

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

我所做的只是解决所需的更改，所以delta，我称之为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

1 个答案: