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.<\/p>\n
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.<\/p>\n
Here are my most frequently used easing functions:<\/p>\n
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:<\/p>\n
To get a random number between 0 and 100 that’s probably closer to 0<\/strong> we would use ActionScript like this:<\/p>\n To get a random number between 0 and 100 that’s probably closer to 100<\/strong> we would use ActionScript like this:<\/p>\n To get a random number between 0 and 100 that’s probably closer to 50<\/strong> we would use ActionScript like this:<\/p>\n 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:<\/p>\n The “4” in the code above is the “power” or “strength” argument. Higher numbers increase the easing effect.<\/p>\n 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:<\/p>\n 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.
\nvar<\/span> randNum = easeIn(<\/span>Math<\/span>.random<\/span>(<\/span>)<\/span>)<\/span>*<\/span>100<\/span>;
\n\/\/<\/span><\/div><\/div>\n
\nvar<\/span> randNum = easeOut(<\/span>Math<\/span>.random<\/span>(<\/span>)<\/span>)<\/span>*<\/span>100<\/span>;
\n\/\/<\/span><\/div><\/div>\n
\nvar<\/span> randNum = easeOutIn(<\/span>Math<\/span>.random<\/span>(<\/span>)<\/span>)<\/span>*<\/span>100<\/span>;
\n\/\/<\/span><\/div><\/div>\n
\nvar<\/span> randNum = easeOutIn(<\/span>Math<\/span>.random<\/span>(<\/span>)<\/span>, 4<\/span>)<\/span>*<\/span>100<\/span>;
\n\/\/<\/span><\/div><\/div>\n
\nvar<\/span> randNum = easeOutIn(<\/span>Math<\/span>.random<\/span>(<\/span>)<\/span>, 1<\/span>, ezSine)<\/span>*<\/span>100<\/span>;
\n\/\/<\/span><\/div><\/div>\n
\n
\n\n