CODEWITHSUNDEEP
javascripthtmlanimationcanvaseasing
Raiden
Raiden

Reputation: 411

Easing animations in Canvas

Trying to create a function that lets you animate any number of numerical properties with a given easing function, but it doesn't quite work... calling it doesn't result in any motion. Everything is set up correctly as when I change what the values change to, it does show, so that means it's the equation that's the problem here. It's either not giving the right value, or not getting the right ones.

function animate(obj, props, options) {
  var start = Date.now(),
    total = start + options.duration,
    diff = total - start,
    vals = {},
    id;
  for (var v in props) {
    vals[v] = props[v];
  }
  (function update() {
    var curr = Date.now(),
      progress = Math.min((options.duration - (total - curr)) / options.duration, 1);
    for (var p in props) {
      console.log(obj[p] = options.equation(curr, vals[p], obj[p] - vals[p], total));
    }
    if (progress < 1) {
      id = requestAnimationFrame(update);
    } else {
      id = cancelAnimationFrame(id);
      if (typeof options.callback === 'function') {
        options.callback();
      }
    }
  }());
}

animate(rect, {
  x: map.width / 2,
  y: map.height / 2
}, {
  duration: 2000,
  equation: function(t, b, c, d) {
    return c * (t /= d) * t + b;
  },
  callback: function() {
    console.log('Whoa... it works.'); // ...yeah, nope. ;(
  }
});

t = time, b = beginning value, c = change in value, d = duration.

Am I giving it the wrong arguments? How would I make this work?

Upvotes: 1

Views: 785

Answers (1)

markE
markE

Reputation: 105015

Your time & duration arguments should not be summed with Date.now().

If you want your easing to take 2000ms then send 2000 (d) into the easing equation.

The time to send into the easing equation is the elapsed time, so send Date.now()-startTime (t) into the easing equation.

I assume you have properly set the beginning value (b) and net change in value (c).

Upvotes: 2

Related Questions