Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
peymanAzizi

greensock canvas animate

Recommended Posts

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?

Link to post
Share on other sites

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.

  • Like 5
Link to post
Share on other sites

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.

Link to post
Share on other sites

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.

:)

 

  • Like 2
Link to post
Share on other sites

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!

Link to post
Share on other sites

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.

:)

 

  • Like 1
Link to post
Share on other sites

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

 

 

Link to post
Share on other sites

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.

:)

 

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×