Ajax Layer JavaScript DHTML

  1. Home
  2. JavaScript DHTML
  3. Ajax Layer
  4. Bezier Path Animation
http://dynapi.sourceforge.net/
GNU LESSER GENERAL PUBLIC LICENSE
Version 2.1, February 1999


DynAPI Examples - Bezier Path Animation


dynapi.library.setPath('./dynapisrc/');
dynapi.library.include('dynapi.api');
dynapi.library.include('dynapi.debug');
dynapi.library.include('dynapi.fx.Thread');
dynapi.library.include('dynapi.fx.Bezier');


var path;
var dots = [];
var cps = [];
function drawBezier() {
  clearPage();
  var controlPoints = eval(document.b.cp.value);
  var steps = parseInt(document.b.steps.value);
  // the path includes starting and ending points
  // results in total of steps+1 points along path
  path = Bezier(controlPoints, steps);
  for (var i=0;i    var x = controlPoints[i*2];
    var y = controlPoints[i*2+1];
    var color = 'red';
    if (i==0 || i==controlPoints.length/2-1) color = 'yellow'
    if (!cps[i]) cps[i] = dynapi.document.addChild(new DynLayer('',x-2,y-2,5,5,color));
    else {
      cps[i].setLocation(x-2,y-2);
      cps[i].setBgColor(color);
    }
    cps[i].setVisible(true);
  }
  for (var i=0;i    var x = path[i*2];
    var y = path[i*2+1];
    if (!dots[i]) dots[i] = dynapi.document.addChild(new DynLayer('',x,y,2,2,'black'));
    else {
      dots[i].setLocation(x-2,y-2);
    }
    dots[i].setVisible(true);
  }
}
var playblock = dynapi.document.addChild(new DynLayer('',0,0,15,15,'red'));
playblock.setVisible(false);
var pathanim = new Thread(playblock);
pathanim.loop = true;
function startAnim() {
  if (path) {
    playblock.setVisible(true);
    var speed = parseInt(document.b.speed.value);
    pathanim.sleep(speed);
    pathanim.play(path);
  }
}
function stopAnim() {
  playblock.setVisible(false);
  pathanim.stop();
}
function clearPage() {
  for (var i=0;i    var c = dynapi.document.children[i];
    if (c!=playblock) c.setVisible(false);
  }
}
function setCP(cp) {
  document.b.cp.value = cp;
  drawBezier();
  startAnim();
}
var t="drawBezier();\nstartAnim();\nthis.watch('playblock.getX()');\n"
+"this.watch('playblock.getY()');\n"
+"this.switchMode('watch');";
dynapi.debug.setEvaluate(t);




Control Points: 
try these 





Steps: 

Speed: ms












           
       
dynapi.zip( 791 k)