I’m really struggling to figure out how to stop an animation from playing out of sync when a user tabs back after going to another tab. Here is the general problem:
-
I am calling a function that plays an animation+tween+path+sound.
-
If I tab out, or the window loses focus, all of the clocks keep running as expected. However, when tabbing back, the animation+tween+path+sound plays instantly, no matter what state the game is in. It is the one thing that won’t play when out of focus.
-
If I have the window in the background, then the animation+tween+path plays on time, but then the sound lags.
How do I stop it from playing when a user comes back? How do I stop the sound from being out of sync when in the background?
The function is actually firing when the window is out of focus, it’s just the animation that is paused so I don’t know how I can do a comparison with a timestamp to stop it. It seems like I need to handle this in another way, but I am stuck.
The Function:
function shotPath(finX, finY, curveWidth, curveHeight, commentary) {
ball.setScale(.5);
ballpath.curves.length = 0;
ballpath.cacheLengths.length = 0;
ballpath.quadraticBezierTo(finX, finY, curveWidth, curveHeight);
//This if statement doesn't actually do anything. I was trying to check the time in another way, but the function is already fired if you are out of focus.
if (currentClosingTime - now < 0 && currentClosingTime - now > -10) {
//This plays when you come back from it being in the background. Weirdly, the animation plays on time.
soundsprite.play('swing');
//This is the follower, which is synced with a tween to change the size of the ball. That tween calls another sound, which doesn't fire at all if delayed.
ball.startFollow({
positionOnPath: true,
duration: 5000,
repeat: 0,
onComplete: shotCompleteHandler
});
ballFlight1.restart();
function shotCompleteHandler () {
graphicsResultBackdrop.setAlpha(.9);
resultText.text = lastResult.text;
resultText.setAlpha(1);
}
}
}