Page MenuHome

Flashing 100 gif designed for white background
Closed, ResolvedPublic

Description

The gif here https://escaperestart.com/forum/data/reactions/24/100.gif was designed to be used on a white background. It doesn't look very pleasant on the new dark theme.

If possible, someone should update it to use partial transparency instead of white pixel anti-aliasing.

Event Timeline

TheArchiteck triaged this task as Low priority.

Gifs won't do partial transparency according to Google... probably an SVG or WebM will be best

(not that I can be arsed to do it, just thought I'd save people some Googling and seem a bit useful)

Note to self for later...

Import PNG Image: https://codepen.io/shshaw/full/LVKEdv
Animate Vector Graphics: https://shapeshifter.design/

SVG animation is the way to go, and with these free tools I could probably get the whole thing done myself.

I've done it.

This is the source file for use in that https://shapeshifter.design/ website. From there, you can export it as a collection of SVG frames, a Vector Drawable, an Animated Vector Drawable, or an SVG Spritesheet. You folks are now tasked with figuring out which one of those you can get to work on the website.

The animated vector drawable looks like the easiest. It's just an xml script. That's not to say I have any clue what the hell is actually going on, but judging by the content and the file size, that's most likely the best one.

SirComputer closed this task as Resolved.EditedAug 28 2019, 7:33 PM

Fixed by making an animated png (APNG).
Had to get the collection of SVG frames, make a script to convert them all into resized PNGs in sizes 24x24 and 48x48, then use a command to stitch them together into an animated image. Bit more complicated than I first thought!

Although this isn't compatible with IE or Edge, it takes out a lot of the potential mess from the CSS that would have been needed to get a spritesheet working. Anyone who uses IE should be punished, anyway!

We're going at a frame every 2ms. I can get this down to 1ms if this is too slow, but we're not going to get much closer. Hex or whoever can reopen this if needs be.


(it's animated if you click it)