tweenjs
Add new method Tween.startFromCurrentValues
WIP as I havent added an example yet, I will if you are happy with the addition to the API.
What?
New method: Tween.startFromCurrentValues(time?: number)
- Starts the tween but using the current values of the tweened properties, rather than the values the first time start was called
- This calls start but passes
trueto an added second param:overrideStartingValueswhich is passed through to_setupProperties
Why?
We are using tween.js in a game engine where expected behaviour of animations is for them to start from the values held by the sprites when the animation starts. Animations can be run multiple times, and triggered by vast number of events. The animated sprites could have completely different values on subsequent starts than they did the first time start was called.
I believe this was formerly the behaviour of start?
This could be interesting. Let's see how it differs from the current ways to achieve the same. I have had this need multiple times. Gotta go dig up how I handled such cases. I'll post back...
One way to do it is to remember the last time value, and start there: https://github.com/tweenjs/tween.js/issues/181#issuecomment-778783709
The time value itself can also be animated with the .update methods.
But I agree that it wouldn't be as ergonomic. We want to simply set the new destination values, start the tween, and pass it current time values.
Thanks for looking into this @trusktr. Remembering the time value is an interesting technique, but it wouldn't actually solve our problem. The animated properties may be changed between the tweens by factors other than Tween.js.
For example take a dressup game in which the user drags clothes onto a different body parts:
- The user drags a t-shirt and drops it so that the sleeve is just intersecting the torso
- Since the t-shirt sprite intersects its intended target we class this as a successful placement so we use Tween.js to animate the t-shirt into the perfect position on the torso
- The user then decides to drag the t-shirt off the torso but quickly changes their mind and puts it back, but this time they drop it intersecting the opposite side of the torso
- We now want the tween to start from the current values rather than the starting values it held the first time the t-shirt was placed
If existing tests pass and an example is added, let's merge this. I think it will be useful, at least for now (I'm thinking something like a Timeline and Keyframe API would be better longer term, with Tween being literally just a tween, whereas at the moment it has many things in it that basically make it Timeline, Keyframe, and Tween all in one).
Can you make an example @chris-bingham ?
Hi @trusktr, really sorry for the delay on this! I have added an example. I felt the easiest way to demo this was to use a set of buttons, I've styled these in a similar fashion to the rest of the examples.
Hi @trusktr , is this PR still pertinent? As far as I can tell, the requirements have been met, but @chris-bingham is on sabatical, so I am happy to continue this work if you feel it is still useful.
Sorry for the delay. Merged! Thanks for this very useful change!
Are either of you @S-unya @chris-bingham interested in joining the org to help to maintain and expand Tween.js?
@trusktr thanks very much for the offer. In principle I am keen; I will need to discuss it with the team and get back to you if that is ok?
@trusktr, just to keep you informed, development time being provided to help tween.js is still being discussed... everybody seems happy with the idea, but there are some dilligence criteria that need discussing above my head.
@trusktr I have go ahead for members of our team to work on tween.js if you still want us to help.