ActionScript Easing Functions
Unlike most other easing equations or functions, my easing functions are 0 to 1 based (like the “Math.random” function). This makes it easier to isolate the concept of “easing” from the concept of “tweening”. Tweening is responsible for creating a series of equidistant values between an initial state and a final state. Easing is responsible for shifting those values so they are no longer equally spaced.
There are times when you may want to weight a single random value to favor one number over another. For example, you may want a random number between 0 and 100 but you would prefer a number closer to 0 than to 100. In this situation, there is no need for a “tween” as you are only generating one number and there is nothing to go be”tween”. This is where easing functions which have been isolated from their tweening counterparts can come in handy.
Here are my most frequently used easing functions:
function easeIn (r, p, f){
if(p == undefined) p = 2;
if(typeof f != "function")f = Math.pow;
return f(r, p);
}
function easeOut (r, p, f){
return 1-easeIn(1-r, p, f);
}
function easeInOut (r, p, f){
if(r<.5)return easeIn(r*2, p, f)/2;
return .5+easeOut((r-.5)*2, p, f)/2;
}
function easeOutIn (r, p, f){
if(r<.5)return easeOut(r*2, p, f)/2;
return .5+easeIn((r-.5)*2, p, f)/2;
}
//
function ezSine (r, p){
r = 1-Math.cos(r*Math.PI/2);
if(p>1) return easeIn(r, --p, ezSine);
return r;
}
function ezExpo (r, p) {
if(r==0 || r==1) return r;
if(p<1)p = 1;
return Math.pow(p, 10*(r-1));
}
function ezCirc (r, p) {
r = -(Math.sqrt(1-r*r)-1);
if(p>1) return easeIn(r, --p, ezCirc);
return r;
}
//
It’s important to note that the above easing functions expect initial values between 0 and 1 and will also return values between 0 and 1. If you would like to ease between values other than 0 and 1, you will need to scale and shift the values just like you would when working with the “Math.random” function. For example, to get a random number between 0 and 100 we would use code like this:
var randNum = Math.random()*100;
//
To get a random number between 0 and 100 that’s probably closer to 0 we would use ActionScript like this:
var randNum = easeIn(Math.random())*100;
//
To get a random number between 0 and 100 that’s probably closer to 100 we would use ActionScript like this:
var randNum = easeOut(Math.random())*100;
//
To get a random number between 0 and 100 that’s probably closer to 50 we would use ActionScript like this:
var randNum = easeOutIn(Math.random())*100;
//
That seems pretty straight-forward. The next step is to control the amount of easing applied. The “strength” or “power” of the easing is controlled by a second argument in the easing equations. For example, to get a random number between 0 and 100 that has a really good chance of being close to 50, you could use code similar to the following:
var randNum = easeOutIn(Math.random(), 4)*100;
//
The “4” in the code above is the “power” or “strength” argument. Higher numbers increase the easing effect.
The default easing function is acceptable for most circumstances, but occasionally you need a special easing function like sinusoidal or exponential easing. If this is the case, you can provide a third argument to the easing functions which specifies a custom easing equation. The following code provides an example:
var randNum = easeOutIn(Math.random(), 1, ezSine)*100;
//
You can achieve some fairly complex results by implementing the simple concepts above. To illustrate this fact I’ve included the SWF below as an easing visualization tool. The initial un-eased value is within the dotted line at the top middle while the eased values are within the red and blue boxes. The dotted lines move at the same constant rate while the red and blue lines follow their eased values.
The core of the code in the above SWF looks something like this:
for (var i=0; i<=100; i++){
var ratio = i/100;
var x = xEaseType(ratio, xEaseStrength, xEaseModifier) * gridSize;
var y = yEaseType(ratio, yEaseStrength, yEaseModifier) * gridSize;
Grid.PurpleCurve.lineTo(x, y);
}
//
Let me know if you have any questions, comments or suggestions.
Comments(6)
RSS Feeds
Thank you for sharing these functions! That easing visualization tool is very impressive! Great work.
I have created a rectangle with rounded corners by using the actionscript 2.0 api. Is there anyway that I can use the easeout function you made to make it shrink to half its size?
Hey good work there.
I really like the idea of the X / Y Strength values. I think the lack of them is one of the biggest flaws of the regular easing equations. (Maybe now the challenge will be the wrap them up so that they can be used with regular tweens…)
Thank you for sharing. !
wow! what a great site!!! with articles, scripts. already in my favourites 🙂 keep up the good work!
Glad you like them Ari and thanks for taking the time to say so.
Nice site by the way, slick and sleek.
Really handy functions. Thanks!