Changing target values of Tween in progress

[Rob]

Hey all,

I've have a look in previous threads re: changing target values of a tween in progress.

It seems like it's accepted that you can't.

At least not by some some convenient method like tween.updateValues(x: new_target_x, y: new_target_y)

 

In my example you'll see I have nodes (circles) that move around the screen.

What I want to do is draw a line tween two of the moving nodes.

This is easy right.

 

But I want to tween the line drawing so that instead of instantly drawing completely, I want it to grow from the origin node.

The problem I have here is that the destination node is constantly moving.

 

I'm not 100% but it feels like i'd on every update I'd need to store the progress of the tween that's animating the line drawing from origin -> destination, kill that, then recreate the same tween but with the new destination values starting, setting the the starting progress the progress we stored from the previous tween.

 

This feels like huge waste of resource, tearing down a tween and creating another every frame.

 

Anyone got any suggestions?

 

Thanks for your time.

Rob

See the Pen eNVBKW?editors=101 by raldred (@raldred) on CodePen

[Rodrigo]

Hi Rob,

 

Well the all mighty masters of the top offices have always recommended to not use the updateTo method on plugin values, but you can easily use it on any JS object. Is it possible in your scenario to tween an object value(s) and then using onUpdate to draw the lines?, like that you'll be tweening the same property on the same object and the overwrite manager and GC will take care of the rest. Beats to record, kill, create and update the progress on every update, at least in my opinion.

 

Rodrigo.

[OSUblake]

You can use getters/setters to transform the values. It basically does what Rodrigo suggested, but doesn't require an onUpdate call. So you could tween your x and y values from 0 to 1, which would be the percentage, and then in your setter you would change the actual x and y values to the correct distance.

 

If you're not familiar with using getters/setters, here's two examples where the x value is being rounded.

 

Property based: 

See the Pen pvKLVG by osublake (@osublake) on CodePen

Function based:  

See the Pen ZYRMPe?editors=101 by anon (@anon) on CodePen

[Rob]

Thanks for your input guys.

Appreciate it, I went with a function based approach to setting the values based on the progress of the tween.

Thanks