pixijs How to create a circular progress bar without Graphics?

[Sincere Xie]

Hi all.I am a beginner of pixi.js, and using PIXI.Graphics to create a circular progress bar that will move over time, the effect is like the one below:

https://codepen.io/saadeghi/pen/IBhfJ

More specifically, the circular progress bar moves over time. So, the graphics is modified constantly, this caused a very serious performance problem and even caused the iOS system to crash.

My question is what should I do to implement such a circular progress bar in pixijs?

My English is poor, thank you for reading.

[ivan.popelyshev]

It should work. Don't forget to clear() graphics. Also, it depends on pixijs version, some of v5 versions were unstable, I recommend to use latest dev http://pixijs.download/dev/pixi.js

One of ideas is sprite with full circle and mask that you modify each frame. If mask is somehow leaking please report it to us, it should work.

[bubamara]

If you don't need gradients, there is this clever 3 sprites approach :

 

[Sincere Xie]

On 4/26/2019 at 12:57 AM, ivan.popelyshev said:

It should work. Don't forget to clear() graphics. Also, it depends on pixijs version, some of v5 versions were unstable, I recommend to use latest dev http://pixijs.download/dev/pixi.js

One of ideas is sprite with full circle and mask that you modify each frame. If mask is somehow leaking please report it to us, it should work.

Thanks to @ivan.popelyshev, I have done my work with the Sprite.  I am not sure if the new version of pixijs has such a memory leak, the version I am using is 4.8.1, and I put the webpage in the foreground for almost three hours before the memory leak occurred. 

I also found that this document(https://github.com/pixijs/pixi.js/wiki/v4-Performance-Tips) has prompted us not to draw Graphics frequently.

[Sincere Xie]

@bubamara Thank you! The answer you gave solved the problem perfectly.