Pure JavaScript animation easing - Stack Overflow

admin管理员组

文章数量:1201362

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>

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>

• javascript
• animation
• easing

Share Improve this question Follow asked Jul 21, 2016 at 7:31 akinuriakinuri 12k1010 gold badges7474 silver badges107107 bronze badges 2

• Please check javascript.info/tutorial/animation on the generic animation function. – Taufik Nurrohman Commented Jul 21, 2016 at 8:15
• @TaufikNurrohman That is one of the first pages I've checked. Seems too complicated for me. Nina's answer is much more comprehensible. – akinuri Commented Jul 21, 2016 at 8:33

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 20

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>

<canvas id='canvas' width=600 height=400></canvas>

<script>
  var ctx = document.getElementById('canvas').getContext('2d');
  var divx = 500;
  var divtx = 0;

  function animate() {
    divx += (divtx - divx) / 20;
    ctx.clearRect(0, 0, 600, 400);
    ctx.fillRect(divx, 0, 100, 100);
    window.requestAnimationFrame(animate);
  }
  animate();
</script>

本文标签： Pure JavaScript animation easingStack Overflow