ThrowPropsPlugin future x?

[Henry]

Hello everybody

 

I'm testing the ThrowPropsPlugin. It works like a charm so far.

 

However, I I've come a case where I would like to know my final properties in advance.

 

Is there a chance to retrive the end values of x,y, or rotation onstart of a tween?

(Or will this cause a temporal paradox that crashes the universe?)

 

 

Greetings

 

 

Henry

[GreenSock]

Absolutely - there are two ways:

1. Just create your tween as you normally would and then temporarily render it at its end state like:
   

   var tween = ThrowPropsPlugin.to(element, 1, {...});
   tween.time( tween.duration() ); //push it to the end
   var endX = element._gsTransform.x; //super-secret place we store transform values for css elements
   tween.time(0); //push it back to the beginning so that it plays like normal

   
   

2. Use the built-in ThrowPropsPlugin.calculateChange() method that allows you to feed in a velocity, ease, and duration and then it'll spit back the end value. Like:
   

   var endX = currentX + ThrowPropsPlugin.calculateChange(100, Strong.easeOut, 2); //if the initial velocity is 100, the ease is Strong.easeOut, and the duration is 2 seconds, this will tell you the amount of change. 

   
   

Luckily neither of these will cause the universe to implode (but let me know if I'm wrong about that - sometimes I miss a bug in there and I definitely want to fix any that cause the universe to implode).

[Henry]

Hello Greensock

 

Thanks a lot for your replay.

 

Perhaps I should not play around with this time-paradox-thing on doomsday (12/21/12) but I was too curious...

 

I've tried both ways and it works - a bit. The second one seems to work for simple ThrowProps even without a fixed time like this:

 

// --
var xVelocity = ... // some calculatetd value
var dispObject ... // some object, EaselJS DisplayObject in my case
var myTween = ThrowPropsPlugin.to(dispObject, {throwProps:{x:xVelocity}, ease:Sine.easeOut});
var endX = dispObj.x + ThrowPropsPlugin.calculateChange(xVelocity, Sine.easeOut, myTween.duration() );
// --

 

However my code has a few more parameters and looks like that:

 

// --
var myTween = ThrowPropsPlugin.to(dispObj,{ throwProps: { x:{velocity:xVelocity, min:0, max:640, resistance:120} }, ease:Sine.easeOut },5,0.2,0.4);
// --

 

I have no idea how to put all of them into account. Therefore your first example looks like the better choice. But a couldn't access your "super-secret place" element._gsTransform.x;

 

What is "element" ? The element I'm tweening? Wherever I try to get _gsTransform.x from - it causes an undefined error.

 

Perhaps _gsTransform.x is too super-secret?

 

 

Greetings

 

Henry

[Henry]

.... hang on - it is much easier!

 

// --
var dispObj = // any object
var myTween = ThrowPropsPlugin.to(dispObj, ... //what ever you tween

myTween.time( myTween.duration() ); // make a time jump to the future
var endX = dispObj.x; // ask your object where it is
myTween.time(0) // go back in time
// --

 

This perfectly works.

 

Okay I see - you where joking with you "super-secret place" - wheren't you?

 

 

Have an animated Christmas and a tweening New Year!

 

Henry

[GreenSock]

Glad you figured it out. I actually wasn't kidding about the super-secret place comment - it's just that I [wrongly] assumed you were tweening a DOM element, like a <div>. We store transform-related values on DOM elements in that way (_gsTransform.x or whatever). Since you're using an EaselJS object, that makes it simpler and you figured out exactly how to do it. Kudos.

[Henry]

Hallo Greensock

 

Thanks for the insider information about the _gsTransform object. For a moment I thought it was a joke because the solution was so obvious... Consider this topic as closed.

 

 

Have a nice Christmas!

 

 

Henry