tweenlite가있는 속성을 수동으로 트위스트

Question

트위닝하는 동안이 객체를 업데이트하고 TweenLite가 계속 수행 할 수 있도록 수동으로 트위닝 할 수 있어야합니다.

예를 들어, 다음 코드는 0에서 15까지 개체의 좌표를 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) 

Answer 1

나는 Tahir Ahmed가 추천 한 ModifiersPlugin을 사용하여 나의 질문을 해결했다.

ModifiersPlugin은 콜백에서 두 값을 제공합니다. 현재 값과 트위닝의 누적 합계입니다.이 값은 cX과 rT입니다. 다음 호출에서 TweenLite가 콜백에서 반환 할 내용을 반환하고 rT으로 다시 지정합니다. 이것은 유용하기 때문에 ModifiersPlugin이 자신의 실행중인 total, tween을 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 
     } 
    } 
})