Animate pixi graphics

[wijesijp]

I am new to animating with green sock.

I wanted to animate a pixi graphic.

 

I can get the movement to work, but i can't get the likeWidth and color to animate.

 

Can someone provide some help on this?

See the Pen rrpZpO by wijesijp (@wijesijp) on CodePen.

[PointC]

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.

[wijesijp]

@PointC thank you for your answer.

[jessegavin]

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?

[OSUblake]

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

 

 

 

 

[jessegavin]

Thanks so much @OSUblake.

 

When I first read your answer I was super confused, but it just clicked!

 

That was a really helpful example. I appreciate it.

[OSUblake]

13 hours ago, jessegavin said:

When I first read your answer I was super confused, but it just clicked!

 

I'm curious. What was confusing?

[jessegavin]

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.