Is there a way to replay an animated PNG file that has settings to only play once?-CodePudding

I have an animated PNG of about 30 frames, that animates on click request jquery. It is now displaying as a background inside a div that is hidden and being shown on click. However, as soon as it has been established it will not replay if I hide the div and show it again. If I refresh the page, it still does not work, it only works with a "hard refresh" of the page and it plays again on click, ONCE. I can not use a looped animated PNG since it needs to play from start to end on click and not loop.

Is there a way with jQuery to somehow make an animated PNG that is set to only play 1 time, to make it play again on request? Any solution is welcome as long as they work. There is nothing wrong with the code, the code makes the function play again, I have sound that replays. It is the animated PNG file that does not replay because it is a PNG set to only play ONCE. This is not a question about whether my code is correct, as I am only putting up the code as a quick example of how I have tried it out. But rather a question about how to make an animated PNG that is set to only play once, to make it play again, once, start till end, on any type of request, in this case on click.

HTML

<div id="animated-png"></div>

CSS

#animated-png {display:none;width:100px;height:100px;content:'';}
#animated-png-on {background:URL("URL/to/animated.png");display:block}

jQuery

$("#animated-png").on("click", function (e) {
e.stopPropagation();
$(this).addClass("animated-png-on");
$(this).delay(2000).queue(function () {
    $(this).removeClass("animated-png-on");
    $(this).dequeue();
});

Unfortunately, I can not upload an image example since the files are bigger than 2MB. It is a PNG sequence made into an animated PNG through ezgif website and set to play 1 time.

UPDATE:

Snor gave the solution on how to solve the APNG to play again and it works. Here are some results after looking into the WebM and WebP:

APNG: Resize it to the half size of your original and do this solution. 2MB WebM: No downsize, yet much lower quality with transparency. 3MB WebP: Doing it full-size was laggy compared to the APNG solution in full-size.

So the best solution for big animated transparent files would be the APNG and with Snor's solution. To make it lower in MB just do 50% or 60% of your original size and it will still look better than your WebM. Thank you.

CodePudding user response：

Testing this, it appears that the browser implements a single instance of any APNG image regardless of how it is used in that session. That is, even if you append an <img src="animation.png" /> to the page and then later append a new similar element <img src="animation.png" /> or even an element <div style="background-image: url('animation.png');"></div> they will all always be in the exact same state of their animation. The animation begins when any of the elements first appear, and then it applies to them all.

Because JS has no control over APNG animation state, there is seemingly no way to reset this behaviour per image uri.

A very dirty solution:

You could set a randomly generated query string on the css for the element each time you want it to play again, eg:

.css('background','url("animation.png?12345")')

This will make the browser treat it as a new image, and load/animate it again. This of course means another http request to fetch the image (which you may want to pre-load so that it's ready to animate right away).

A better solution:

Is probably to not use an APNG at all for this due to this implementation limitation. Instead, if you put the 30 frames of the animation side by side in a single static .png image, then you can use either JS or a CSS animation to move the background position through the offsets for each frame of the animation, controlling it yourself.

Dirty solution example:

var apng = "https://upload.wikimedia.org/wikipedia/commons/4/40/Alarm_Clock_Animation_High_Res.png";
$(function(){
    $(".button").on("click", function (e) {
        e.preventDefault();
        $(".element").css("background-image",'url("'   apng   '?'   Math.random()   '")');
    });
});

.element {
    height: 720px;
    width: 908px;
    background-size: 100% 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button >reset animation</button>
<div ></div>

Example with poster's non-looping image:

$(function(){
    $(".element").on("click", function (e) {
        e.preventDefault();
        var apng = "https://diam.se/apng/laser.png";
        $(this).addClass("attack-render")
            .css("background-image", 'url("'   apng   '?'   Math.random()   '")')
            .delay(3000)
            .queue(function () {
                $(this).removeClass("attack-render");
                $(this).dequeue();
        });
    });
});

.element {
    height: 510px;
    width: 720px;
    border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div ></div>