Aki ide a sidenote-ra téved, láthatja a jobb felső sarokban úszó glidereket. Korábban hallottam az APNG (Animated Portable Network Graphics) formátumról, ezért gondoltam, hogy az animgifből csinálok APNG-t.
The Animated Portable Network Graphics (APNG) file format is an unofficial extension to the Portable Network Graphics (PNG) specification. It allows for animated PNG files that work similarly to animated GIF files, while supporting 24-bit images and 8-bit transparency not available for GIFs. It also retains backward compatibility with non-animated PNG files.
Először a meglévő gifből szedtem ki az egyes frame-eket, majd a kíváncsiság kedvéért, hogy működik-e, a fehér hátteret kicseréltem átlátszóra, végül újra összefűztem a képkockákat immár egy animált png-vé.
1 2 3 4 5 6 | gifsicle --explode gliders.gif for i in {0..9} ; do convert gliders.gif.00${i} -transparent white frame00${i}.png ; done for i in {10..29} ; do convert gliders.gif.0${i} -transparent white frame0${i}.png ; done optipng -o7 *.png ls *png > frames.txt java -jar ~/Downloads/japng/japng.jar -frames frames.txt -display 100 -out gliders.apng |
A kész képet feltöltöttem az oldalra, átírtam a CSS-t, és egy teljes reload után, már az animált png gliderek másztak a jobb felső sarokban. Mint minden változtatás után megnéztem a sidenote-ot más böngészőkben is, és sajnos azt tapasztaltam, hogy sem Internet Explorerben, sem Chrome-ban, illetve Safariban nem működik az APNG. Rákerestem az APNG támogatásra neten, és az alábbi táblázatra bukkantam:
Forrás: APNG – Wikipedia
Ezt látva letettem az animgif apng-re való cseréjéről, de az érdekesség kedvéért feltöltöttem ide az elkészült változatot is. Sorban: az eredeti animgif (6 782 bájt), apng (3 415 bájt).
Minden reményem az animált svg-ben van.
Animált SVG (5 306 bájt). Forrás: File:Soccer ball animated.svg – Wikipedia.
