Animating actions using the ticker

[Ozonzono]

I have trouble understanding how to correctly animate my game using the ticker. I created a black bar which I would like to change it's size when a method is called, this is how the code:

class HitBar extends PIXI.Sprite {
    private bar = new PIXI.Sprite(PIXI.Texture.WHITE);
    private cellWidth: number;
    private radius: number;

    constructor(cellWidth: number, cellHeight: number) {
        super();
        PIXI.Ticker.shared.add(this.changeSize());

        this.cellWidth = cellWidth;
        this.bar.tint = 0x000000;
        this.bar.height = cellHeight;

        this.addChild(this.bar);
        this.setRadius(1);
    }

    public setRadius(r: number) {
        this.radius = r;
    }

    private changeSize() {
        const rate = 1 / 10;
        var completed = 0;
        var currRad = this.radius;
        return () => {
            if (currRad == this.radius)
                return;

            completed += rate;
            var r: number;
            if (completed >= 1) { // >= to avoid floating point problems
                r = this.radius;
                completed = 0;
                currRad = r;
            }
            else {
                r = currRad + completed * (this.radius - currRad);
            }

            this.bar.width = this.cellWidth * 2 * r;
        }
    }
}

As you can see the ticker continually runs the function inside changeSize and when setRadius is invoked it will start working.

What I am looking forward is to have a function which will activate an animation but it seems to me that my design is bad, mostly because every animation would require adding multiple members to the class.

[ivan.popelyshev]

PixiJS doesnt have animation manager on its own , and pushing all anims to ticker is good only if there are few ) you have to remove them too, right?  And somehow track if element was removed from stage and you have to stop animation...

If you have no idea how to make animation manager, you can use GSAP, there are examples: https://pixijs.io/examples/#/gsap3-interaction/gsap3-basic.js

However, nor PixiJS nor GSAP have a thing that tracks whether animation item was removed from stage, you have to do it no your own.

Edited June 2, 2021 by ivan.popelyshev

[Ozonzono]

2 hours ago, ivan.popelyshev said:

PixiJS doesnt have animation manager on its own , and pushing all anims to ticker is good only if there are few ) you have to remove them too, right?  And somehow track if element was removed from stage and you have to stop animation...

If you have no idea how to make animation manager, you can use GSAP, there are examples: https://pixijs.io/examples/#/gsap3-interaction/gsap3-basic.js

However, nor PixiJS nor GSAP have a thing that tracks whether animation item was removed from stage, you have to do it no your own.

thanks, that's exactly what I needed.