tweenjs animating line draw - Javascript Canvas

Javascript examples for Canvas:Animation

  1. HOME
  2. Javascript
  3. Canvas
  4. Animation

Description

tweenjs animating line draw

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Animating line draw with tweenjs</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.createjs.com/createjs-2015.11.26.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){/*from   www .  j  a  v a 2 s .c o m*/
createjs.MotionGuidePlugin.install();
var stage = new createjs.Stage("demoCanvas");
var canvas = document.getElementById("demoCanvas");
var timeCount = 1500;
var arrowStartPosY = 10;
var arrowStartPosX = 10;
var arrowEndPosY = 110;
var middlePosY = 50;
var tableRows = 5;
var tableColumns = 4;
for(var i = 0; i < tableRows; i++) (function(i){
         // Loop through each column on this (i) row in empty table
         for(var j = 0; j < tableColumns; j++) (function(j){
var shape = new createjs.Shape();
shape.cache(0,0,100,1000);
var bar = { x: arrowStartPosX, y: arrowStartPosY, oldx: arrowStartPosX, oldy: arrowStartPosY };
stage.addChild(shape);
createjs.Ticker.addEventListener("tick", tick);
run();
function getMotionPathFromPoints (points) {
   var i, motionPath;
   for (i = 0, motionPath = []; i < points.length - 1; ++i) {
      if (i === 0) {
            motionPath.push(points[i].x, points[i].y);
      }
    else if(i === 1){
            motionPath.push(points[i].x, points[i].y, points[i + 1].x, points[i + 1].y);
      } else {
            i++;
            motionPath.push(points[i].x, points[i].y, points[i + 1].x, points[i + 1].y);
      }
   }
   return motionPath;
}
function run() {
    var points = [
            new createjs.Point(arrowStartPosX, arrowStartPosY),
             new createjs.Point(arrowStartPosX+50, middlePosY),
           new createjs.Point(arrowStartPosX, arrowEndPosY)
      ];
    createjs.Tween.get(bar).wait(timeCount).to({
        guide: {path: getMotionPathFromPoints(points)}
    }, 1500);
}
function tick() {
    shape.graphics.clear()
        .setStrokeStyle(3, 'round', 'round')
        .beginStroke("#aaa")
        .curveTo(bar.oldx, bar.oldy, bar.x, bar.y)
        .endStroke();
    shape.updateCache("source-over");
    stage.update();
    bar.oldx = bar.x;
    bar.oldy = bar.y;
}
arrowStartPosY += 20;
arrowEndPosY += 20;
middlePosY += 20;
})(j);
timeCount += 2000;
})(i);
    }

      </script> 
   </head> 
   <body> 
      <canvas id="demoCanvas" width="500" height="500"></canvas>  
   </body>
</html>

Related Tutorials