Jump to content
Search Community

Animate pixi graphics

wijesijp 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 @wijesijp :)

 

Welcome to the forum.

 

You're targeting the container:

cardImg = new PIXI.Container();

TweenMax.to(cardImg, 1, {
    pixi: { x: 500, lineWidth: 5, fillColor: 0x0088f7 }
  });

 

If you want to animate the fill, you'll need to target the graphic.

TweenMax.to(graphics, 1, {
     x: 500,  pixi:{fillColor: 0x0088f7}
});

 

I thought the lineWidth would work in that same tween too, but it doesn't want to cooperate. I had to target the lineWidth in the graphicsData object to make it animate. Most of my Pixi work is with sprites and I barely touch the graphics so I'm honestly not sure why we can't target the lineWidth without going into that object. @OSUblake is our resident Pixi expert so I'm sure he can answer that for us when he has time.

 

Here's a fork of your pen.

 

See the Pen KBZGLq by PointC (@PointC) on CodePen

 

Hopefully that helps. Happy tweening.

:)

  • Like 4
Link to comment
Share on other sites

  • 1 month later...

My question is similar, but I am trying to understand how I can animate some of the shapes that are drawn on the Graphics instance.

 

In particular I am trying to see how to animate the angle on an arc.

 

let arc = new PIXI.Graphics();

arc.lineStyle(4, 0x000000, 1, 1);

arc.arc(0, 0, 50, 0, 90);

 

I want to change the angle from 90 to 360 (from a quarter circle to a full circle).

 

The PixiPlugin can animate object properties (lineWidth, fillColor, etc), but is it possible to animate method calls?

Link to comment
Share on other sites

3 hours ago, jessegavin said:

The PixiPlugin can animate object properties (lineWidth, fillColor, etc), but is it possible to animate method calls?

 

No. Graphics data is stored as an array of points. It does not keep track of the parameters you pass in. You can create an object with the properties of your shape, and animate that instead.

 

The reason I'm animating the angle to 361 is because there will be a tiny gap at 360. It's either that, or draw a circle at the end.

 

See the Pen aawPxd by osublake (@osublake) on CodePen

 

 

Also, graphics rendering can be slow, so it's best not to create a different graphics object for every shape you draw. If you look at the Pixi example, notice how they are using a single graphics object.

https://pixijs.io/examples/#/demos/graphics-demo.js

 

 

 

 

  • Like 6
Link to comment
Share on other sites

Mostly I just realized i've been doing it all wrong!

 

I had been creating separate graphics objects for each element, and then mostly trying to tween their x, y, width, height to achieve my goals.

 

Seeing your example and understanding that you can use Greensock to tween properties on data objects (which are then rendered in a loop) makes so much more sense.  I realize this is probably Graphics Programming 101, but it was helpful to me. 

 

Thanks for taking the time to explain @OSUblake. I appreciate it.

  • Like 3
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...