Hi,
I've already made this work in AS3 (http://forums.greensock.com/topic/257-drawing-with-tweenmax-solved/)
That's working very fine. Now, i'm trying to make this work with JS....But right now, it doesn't work. Is anyone could help me? Thanks a lot.
function buildPathTimeline($points, $graphics, epaisseur, color){
var timeline = new TimelineLite({paused:true});
var p //point
var strColor;
var numEpaisseur;
var dx; //distance on the x-axis
var dy; //distance on the y-axis
var d; //distance
var pen; //stores information about the coordinates and previous points for each one in the Array
for (var i = 0; i < $points.length; i++)
{
p = $points[i];
strColor = color[i];
numEpaisseur = epaisseur[i];
pen = { x:p[0], y:p[1] };
dx = p[0] - 10;
dy = p[1] - 10;
//d = Math.sqrt(dx * dx + dy * dy);
timeline.add(new TweenLite(pen, 0.5, { x:p[0], y:p[1], ease:Linear.easeNone ,onUpdate:updateLine, onUpdateParams:[$graphics, pen, numEpaisseur, strColor] } ));
}
return timeline;
}
function updateLine($graphics, $pen, epaisseur, color){
$graphics.lineTo($pen.x, $pen.y);
$graphics.strokeStyle = "#000000"; //color
$graphics.lineWidth = 5;
$graphics.stroke();
}
context.beginPath();
context.moveTo(20, 20);
myPath = buildPathTimeline(pointArray, context, epaisseurArray, colorArray);
TweenLite.to(myPath, 20, {currentProgress:1, delay:1.5});