javascript - passively tween a property with tweenlite -
i'd able passively tween property on object, during tween can update object , tweenlite carry on.
for example, following code tween coordinates in object 0
15
on 15 seconds. whilst happening, want update x
, y
variables of target.position
, , cannot tweenlite seems "hog" object until it's done (as in, until 15 seconds have passed).
// target.position starts @ { x:0, y: 0 } tweenlite.to(target.position, 15, { x: 15, y: 15, ease: power4.easeout }) // examples sake i'd following, yet not have effect settimeout(function(){ target.position.x += 10 }, 1000) settimeout(function(){ target.position.y += 15 }, 2500) settimeout(function(){ target.position.x -= 17 }, 7500)
i solved question using modifiersplugin tahir ahmed recommended.
the modifiersplugin gives 2 values in callback, it's current value , running total of tween, have named cx
, rt
. returned in callback used tweenlite in next call, , given again rt
. handy can let modifiersplugin after it's own running total, tween x
, y
yet not update target.position
.. pretty useful.
all work out change needed, delta, call dx
, add target position, , passively tweening variable possible!
my code looks this:
// 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) { // delta (current change in) value running total - current const dx = cx - rt.x target.position.x += dx // update running total 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 } } })
Comments
Post a Comment