pixijs / animate

PixiJS runtime library for content from Adobe Animate CC
https://pixijs.io/animate/
MIT License
217 stars 33 forks source link

stage = null #126

Closed martynov-oleg closed 2 years ago

martynov-oleg commented 2 years ago

Hello, please help

const data = {
    version: 2,
    stage: null,
    background: 0xffffff,
    width: 550,
    height: 400,
    framerate: 24,
    totalFrames: 31,
    assets: {
        "AlphaAnimation": "assets/images/animations/AlphaAnimation.shapes.txt"
    },
    lib: {},
    shapes: {},
    textures: {},
    spritesheets: [],
    getTexture: function (id) {
        if (data.textures[id]) {
            return data.textures[id];
        }
        const atlas = data.spritesheets.find(atlas => !!atlas.textures[id]);
        return atlas ? atlas.textures[id] : null;
    },
    setup: function (animate) {
        const MovieClip = animate.MovieClip;
        const Container = animate.Container;
        const Graphics = animate.Graphics;

        data.lib.Circle = class extends Container {
            constructor() {
                super();
                const instance1 = new Graphics()
                    .drawCommands(data.shapes.AlphaAnimation[0]);
                this.addChild(instance1);
            }
        };

        data.lib.AlphaAnimation = class extends MovieClip {
            constructor() {
                super({
                    duration: 31,
                    framerate: 24
                });
                const instance2 = new data.lib.Circle();
                const instance1 = new data.lib.Circle()
                    .setTransform(218.95, 66.95)
                    .setAlpha(0.45);
                this.addTimedChild(instance2, 0, 31, {
                        "0": {
                            x: 56,
                            y: 133.95,
                            a: 1,
                            tw: {
                                d: 30,
                                p: {
                                    x: 352.95,
                                    a: 0
                                }
                            }
                        }
                    })
                    .addTimedChild(instance1);
            }
        };
        data.stage = data.lib.AlphaAnimation;
    }
};

export default data;

have the following exported object I import it like this: const alphaAnimation = require("./animations/alphaAnimation.js");

I load like this:

import {load as loadAnimate} from "@pixi/animate";
function animationsLoad() {
    return new Promise<MovieClip | null>((resolve) =>
        loadAnimate(alphaAnimation.default, function (asset) {
            resolve(asset);
        }),
    ).then((asset) => {
        console.log(asset);
    });
}

but asset variable is always null, what am I doing wrong ?

martynov-oleg commented 2 years ago
let animate: PixiAnimate = {
            MovieClip: MovieClip,
            Container: AnimateContainer,
            Graphics: AnimateGraphics,
            Text: AnimateText,
            Sprite: AnimateSprite
        }

        alphaAnimation.default.setup(animate);

solved the problem by implementing an interface and calling setup after the resources were loaded. Crutch, but I don’t know how else