尝试使用PixiJS制作动画效果,但没有显示任何内容

时间:2019-09-17 05:51:13

标签: javascript pixi.js spine.js spine

我是PixiJS的初学者,并通过其网站示例对其进行了学习。我想练习动画,但是什么也没显示。

link是它想要的效果。

这是我尝试的第一种方法,代码可以成功运行,但屏幕上没有任何显示。

const app = new PIXI.Application();
document.body.appendChild(app.view);

app.stop();

app.loader
    .add('symbol', 'assets/medium/animations/symbol animations/10/10.json')
    .load(onAssetsLoaded);

var symbol = null;

function onAssetsLoaded(loader, resource) {
    symbol = new PIXI.spine.Spine(resource.symbol.spineData);
    symbol.skeleton.setToSetupPose();
    symbol.update(0);
    symbol.autoUpdate = false;

    const symbolCage = new PIXI.Container();
    symbolCage.addChild(symbol);

    const localRect = symbol.getLocalBounds();
    symbol.position.set(-localRect.x, -localRect.y);

    const scale = Math.min(
        (app.screen.width * 0.7) / symbolCage.width, (app.screen.height * 0.7) / symbolCage.height,
    );
    symbolCage.scale.set(scale);
    symbol.position.set(
        (app.screen.width - symbolCage.width) / 2,
        (app.screen.height - symbolCage.height) / 2,
    );

    app.stage.addChild(symbolCage);
    symbol.state.setAnimation(0, 'animation', true);

    app.start();
}

app.ticker.add(() => {
    symbol.update(0.01666666666667);
});

以下是JSON的一部分。

"skeleton":{ 
        "hash":"4CHrZE4hbviFvBj9141tsmnOoNA",
        "spine":"3.7.89",
        "width":849,
        "height":791,
        "images":"./images/",
        "audio":"D:/Shiba inu/LOW PAY/source/source/10"
    },
"animations":{ 
        "animation":{ 
            "slots":{...},
            "bones":{...}
        }
    }

我尝试跟踪,“符号”获得了资源,但是在接下来的步骤中它什么也没显示。 有什么问题,我该如何解决?

0 个答案:

没有答案