被動補間屬性與tweenlite

我想能夠被動補間我的對象上的屬性，以便在補間期間，我可以更新此對象和TweenLite將繼續。被動補間屬性與tweenlite

例如，以下代碼將在15秒內將對象中的座標從0調到15。在發生這種情況的同時，我還想更新x和y變量target.position，我不能這樣做，因爲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)

來源

2016-07-25 bitten

你應該看看最新的** ** ModifiersPlugin公佈的剛剛（** [鏈接]（https://greensock.com/1-19 -0 /）**）。它可以幫助你修改當前正在運行的補間。 –

有趣的方法謝謝。 – bitten

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

來源

2016-08-11 09:05:40 bitten

被動補間屬性與tweenlite

回答

相關問題