我是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":{...}
}
}
我尝试跟踪,“符号”获得了资源,但是在接下来的步骤中它什么也没显示。 有什么问题,我该如何解决?