RATIO-nal Easing

[pixelwit]

I've been tinkering with Robert Penner's easing equations and here's what I came up with so far...


This:

PHP Code:

Math.easeIn = function(r, expo){
    return Math.pow(r, expo);
};
Math.easeOut = function(r, expo){
    return 1-Math.easeIn(1-r, expo);
};
Math.easeInOut = function(r, expo){
    if(r<.5)return Math.easeIn(r*2, expo)/2;
     return .5+Math.easeOut((r-.5)*2, expo)/2;
}; 


Replaces this:

PHP Code:

Math.linearTween = function (t, b, c, d) {
    return c*t/d + b;
};
Math.easeInQuad = function (t, b, c, d) {
    return c*(t/=d)*t + b;
};
Math.easeOutQuad = function (t, b, c, d) {
    return -c *(t/=d)*(t-2) + b;
};
Math.easeInOutQuad = function (t, b, c, d) {
    if ((t/=d/2) < 1) return c/2*t*t + b;
    return -c/2 * ((--t)*(t-2) - 1) + b;
};
Math.easeInCubic = function (t, b, c, d) {
    return c*(t/=d)*t*t + b;
};
Math.easeOutCubic = function (t, b, c, d) {
    return c*((t=t/d-1)*t*t + 1) + b;
};
Math.easeInOutCubic = function (t, b, c, d) {
    if ((t/=d/2) < 1) return c/2*t*t*t + b;
    return c/2*((t-=2)*t*t + 2) + b;
};
Math.easeInQuart = function (t, b, c, d) {
    return c*(t/=d)*t*t*t + b;
};
Math.easeOutQuart = function (t, b, c, d) {
    return -c * ((t=t/d-1)*t*t*t - 1) + b;
};
Math.easeInOutQuart = function (t, b, c, d) {
    if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
    return -c/2 * ((t-=2)*t*t*t - 2) + b;
};
Math.easeInQuint = function (t, b, c, d) {
    return c*(t/=d)*t*t*t*t + b;
};
Math.easeOutQuint = function (t, b, c, d) {
    return c*((t=t/d-1)*t*t*t*t + 1) + b;
};
Math.easeInOutQuint = function (t, b, c, d) {
    if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
    return c/2*((t-=2)*t*t*t*t + 2) + b;
}; 


Using Robert Penner's Easing Equations

Robert Penner's equations accept 4 arguments:
t = time
b = beginning value
c = change in value
d = duration

Let's suppose we'd like to tween a clip across the stage. Our clip currently has an _x of 50 and we want it to move across the stage and stop at an _x of 500 within the time span of 10 seconds.

From this scenario we can easily produce the following variables:
startX = 50;
endX = 500;
duration = 10;

To make R.Penner's equations work we need to supply our variables like so:
t = ?
b = 50; // startX;
c = 450; // endX-startX;
d = 10; // duration;

As you can see "t" hasn't been determined yet. That's because "t" is dependant upon the amount of time to have passed since the tween was started. The "t" argument represents a number from 0 to "duration" (10) which will always be changing and essentially driving the clip across the stage to its goal position.

Okay, so our clip is supposed to take 10 seconds to move across the stage, where will the clip be 3 seconds after we start a linear tween?

The linear easing function looks like this:

Math.linear = function(t, b, c, d){
return b+t/d*c;
}

The linear easing function is called like this:

Clip._x = Math.linear(3, 50, 450, 10);

Which would translate to:

Clip._x = 50+3/10*450

Which would make Clip._x equal 185.

Now that you (hopefully) have a grasp of how to use R.Penner's easing equations, let's compare using his to using mine.



Comparing Easing Equations

PHP Code:

// R. Penner equation
Math.easeInQuad = function (t, b, c, d) {
    return c*(t/=d)*t + b;
};
// PiXELWiT equation
Math.easeIn = function(r, expo){
    return this.pow(r, expo);
};
//
//
var startX = 50;
var endX = 500;
var duration = 10;
var elapsedTime = 3;
//
// Penner Quadratic Easing
clip._x = Math.easeInQuad(elapsedTime, startX, endX-startX, duration);
// PiXELWiT Quadratic Easing
clip._x = startX+Math.easeIn(elapsedTime/duration, 2)*(endX-startX);
//                                                 ^
// The "2" argument sets the easing type to "quadratic" 


As you can see my technique doesn't require any more input or effort than the Penner technique, in fact if you're not familiar with the Penner approach you might find my way a little easier. Consider the following. When tweening a clip the only variable that changes is the "ratio" of completion, that is to say, the amount of your tween which has already taken place compared to the amount of your tween which is still remaining. In the above examples the tween took place during the third out of ten seconds. That's three tenths or 3/10 or .3 or 30% and that relationship can be described as a ~RATIO~. The ~RATIO~ of completion is the only thing that really changes during a tween, all other variables (startX, endX, duration) stay the same. For tweening purposes, our ratio will be a number from 0 to 1. A ratio of 0 would mean you're still at your initial value (50 in the previous example), a ratio of 1 would mean you're at your final destination (500 in the previous example) and a ratio of .5 would mean you're at a point half way between your start and end values (275 in the previous example).

When you're "EASING" (notice I didn't say tweening but said "EASING")... When you're easing between two values, you feed the easing equation a series of evenly spaced numbers and it returns a series of warped (unevenly spaced) numbers. Keeping your input values between 0 and 1 assures your output will always be a number between 0 and 1. This increases standardization and furthers abstraction since the function is less intimately entwined with its application (startX, endX, duration are no longer integral to the easing equation). Accepting and returning numbers within the same range has some other benefits which we'll discuss later.

PHP Code:

//
// copy and paste the following code into a new FLA document and test
//
// Penner tween
Math.linear = function(t, b, c, d){
    return b+t/d*c;
}
// PiXELWiT tween
Math.easeIn = function(r, expo){
    return this.pow(r, expo);
};
// How to make dots
function makeDot(name, depth, color, x, y){
    var dot = this.createEmptyMovieClip(name, depth);
    with(dot){
        lineStyle(20, color);
        lineTo(.5, 0);
        _y = y;
     }
    return dot;
}
// Make some dots to tween
red = makeDot("Dot1", 10, 0xFF0000, 50, 50);
orange = makeDot("Dot2", 20, 0xFF8000, 200, 150);
blue = makeDot("Dot3", 30, 0x0000FF, 50, 250);
green = makeDot("Dot4", 40, 0x00FF00, 200, 350);
// Tween the dots
onEnterFrame = function(){
    i++;
    if(i>=100)delete onEnterFrame;
    // Penner way
    red._x = Math.linear(i, 50, 450, 100);
    orange._x = Math.linear(i, 200, 300, 100);
    // PiXELWiT way
    // To see actual "easing" simply change the 1 in the line below to a 2 
    var ez = Math.easeIn(i/100, 1);
    blue._x = 50+ez*450;
    green._x = 200+ez*300;
} 


Abstraction makes it easier to apply the same easing to different clips. In the above code the "easeIn" function is only called once but is applied to both the blue and green clips.

                         E Q U I V A L E N C E

                 __Penner______        ______PiXELWiT__

   Math.linearTween(3, 0, 1, 10)   =      Math.easeIn(.3, 1)    >Linear = 1

    Math.easeInQuad(3, 0, 1, 10)   =      Math.easeIn(.3, 2)    \
   Math.easeOutQuad(3, 0, 1, 10)   =     Math.easeOut(.3, 2)     Quadratic = 2
 Math.easeInOutQuad(3, 0, 1, 10)   =   Math.easeInOut(.3, 2)    /

   Math.easeInCubic(3, 0, 1, 10)   =      Math.easeIn(.3, 3)    \
  Math.easeOutCubic(3, 0, 1, 10)   =     Math.easeOut(.3, 3)     Cubic = 3 
Math.easeInOutCubic(3, 0, 1, 10)   =   Math.easeInOut(.3, 3)    / 

   Math.easeInQuart(3, 0, 1, 10)   =      Math.easeIn(.3, 4)    \
  Math.easeOutQuart(3, 0, 1, 10)   =     Math.easeOut(.3, 4)     Quartic = 4
Math.easeInOutQuart(3, 0, 1, 10)   =   Math.easeInOut(.3, 4)    /

   Math.easeInQuint(3, 0, 1, 10)   =      Math.easeIn(.3, 5)    \
  Math.easeOutQuint(3, 0, 1, 10)   =     Math.easeOut(.3, 5)     Quintic = 5
Math.easeInOutQuint(3, 0, 1, 10)   =   Math.easeInOut(.3, 5)    /

      *function not yet written*   =      Math.easeIn(.3, 6)    >Sentic? and beyond...

Standardization helps reduce 13 functions to 3 and allows those 3 functions to do much more.



Earlier I mentioned that there are benefits to functions which accept and return numbers within the same range (i.e. a ratio from 0 to 1). If you look at the following code you'll notice I've modified one of my standard easing equation to use recursion as a way to "amplify" the easing results.

PHP Code:

// standard version
function easeOutSin(ratio){
    return Math.sin(ratio*Math.PI/2);
};
// Amplified version
function easeOutSin(ratio, amplifier){
    ratio = Math.sin(ratio*Math.PI/2);
    return amplifier>1 ? easeOutSin(ratio, --amplifier) : ratio;
};
for(var i=0; i<1; i+=.1){
    trace(easeOutSin(i, 1));
    trace(easeOutSin(i, 2));
    trace("");
} 


If you're on your toes you might notice that the "easeOutSin" function's arguments are similar to the previously discussed (easeIn, easeOut, easeInOut) function's arguments in that they all accept a ratio followed by a whole number and increasing that whole number significantly increases the easing effect. Pretty handy huh? Yay for standards.

While this doesn't cover every one of Robert Penner's easing equations it does cover some of the most popular ones. If you have any further comments please feel free to add them.

-PiXELWiT
http://www.pixelwit.com

[Timmee_3Styler]

GREAT JOB

[thaumaturgy]

Color me impressed. Good stuff, PiXeLWiT.

[oldnewbie]

Like he said!

Couldn't resist!

Now if Pixelwit could only address all the latest threads on his plageFlip bit, guess everybody would have a happy weekend!

[thaumaturgy]

Originally posted by oldnewbie
Like he said!

Couldn't resist!

Now if Pixelwit could only address all the latest threads on his plageFlip bit, guess everybody would have a happy weekend! [/B]

[tg]

*picks up blo-horn*
STEP AWAY FROM THE KEYBOARD AND COME OUTSIDE WITH YOUR HANDS ABOVE YOUR HEAD.

pixelwit, obviously you've been staring into your monitor for way to long... get out and get some fresh air.


btw. nice.

[boyzdynasty]

wow. How long did it take you to figure that out?

very impressive.

[pixelwit]

I've updated the code a little bit to facilitate the addition of a wider variety of easing equations. Exponential, sinusoidal and circular are included as examples.

PHP Code:

Math.easeIn = function(r, p, f){
    if(p == undefined) p = 2;
    if(f == undefined)f = Math.pow;
    return f(r, p);
};
Math.easeOut = function(r, p, f){
    return 1-Math.easeIn(1-r, p, f);
};
Math.easeInOut = function(r, p, f){
    if(r<.5)return Math.easeIn(r*2, p, f)/2;
    return .5+Math.easeOut((r-.5)*2, p, f)/2;
};///////////////////////////////////
Math.ezExpo = function (r, p) {
    if(r==0 || r==1) return r;
    if(p<2)p = 2;
    return Math.pow(p, 10*(r-1));
};
Math.ezCirc = function (r, p) {
    r = -(Math.sqrt(1-r*r)-1);
    return p>1 ? Math.easeIn(r, --p, Math.ezCirc) : r;
};
Math.ezSine = function (r, p){
    r = 1-Math.cos(r*Math.PI/2);
    return p>1 ? Math.easeIn(r, --p, Math.ezSine) : r;
};
//
//
// Usage
//////////////////////////////////////////////////////////////////////////
function test(){
    for(var i=0; i<11; i++){
        trace("_______"+i/10+"_________________");
        trace("Quad = "+Math.easeInOut(i/10));
        trace("Cubi = "+Math.easeInOut(i/10, 3));
        trace("Sin1 = "+Math.easeInOut(i/10, 1, Math.ezSine));
        trace("Sin2 = "+Math.easeInOut(i/10, 2, Math.ezSine));
        trace("Exp2 = "+Math.easeInOut(i/10, 2, Math.ezExpo));
        trace("Exp3 = "+Math.easeInOut(i/10, 3, Math.ezExpo));
        trace("Cir1 = "+Math.easeInOut(i/10, 1, Math.ezCirc));
        trace("Cir2 = "+Math.easeInOut(i/10, 2, Math.ezCirc));
    }
}
test(); 


The only required argument is "r" which is the completion Ratio.

The second argument "p" should be a whole number greater than 0. Numbers greater than 1 increase the easing effect.

The third argument "f" should be a reference to an easing Function.

-PiXELWiT
http://www.pixelwit.com

[thaumaturgy]

Dope.

[pixelwit]

I discovered you can ease in and out using 2 different types of easing techniques at the same time. Typical easing in and out produces a "symmetrical" pattern, equally slow toward the ends and equally fast toward the middle. However this new approach lets you do a slow ease-in with a fast ease-out and the other way around. That might not be real easy to visualize so I provided some code for clarification. Just copy and paste it into a new file and run it to see what's going on.

PHP Code:

//
// Easing Functions
Math.easeIn = function(r, p, f){
    if(p == undefined) p = 2;
    if(f == undefined)f = Math.pow;
    return f(r, p);
};
Math.easeOut = function(r, p, f){
    return 1-Math.easeIn(1-r, p, f);
};
Math.easeInOut = function(r, p, f){
    if(r<.5)return Math.easeIn(r*2, p, f)/2;
    return .5+Math.easeOut((r-.5)*2, p, f)/2;
};//////////////
Math.ezExpo = function (r, p) {
    if(r==0 || r==1) return r;
    if(p<2)p = 2;
    return Math.pow(p, 10*(r-1));
};
Math.ezCirc = function (r, p) {
    r = -(Math.sqrt(1-r*r)-1);
    if(p>1) return Math.easeIn(r, --p, Math.ezCirc);
    return r;
};
Math.ezSine = function (r, p){
    r = 1-Math.cos(r*Math.PI/2);
    if(p>1) return Math.easeIn(r, --p, Math.ezSine);
    return r;
};/////////////////////////////////////////////////////
//
// Variables
var frames = 100;
var startX = 70;
var endX = 535;
var changeX = endX-startX;
//
// Create Text Fields
for(var i=0; i<8; i++){
    createTextField("TF"+i, i+1, 4, 8+i*50, 65, 50);
    this["TF"+i].multiline = true;
}
TF0.text = "InOutSine1";
TF1.text = "InSine1\rOutSine1";
TF2.text = "OutSine1\rInSine1";
TF3.text = "InSine2\rOutSine1";
TF4.text = "InSine1\rOutSine2";
TF5.text = "InSine1\rOutExpo2";
TF6.text = "InExpo2\rOutSine3";
TF7.text = "InCube3\rOutQuad2";
//
// Create Diamonds
for(var i=0; i<8; i++){
    var dot = createEmptyMovieClip("Dot"+i, i+10);
    with(dot){
        beginFill(0, 50);
        moveTo(0, -20);
        lineTo(5, 0);
        lineTo(0, 20);
        lineTo(-5, 0);
        endFill();
        _x = startX;
        _y = 25+i*50;
    }
}
//
// Duplicate And Move All Diamonds
var Depth = 20;
onMouseDown = function(){
    for(var i=20; i<20+depth; i++){
        this["Dot"+i].removeMovieClip();
    }
    frame = 0;
    depth = 20;
    onEnterFrame = function(){
        var ratio = frame/frames;
        // 1 InOutSine1
        var dot = Dot0.duplicateMovieClip("Dot"+depth, depth++);
        dot._x = startX + Math.easeInOut(ratio, 1, Math.ezSine)*changeX;
        // 2 InSine1  OutSine1
        var dot = Dot1.duplicateMovieClip("Dot"+depth, depth++);
        var r = Math.easeIn(ratio, 1, Math.ezSine);
        dot._x = startX + Math.easeOut(r, 1, Math.ezSine)*changeX;
        // 3 OutSine1  InSine1
        var dot = Dot2.duplicateMovieClip("Dot"+depth, depth++);
        var r = Math.easeOut(ratio, 1, Math.ezSine);
        dot._x = startX + Math.easeIn(r, 1, Math.ezSine)*changeX;
        // 4 InSine2   OutSine1
        var dot = Dot3.duplicateMovieClip("Dot"+depth, depth++);
        var r = Math.easeIn(ratio, 2, Math.ezSine);
        dot._x = startX + Math.easeOut(r, 1, Math.ezSine)*changeX;
        // 5 InSine1   OutSine2
        var dot = Dot4.duplicateMovieClip("Dot"+depth, depth++);
        var r = Math.easeIn(ratio, 1, Math.ezSine);
        dot._x = startX + Math.easeOut(r, 2, Math.ezSine)*changeX;
        // 6 InSine1   OutExpo2
        var dot = Dot5.duplicateMovieClip("Dot"+depth, depth++);
        var r = Math.easeIn(ratio, 1, Math.ezSine);
        dot._x = startX + Math.easeOut(r, 2, Math.ezExpo)*changeX;
        // 7 InExpo2  OutSine3
        var dot = Dot6.duplicateMovieClip("Dot"+depth, depth++);
        var r = Math.easeIn(ratio, 2, Math.ezExpo);
        dot._x = startX + Math.easeOut(r, 3, Math.ezSine)*changeX;
        // 8 InCube3    OutQuad2
        var dot = Dot7.duplicateMovieClip("Dot"+depth, depth++);
        var r = Math.easeIn(ratio, 3);
        dot._x = startX + Math.easeOut(r)*changeX;
        if(frame == frames)delete onEnterFrame;
        frame++;
    }
}
onMouseDown(); 


-PiXELWiT
http://www.pixelwit.com