greensock canvas animate

[peymanAzizi]

Hello

How can I draw a line with animation on canvas?

I want to draw animating line on my canvas chart

can I draw a line using as lineTo canvas method and make animate it with GSAP?

[Carl]

Hi and welcome to the GreenSock forums,

 

GSAP is very flexible in that it can animate any numeric property, it isn't just for DOM/CSS animations.

To animate a line in canvas the basic idea is that you could animate the x and y values of a point object and then repeatedly redraw the line using those updated x/y values in lineTo() like

 

var ctx,
    point  = {x:0, y:0};
ctx = document.getElementById("canvas").getContext("2d");




//animate x and y of point
TweenMax.to(point, 2, {x:800, y:600, repeat:8, yoyo:true, onUpdate:animateLine});


//draw line onUpdate of tween to new x and y values of point
function animateLine() {
 ctx.clearRect(0,0,800,600);
 ctx.beginPath();
 ctx.moveTo(0, 0);
 ctx.lineTo(point.x, point.y);
 ctx.stroke();
}

demo: http://codepen.io/GreenSock/pen/VjENxv?editors=0010

 

GSAP doesn't having any drawing methods or functionality specific to canvas. You may have to code a lot of your own logic and drawing routines. A library like SnapSVG might help in some regard but I don't have a lot of experience with it.

[OSUblake]

Easiest way, animate the stroke dash offset. 

See the Pen 6fed56d9697e1a687a802acdafe03aeb?editors=0010 by osublake (@osublake) on CodePen.

 

It will also work with text...

See the Pen 9c403af62203308ca0e5f41be2888d5f?editors=0010 by osublake (@osublake) on CodePen.

[federicovezzoli]

Hi @OSUblake, is there a way to animate the stroke dash offset in pixi.js graphics elements? 

I've been banging my head on this one for a couple of days without finding the right solution.

 

Coming from svg animations the dash offset was one of my first thoughts, but couldn't find a way to do it in pixi.

 

thanks a lot.

[PointC]

Hi @federicovezzoli 

 

This thread may be of interest to you.

Blake has this demo drawing a path on a canvas

 

See the Pen GjYpPr by osublake (@osublake) on CodePen.

 

Another option is to use a SVG and a Pixi canvas sandwiched together so you can use DrawSVG. That's what I did in this demo. The Pixi canvas was used for the spark particles and confetti, but I just kept the bottom layer as a SVG so I could draw the number paths with GSAP and drawSVG. Maybe it'll give you some ideas.

 

See the Pen RyaJmj by PointC (@PointC) on CodePen.

Happy tweening.

 

[federicovezzoli]

thank you @PointC, I've made some progress, but can't replicate it in pixi the first demo, since pixi does not have dash offset.

I thought to combine svg and webgl, but for different reasons I cannot use that technique.

 

So, I have an array of cubic bezier coords without animation I just do something like this, and it works:

 

this.tracks[trackID] = new PIXI.Graphics()
this.tracks[trackID].lineStyle(1, 0xFFFFFF)
this.tracks[trackID].moveTo(newCubicBezier[0].x,newCubicBezier[0].y)
for (var i = 1; i < newCubicBezier.length; i++) {
	this.tracks[trackID].lineTo(newCubicBezier[i].x, newCubicBezier[i].y, 1)
} 

 

But if I place it in a tween, the line is not visible:

this.tracks[trackID].moveTo(newCubicBezier[0].x,newCubicBezier[0].y)
//remove the first el
newCubicBezier.shift()
        
let that = this.tracks[trackID]
TweenMax.staggerTo(newCubicBezier, 2, {
    ease: Sine.easeOut,
    onUpdate: function(){
        console.log("update", this.target, that)
        that.lineTo(this.target.x, this.target.y, 1)
    }
}, 0.05);

 

I think I'm missing some basic understanding, but couldn't find it.

 

Wanted to do a codepen demo, but Codepen is not working right now.

 

Thanks a lot!

[federicovezzoli]

Anyone? I'm really stuck here. 

Any help could be really appreciated.

 

@PointC or @OSUblake?

 

thanks a lot guys.

[PointC]

Looks like CodePen has managed to fight off the DDoS attack they were experiencing over the last several days and are now back up. If you could drop that into a demo, I'll take a look.

 

Happy tweening.

 

[federicovezzoli]

Here it is,

I've added both the solutions: the normal way ( line 49 of the js ) commented out but it works, uncomment to see the path, it's the Danube river.

And the tween ( from line 58 ) that does not work.

 

Any clue?

thanks a lot!!

 

See the Pen MxMxGo by federicovezzoli (@federicovezzoli) on CodePen.

 

 

[PointC]

I'll preface this with a disclaimer: I don't often draw graphics with Pixi. I mostly use it for sprites, particles, explosions and that kind of crazy stuff so I'm not an expert with the drawing commands.

 

That being said, I think you'll have to set your lineStyle on each update:

 

See the Pen axOPrV by PointC (@PointC) on CodePen.

 

I think some of the point data may be off though because this doesn't look quite right. I didn't dive too far into the rest of your code to see what that might be. Maybe a scaling issue? I'm sure you can track it down.

 

Here's a slightly different approach. I used a dummy target and the Bezier plugin to draw the path on the PIXI stage. Maybe it'll give you some ideas.

 

See the Pen oOXMOB by PointC (@PointC) on CodePen.

 

Or you can tween an object as well instead of the dummy target.

 

See the Pen NmqowR by PointC (@PointC) on CodePen.

 

Hopefully that helps a bit. Happy tweening.

 

[federicovezzoli]

Thanks @pointC

It worked pretty well with the bezier plugin, here the updated pen.

 

Thanks again!

 

See the Pen MxMxGo by federicovezzoli (@federicovezzoli) on CodePen.