Search code examples
google-chromeanimationwebp

Transparent animated WebP not clearing frames


I have a series of sprites I'm trying to make into a transparent looping animation. Here's what I'm getting:

As you can see the frames aren't clearing after their turn

I was using a command for webpmux similar to this:

./webpmux -frame mrdipsp/00.webp +250+[[1[-b]]] -frame mrdipsp/01.webp +250+[[1[-b]]] -frame mrdipsp/02.webp +250+[[1[-b]]] -frame mrdipsp/03.webp +250+[[1[-b]]] -frame mrdipsp/04.webp +250+[[1[-b]]] -frame mrdipsp/05.webp +250+[[1[-b]]] -frame mrdipsp/06.webp +250+[[1[-b]]] -frame mrdipsp/07.webp +250+[[1[-b]]] -frame mrdipsp/08.webp +250+[[1[-b]]] -frame mrdipsp/09.webp +250+[[1[-b]]] -frame mrdipsp/10.webp +250+[[1[-b]]]

I've tried several different flags and options and I just can't seem to get the image to clear the previous frame. I'm not even sure if it's possible at this point. Any ideas?


Solution

  • The documentation for webpmux can be checked here. The documentation are pretty much clear and provide good example. However generating the animated webp is a little complex.

    Try this command and it should work:

    webpmux -frame 1.webp +250+0+0+0-b -frame 2.webp +250+0+0+0-b \
    -frame 3.webp +250+0+0+0-b -frame 4.webp +250+0+0+0-b \
    -frame 5.webp +250+0+0+0-b -frame 6.webp +250+0+0+0-b \
    -frame 7.webp +250+0+0+0-b -frame 8.webp +250+0+0+0-b \
    -frame 9.webp +250+0+0+0-b -frame 10.webp +250+0+0+0-b \
     -o abc1.webp
    

    Important Points:-

    1. The square brackets generally means optional.
    2. You can modify x and y a little to give a joyfully jumping expression to animation. x and y are used for giving a frame offset.
    3. Since you want previous frame to be removed once its time is over, you have to set mi to 0, to dispose it. Otherwise it will be used as background.

    My Output Unfortunately, imgur does not allow webp. Here's my Google drive link.