0 Replies - 2340 Views - Last Post: 23 March 2014 - 11:58 AM

#1 Blindman67   User is offline

  • D.I.C Addict
  • member icon

Reputation: 140
  • View blog
  • Posts: 620
  • Joined: 15-March 14

Ease in out. Simple function for animations. Example.

Posted 23 March 2014 - 11:58 AM

Hi all.

I thought I would share some handy little Math utilities to help with your projects.

The first one I will present is based on the Sigmoid curve and is very handy for all sorts of applications. It is better known as ease in and ease out.

If you are wanting to transition from one effect to another you want it to start slowly, pick up speed and then slow down and eventually stop. CSS animations use it all the time but it is nice to have it in code as well.

So to the function.
function easeInOut(x,p){
    var xx = Math.pow(x,p);
    return (xx/(xx+Math.pow((1-x),p);

That's it. Simple and fast.
x is in a range from 0 <= x <= 1
p is the power and can be any number except 0. It controls the rate of change or the rate at which to ease in and out.
p = 1 creates a linear change over time.
p > 1 ease in slowly and ease out slowly. The greater P the slower it eases in and out. p=2 is what the CSS ease is I believe.
0 < p < 1 starts fast then slows to the half way point and then speeds up to the end.
Negative p reverses the function
Attached Image
Graph of function with x left to right, the return on the y axis, shown different values of p.
Attached Image
The function.
So how to use this function.
Say you want to scroll from one part of the page to the next using this function.
var offsetStart = window.pageYOffset;  // current location.
var offsetEnd = 512;                   // new location
var timeToMove = 2;                    // time in seconds to make the move. This can be a constant. As I use setTimeout instead of setInterval the actual time to do the transition may be out by a few micro seconds. use setInterval if you need more accurate timing. 
var animationInterval = 16;            // time in micro seconds. this can be a constant 
var transitionprogress = 0;
function autoScrollPage(){
    transitionprogress += 1/((timeToMove*1000)/animationInterval); // I always use a constant here. timeToMove could also be in micro seconds.
    if(transitionprogress >= 1){
        transitionprogress  = 1;
        setTimeout(autoScrollPage,animationInterval); // set up the next callback if we have not reached the end
    var y = easeInOut(transitionprogress,2);  // in this case we use 2 can be any value except 0
    // y is in the range 0-1 inclusive so we need to convert it to the scale we need.
    y = (offsetEnd -offsetStart) *y) +offsetStart; // get the differance between start and end multiply by y and then add the start to give the new screen location.
    y = Math.Round(y); // make it a whole number as most browsers prefer an integer
    window.scrollTo(0, y);  // set the window page offset and your done.

// call this function to start
function startSmoothScroll(destination){
    offsetStart = window.pageYOffset; // get current scoll pos
    transitionprogress = 0;           // reset the progress
    setTimeout(autoScrollPage,animationInterval);  // start the animation

This code is just an example of how to use it. it can be used in many ways. I sometime use it in gradients for fill styles to give a better looking gradient. It adds a very nice natural feel to animations, transitions, counters, your imagination is the only limit.

A modification on this function is the ease to bounce. This creates a cartoon like bounce at the end, or if reversed that step back then rush forward cartoon style motion.
The power is set to 2 for this one as it does not adapt to the constraints of being at 0 for x = 0 and not at 1 for x = 1 without the power being two.
function EaseInOutBounce(x) {

So I hope some of you have found this useful. Please let me know and I will continue to provide a series of helpful math functions for you applications.

Is This A Good Question/Topic? 0
  • +

Page 1 of 1