HTML5 / js - how to animate straight line between two coordinates?

Question

Simple enough question (could be wrong)

im looking to animate between two points in a straight line, using HTML5 and/or Jquery.

ctx.beginPath();
ctx.mov         


        

Answer 1

Give this a try, not sure if it is what you are after, can explain anything you are not sure of:

var frame = function () { // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
        return window.requestAnimationFrame  ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          window.oRequestAnimationFrame      ||
          window.msRequestAnimationFrame     ||
          function (callback) {
            window.setTimeout(function () {
              callback(+new Date())
            }, 10)
          }
      }()

var canvas = $("#canvas")[0];
var ctx = canvas.getContext("2d");

var easeing = {bouncePast: function (pos) {  //just a sample to show easing
                if (pos < (1 / 2.75)) {
                  return (7.5625 * pos * pos);
                } else if (pos < (2 / 2.75)) {
                  return 2 - (7.5625 * (pos -= (1.5 / 2.75)) * pos + .75);
                } else if (pos < (2.5 / 2.75)) {
                  return 2 - (7.5625 * (pos -= (2.25 / 2.75)) * pos + .9375);
                } else {
                  return 2 - (7.5625 * (pos -= (2.625 / 2.75)) * pos + .984375);
                }
              } }

function animate(x1,y1,x2,y2, duration, ease) {  //your main animation loop
    var start = +new Date();
    frame(run);
    function run(t) {
        var delta =t - start;
        var pos = delta/duration;
        if (delta <= duration) {
             draw(x1,y1,x2,y2, ease, pos)
             frame(run)
        }
    }   
}

function draw(x1,y1,x2,y2,ease, pos) {  //does the drawing
    var easepos= ease(pos)
    canvas.width = canvas.width;
    ctx.strokeStyle = "black";
    ctx.moveTo(x1, y1);
    ctx.lineTo(x1 + (x2 - x1) * easepos, y1+ (y2- y1) * easepos);
    ctx.stroke();            
}

animate(10,10,150,100, 2000, easeing.bouncePast)

http://jsfiddle.net/fqtGb/2/ -> demo

-- Andy