Question

62

Pure JavaScript animation easing

rated 0 times [ 68] [ 6] / answers: 1 / hits: 17236 / 8 Years ago, thu, july 21, 2016, 12:00:00

I've been trying to find a pure JavaScript ease implementation for some hours, but couldn't find any. The ones that came close didn't make any sense. All I could find was bunch of easing functions without implementation.

For example, functions like these:

function linear(time, begin, change, duration) {

    return change * time / duration + begin;

}



function easeInQuad(t) {

    return t*t

},



function easeOutQuad(t) {

    return t*(2-t)

},

One of the things that trouble me is where does fps come in to play? It's directly related to the duration. I've seen no mention of it.

How would I implement the above easing functions in the following animation?

JSFiddle

var box = document.getElementById(box);



var fps		= 60;

var duration	= 2; // seconds

var start	= 0; // pixel

var finish	= window.innerWidth - box.clientWidth;

var distance	= finish - start;

var increment	= distance / (duration * fps);



var position = start;



function move() {

  position += increment;

  if (position >= finish) {

    clearInterval(handler);

    box.style.left = finish + px;

    return;

  }

  box.style.left = position + px;

}



var handler = setInterval(move, 1000 / fps);

body {

  background: gainsboro;

}

#box {

  width: 100px;

  height: 100px;

  background: white;

  box-shadow: 1px 1px 1px rgba(0, 0, 0, .2);

  position: absolute;

  left: 0;

}

<div id=box></div>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

micheleb

Add To Favorites

Follow

Total Points: 275

Total Questions: 103

Total Answers: 103

Location: Macau

Member since Sat, Jul 11, 2020

4 Years ago

micheleb questions

1 What is Unexpected token a in JSON at position 0?

Mon, Nov 15, 21, 00:00, 3 Years ago

1 Angular - Pass function as input

Thu, Jan 14, 21, 00:00, 3 Years ago

1 React Link component spans the entire width of the div

Mon, Jul 13, 20, 00:00, 4 Years ago

1 TypeError: value.split is not a function

Sat, May 9, 20, 00:00, 4 Years ago

1 ExpressionChangedAfterItHasBeenCheckedError after updating to Angular 9 on changing parent property from the child when Ivy is enabled

Wed, Feb 12, 20, 00:00, 4 Years ago

View All

answered 8 Years ago jailynbethanies · Accepted Answer

You could use a time variable and increment it for every frame and use the easing functions for the right position with the values you already have.

Easing formulas: http://easings.net/

Description: What is an easing function?

// formula     http://easings.net/

// description https://stackoverflow.com/questions/8316882/what-is-an-easing-function

// x: percent

// t: current time,

// b: beginning value,

// c: change in value,

// d: duration

function easeInOutQuad(x, t, b, c, d) {

    if ((t /= d / 2) < 1) {

        return c / 2 * t * t + b;

    } else {

        return -c / 2 * ((--t) * (t - 2) - 1) + b;

    }

}



function move() {

    //position += increment;

    time += 1 / fps;

    position = easeInOutQuad(time * 100 / duration, time, start, finish, duration);



    if (position >= finish) {

        clearInterval(handler);

        box.style.left = finish + px;

        return;

    }

    box.style.left = position + px;

}



var box = document.getElementById(box),

    fps = 60,

    duration = 2, // seconds

    start = 0, // pixel

    finish = window.innerWidth - box.clientWidth,

    distance = finish - start,

    increment = distance / (duration * fps),

    position = start,

    time = 0,

    handler = setInterval(move, 1000 / fps);

body {

  background: gainsboro;

}

#box {

  width: 100px;

  height: 100px;

  background: white;

  box-shadow: 1px 1px 1px rgba(0, 0, 0, .2);

  position: absolute;

  left: 0;

}

<div id=box></div>