tweenliteのプロパティを受動的にtween

Question

私はオブジェクトのプロパティを受動的にトゥイーンできるようにしたいので、トゥウィーンの間にこのオブジェクトを更新してTweenLiteを実行します。

たとえば、次のコードでは、オブジェクト内の座標を0から15に15秒間トゥーンします。これが起こっている間に、私はと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) 

Answer 1

Tahir Ahmedがお勧めするModifiersPluginを使用して私の質問を解決しました。

ModifiersPluginはコールバックに2つの値を与えます。現在の値とトゥイーンの実行中の合計値は、cXとrTです。コールバックで返されるものは、次の呼び出しでTweenLiteによって使用され、rTとして再度与えられます。これは便利なので、ModifiersPluginを自分自身のトータルトゥーンであるxとyに見せてもらうことができます。まだ実際にはtarget.positionを更新していません。

私が行うことは、変更が必要なので、私はdXと呼ばれるデルタをターゲット位置に追加し、変数を受動的にトゥイーンすることは可能です！

私のコードは、現在、このようなものになります。あなたは、最新の** ModifiersPlugin **ちょうど最近リリースされた（** [リンク]（https://greensock.com/1-19になっているはずです

// 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 
     } 
    } 
})