Drawing with TweenMax

[skiplan]

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});

[jamiejefferson]

Yep all those lovely graphics classes in Flash don't exist in the browser, so you're going to need to use something like SVG or Canvas to draw complex things on the screen.
 
There are many libraries available to help you do this, but I don't really use them often so I don't have a favourite to recommend. GSAP does have plugins for animating objects from the following libraries though:
 
KineticJS
Raphaël
EaselJS

[skiplan]

Yep all those lovely graphics classes in Flash don't exist in the browser, so you're going to need to use something like SVG or Canvas to draw complex things on the screen.

 

There are many libraries available to help you do this, but I don't really use them often so I don't have a favourite to recommend. GSAP does have plugins for animating objects from the following libraries though:

 

KineticJS

Raphaël

EaselJS

Thank you for the answer.

Actually my problem is not to draw a complex plot (I use Canvas to do this), but to animate.

 

Thanks

[Jonathan]

Hello..

 

Have you tried using the GSAP ticker property .. it basically fires an event every time the engine updates. It lets the browser be in charge of choosing the best time to execute the code, which will use less resource, and is more efficient.

 

So instead of using setInterval() time or using the GSAP .to() method, to trigger drawing on the canvas, you would use the GSAP ticker. Its like if you were to use requestAnimationFrame, but the ticker property makes it cross browser, since setInterval is not reliable and requestAnimationFrame needs a little shim to work and detect each browser...

 

http://api.greensock.com/js/com/greensock/TweenMax.html#ticker
 

// add listener that requests an event object parameter, binds scope to the current scope (this), and sets priority to 1 so that it is called before any other listeners that had a priority lower than 1...
 TweenMax.ticker.addEventListener("tick", myFunction, this, true, 1);
 
 function myFunction(event) {
     // executes on every tick after the core engine updates
 }
 
 //to remove the listener later...
 TweenMax.ticker.removeEventListener("tick", myFunction);

also here is a nice starter video tut on using canvas with GSAP, (it is in the last part of the video, around 16 minutes and 20 seconds in):

 

http://gotoandlearn.com/play.php?id=161

 

a small example taken from that tut:

var img,
    ctx;
 
function init(){ 

        ctx = document.getElementById("canvas").getContext("2d");
	
        img = new Image();
	img.src = "enemy.png";
	img.xpos = 50;
	img.ypos = 50;

	img.onload = function(){
		TweenMax.ticker.addEventListener("tick", loop);
	};
		
	TweenMax.to(img, 1, {xpos:500, ypos:400, repeat:-1, yoyo:true});
}
	
function loop(){
        ctx.clearRect(0,0, 800, 600); // clears size of canvas tag each refresh
	ctx.drawImage(img, img.xpos, img.ypos);
}

instead of running your build through a for loop, and the update callback. You could use the ticker and have it trigger your function that has your canvas drawing functions each engine update

 

also you can check this cool article by Carl Schooff, "Exploring Generative Canvas Art with TweenMax JS and KineticJS" :

 

http://www.snorkl.tv/2012/06/exploring-generative-canvas-art-with-tweenmax-js-and-kineticjs/

 

here is also a previous reply to a post from Jack regarding this:

 

http://forums.greensock.com/topic/6076-html5-canvas/?view=findpost&p=21509

 

[Rodrigo]

Hi,

 

I've created a sample of a circle drawing using GSAP's onUpdate call and canvas.

 

Since with canvas you can draw arcs, you can update the arc's angle using GSAP, so on every update you pass a new and bigger angle and draw the arc again, that creates the illusion of the circle being draw.

 

You could use that same technique for any other path, it'll take more code as the path becomes more complex but  is definitely doable. You can also extend it to animate graphics and all with GSAP.

 

You can check it here:

See the Pen ohylp by rhernando (@rhernando) on CodePen

 

Best,

Rodrigo.