Print

[BenJeremy]

QUOTE (geniusalz @ Jan 8 2004, 05:54 AM)

Easing as in accelerating/decelerating tweens (a la Macromedia Flash) Its a neat effect.

Ahh... so as I go between 0.0 and 1.0, the number would change as it approached either end? OK, I'll think about that one.

[BenJeremy]

Does anybody have a handy function to take a time period value between 0.0 and 1.0 and return an "eased" tween value such as this graph displays:

[geniusalz]

Well, Flash does only one of easing in or out, (lets you specify which one, and the amount of easing)
But both can also work together

[BenJeremy]

Now, can somebody give me the quicky formulas for each of these?

I could probably work it out myself, but that might take some time... what I'm looking for is a simple C function I can call like so:

float CalculateEasedTween( float fValue, int iStyle ) // Where 0=neither (returns fValue), 1=Ease In, 2=Ease Out and 3=Ease both


Any takers?

[BenJeremy]

Oh... and when I get some more "tweening" sources (such as periodic timers), I can do some much nicer scrolling text fields.

[crobar]

QUOTE

yspeed = .2; yfriction = .1; ygravity = .8; yweight = .10; ythrust = 1.4; ygoal = 130; xgoal = 23; yspeed = yspeed*yfriction+(ygoal-_y)*ygravity*yweight*ythrust; _y += yspeed; yspeed = yspeed*yfriction+(xgoal-_x)*ygravity*yweight*ythrust; _x += yspeed;

[BenJeremy]

QUOTE (crobar @ Jan 8 2004, 01:19 PM)

i have some tweening scripts i worked on in flash...im not sure if you could use those or not... QUOTE yspeed = .2; yfriction = .1; ygravity = .8; yweight = .10; ythrust = 1.4; ygoal = 130; xgoal = 23; yspeed = yspeed*yfriction+(ygoal-_y)*ygravity*yweight*ythrust; _y += yspeed; yspeed = yspeed*yfriction+(xgoal-_x)*ygravity*yweight*ythrust; _x += yspeed;

I appreciate it... but that's awfully complicated (as if the underlying stuff isn't alreayd complicated   ).

I'm just looking for a function that takes a value form 0.0 to 1.0 and spits outa value from 0.0 to 1.0, with the "ease" factor built in. Nothing specific really required on the "ease factor" - any arbitrary value should do there.

[BenJeremy]

Phew... hopefully, work on the eye candy will be mostly done by tomorrow night, and I can get the UI hammered out (swing by the Actionscripting forum to check out the white papers on the other two things I'll complete for the next public release as part of the FileManager enhancements)

[geniusalz]

CODE

float CalculateEasedTween( float fValue, int iStyle ) {  if(iStyle == 0)    return fValue;  else if(iStyle == 1)    return pow(fValue, 2);  else if(iStyle == 2)    return 1 - (pow (1 - fValue, 2));  else if(iStyle == 3)    if(fValue<0.5)      return 2 * pow(fValue,2);    else      return 1 - (2 * pow(1 - fValue, 2));  else    return 0; }

They do plot right, tell me if they work right as well

[BenJeremy]

Cool. When I get home tonight I'll give it all a shot.

[BenJeremy]

Tweener modifier options:

<Modifier Type="Tweener">
<Prev>SomeZPoint</Prev>
<Next>SomeOtherZPoint</Next>
<NextColor>0x00000000</NextColor> (Fade into black oblivion?)
<PrevColor>0xFFFFFFFFF</PrevColor> (Fade into burning whiteness?)
<Source>MenuScroll</Source>
<Period>1000</Period> (This will be the same as setting MenuScroll in <Periods> of skin)
<Ease>both</Ease>
</Modifier>

Of course, the comments would not be in your skin file....

Options for "Ease":

None (Default)

In

Out

Both

Options for "Source":

MenuScroll
 Attached to menu up/down

Periodic
 Moves between source and Next ZPoint set on cyclical period 0 -> 1

ReversePeriodic
 Moves between Next and source ZPoint set on cyclical period 1 -> 0

CylonEye
 Moves back and forth between Next and source ZPoint set on cyclical period 0 -> 1 -> 0 -> 1 and so forth.

One interesting idea I had was to create a simulation of the NYC Times Square "Zipper" - having the newsfeed zip around a corner of a building....

[geniusalz]

CODE

float CalculateEasedTween( float fValue, int iStyle, float fFactor ) {  float fFactor2 = fFactor * 3 + 1;    if(iStyle == 0)    return fValue;  else if(iStyle == 1)    return pow(fValue, fFactor2);  else if(iStyle == 2)    return 1 - (pow (1 - fValue, fFactor2));  else if(iStyle == 3)  {    float fMultiplier = 0.5 / pow(0.5, fFactor2);    if(fValue<0.5)      return fMultiplier * pow(fValue, fFactor2);    else      return 1 - (fMultiplier * pow(1 - fValue, fFactor2));  }  else    return 0; }

[geniusalz]

Little test:



EDIT: The styles actually are 0,1,2,3 but I don't feel like changing it

And the other function was the equivalent of a 0.33 factor

[geniusalz]

QUOTE (BenJeremy @ Jan 8 2004, 06:27 PM)

CylonEye  Moves back and forth between Next and source ZPoint set on cyclical period 0 -> 1 -> 0 -> 1 and so forth.

, couldn't you just call it cycle or something?

[BenJeremy]

QUOTE (geniusalz @ Jan 8 2004, 06:07 PM)

QUOTE (BenJeremy @ Jan 8 2004, 06:27 PM) CylonEye   Moves back and forth between Next and source ZPoint set on cyclical period 0 -> 1 -> 0 -> 1 and so forth. , couldn't you just call it cycle or something?

By your command!    I'll change it to K.I.T.T.




I'll add the ease factor when I get home. Just got off my conference call, but I need to wait for some files to be e-mailed here at work (I'll be at another location in the morning)