I am running a current animation on click. At the time of click, I start loading the next animation. On next click event, I fire the next animation, and hide current one with the code below. It is essential that the animation fires without delay.
$("#canvas").on("click touch touchstart",function(){
if (firstRun){
current.gotoAndPlay(0); //current is an animated sprite
loadNext();
console.log("first run");
firstRun=false;
}else{
if (canRunNext){
next.visible=true;
current.visible=false;
next.gotoAndPlay(0);
console.log("can run next");
}else{
console.log("cannot run next");
}
}
});
I noticed, that pixi doesn't prepare invisible object. There is a freeze between next.visible = true and next.gotoAndPlay(); How can I "prepare" the animation, so that it gets loaded and ready to go, immediately after goToAndPlay() is issued, but is invisible before that?
this is the loadNext function. I stripped away some other functions that I think don't matter. I will gladly add them if needed.
var firstRun = true;
var infiniteLoader = PIXI.loader;
function loadNext(){
if (firstRun){
infiniteLoader.add('jimages/3.json');
infiniteLoader.load(function(loader, resources) {
next = new PIXI.extras.AnimatedSprite(setupFrames("3_"));
next.visible=true;
next.animationSpeed = 0.5;
next.loop= false;
next.x = app.renderer.width / 2;
next.y = app.renderer.height / 2;
next.anchor.set(0.5);
app.stage.addChild(next);
canRunNext=true;
console.log("next loaded");
});
}else{
infiniteLoader.add('jimages/3.json');
infiniteLoader.load(function(loader, resources) {
next = new PIXI.extras.AnimatedSprite(setupFrames("3_"));
canRunNext=true;
console.log("next loaded");
});
}
}