Jump to content
Search Community

greensock canvas animate

peymanAzizi test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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 comment
Share on other sites

  • 2 years later...

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 comment
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 comment
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 comment
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.
×
×
  • Create New...