Question

Can Somebody Please give me a solution
I got this library from phrogz.net,
as you can see here (http://phrogz.net/SVG/animation_on_a_curve.html)

function CurveAnimator(from,to,c1,c2){
  this.path = document.createElementNS('http://www.w3.org/2000/svg','path');
  if (!c1) c1 = from;
  if (!c2) c2 = to;
  this.path.setAttribute('d','M'+from.join(',')+'C'+c1.join(',')+' '+c2.join(',')+' '+to.join(','));
  this.updatePath();
  CurveAnimator.lastCreated = this;
}
CurveAnimator.prototype.animate = function(duration,callback,delay){
  var curveAnim = this;
  // TODO: Use requestAnimationFrame if a delay isn't passed
  if (!delay) delay = 1/40;
  clearInterval(curveAnim.animTimer);
  var startTime = new Date;
  curveAnim.animTimer = setInterval(function(){
    var now = new Date;
    var elapsed = (now-startTime)/1000;
    var percent = elapsed/duration;
    if (percent>=1){
      percent = 1;
      clearInterval(curveAnim.animTimer);
    }
    var p1 = curveAnim.pointAt(percent-0.01),
        p2 = curveAnim.pointAt(percent+0.01);
    callback(curveAnim.pointAt(percent),Math.atan2(p2.y-p1.y,p2.x-p1.x)*180/Math.PI);
  },delay*1000);
};
CurveAnimator.prototype.stop = function(){
  clearInterval(this.animTimer);
};
CurveAnimator.prototype.pointAt = function(percent){
  return this.path.getPointAtLength(this.len*percent);
};
CurveAnimator.prototype.updatePath = function(){
  this.len = this.path.getTotalLength();
};
CurveAnimator.prototype.setStart = function(x,y){
  var M = this.path.pathSegList.getItem(0);
  M.x = x; M.y = y;
  this.updatePath();
  return this;
};
CurveAnimator.prototype.setEnd = function(x,y){
  var C = this.path.pathSegList.getItem(1);
  C.x = x; C.y = y;
  this.updatePath();
  return this;
};
CurveAnimator.prototype.setStartDirection = function(x,y){
  var C = this.path.pathSegList.getItem(1);
  C.x1 = x; C.y1 = y;
  this.updatePath();
  return this;
};
CurveAnimator.prototype.setEndDirection = function(x,y){
  var C = this.path.pathSegList.getItem(1);
  C.x2 = x; C.y2 = y;
  this.updatePath();
  return this;
};

And here is how we use it in jQuery:

var ctx = document.querySelector('canvas').getContext('2d');
ctx.fillStyle = 'red';

var curve = new CurveAnimator([50, 300], [350, 300], [445, 39], [1, 106]);

curve.animate(5, function(point, angle) {
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    ctx.fillRect(point.x-10, point.y-10, 20, 20);
});​

its great but the thing is I need more points for the curve, So I thought of giving it a SVG path.
My question is, How can I use this library with my custom svg path?
My svg path is something like this:

<path class="fil0 str0" d="M-13.5003 40.5c0,0 198,-14.0003 332,106 134,120 326,275 387,296 61.0002,20.9999 162.647,49.157 207,110 234,321 367,-579 -89.9119,-451.912 -82.3825,22.9144 -117.088,216.912 -117.088,216.912"/>

I saw something about changing this.path.setAttribute to init and then giving it the svg path but I have no idea how to do this and how to call the function afterwards.

Answer 1

You can replace the constructor so that it accepts your path:

function CurveAnimator(path) {
    this.path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    this.path.setAttribute('d', path);
    this.updatePath();
    CurveAnimator.lastCreated = this;
}

You would call it like this:

var ctx = document.querySelector('canvas').getContext('2d');
ctx.fillStyle = 'red';

var path = "M-13.5003 40.5c0,0 198,-14.0003 332,106 134,120 326,275 387,296 61.0002,20.9999 162.647,49.157 207,110 234,321 367,-579 -89.9119,-451.912 -82.3825,22.9144 -117.088,216.912 -117.088,216.912";
var curve = new CurveAnimator(path);

curve.animate(5, function(point, angle) {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.fillRect(point.x-10, point.y-10, 20, 20);
});​