create.js canvas path animation
HTML
<script src="http://code.createjs.com/easeljs-0.7.1.min.js"></script>
<div id="info">info</div>
<canvas id="app" width="500" height="800"></canvas>
CSS
body, html, canvas {
margin:0px;
padding:0px;
width: 500px;
height: 800px;
}
JavaScript
var info = document.getElementById('info');
var stage = new createjs.Stage('app');
createjs.MotionGuidePlugin.install();
createjs.Ticker.addEventListener("tick", tick);
// enable touch interactions if supported on the current device:
createjs.Touch.enable(stage);
stage.enableMouseOver(10);
stage.mouseMoveOutside = true;// keep tracking the mouse even when it leaves the canvas
var display = new createjs.Container();
var circles = new createjs.Graphics();
circles.setStrokeStyle(1)
.beginStroke(createjs.Graphics.getRGB(255,0,0))
.beginFill(createjs.Graphics.getRGB(255,255,255))
.drawCircle(0,0,10);
//Control vector1
var cv1 = new createjs.Shape(circles);
cv1.x = 40;
cv1.y = 200;
//Control point1
//Control vector2
var cv2 = new createjs.Shape(circles);
cv2.x = 150;
cv2.y = 360;
//Points to drag
var points = [cv1,cp1,cv2];
//Drag points
for (var p=0, plen=points.length; p<plen; p++) {
points[p].addEventListener("mousedown", function (evt) {
evt.preventDefault();
// bump the target in front of its siblings:
var o = evt.target;
o.parent.addChild(o);
o.offset = {x: o.x - evt.stageX, y: o.y - evt.stageY};
});
points[p].addEventListener("pressmove", function (evt) {
var o = evt.target;
o.x = evt.stageX + o.offset.x;
o.y = evt.stageY + o.offset.y;
draw();
});
points[p].addEventListener("pressup", function (evt) {
draw();
});
}
//Follow path
var followPath = new createjs.Shape(circles);
followPath.x = cv1.x;
followPath.y = cv1.y;
//Create path
var curve = new createjs.Shape();
var midline1 = new createjs.Shape();
var midline2 = new createjs.Shape();
//Add clips and draw to canvas
display.addChild(followPath, curve, midline1, midline2, cv1, cp1, cv2);
stage.addChild(display);
draw();
function draw() {
//red curves
curve.graphics.clear();
curve.graphics.moveTo(cv1.x, cv1.y)
.setStrokeStyle(1)
.beginStroke('#f00')
...