Best way to produce GIF-like animations?

[jtlapp]

I'd like to briefly display GIF-like animations after certain user actions. For example, a brief fireworks display. What's the best way to do that, given that GIFs aren't supported? Cycle JPGs? The animation API doesn't seem applicable.

[JonFitbit · Accepted solution]

You're correct, the best way would be to use a setInterval() in javascript, then dynamically change the <image> href attribute.

[Anthoang]

I am dynamically changing the <image> href attribute within a setInterval().  However, the images are flickering.   I am displaying images that spans the full display of the watch.  

Has anyone been able to successfully create an animation without flickering? 

[JonFitbit]

Typically I've seen this happen when the image does not match the dimensions.

So full screen is 348x250. Your image should be that size, and you should have <image width="348" height="250"

[jtlapp]

I'm planning to sometimes have a small animation onscreen with text and a button. I was hoping that fixing the expected image size would suffice.

I'm still building infrastructure and haven't gotten to the Fitbit app yet.

[Anthoang]

That's what I did.  I created my fullscreen png images in Photoshop to be exactly 348x250 and they all are approximately 32kbs in size.  And I also have <image width="348" height="250" x="0" y="0" ...> 

Is there a certain type of png image (ie dithering, 32-bit, 64-bit?) that needs to be created?

[Anthoang]

Converting my png files (32kbs) to jpg files (4kbs) did get rid of the flickering.  

But I don't think the Ionic is powerful enough to handle the type of animations I am trying to do.  

[jtlapp]

Are you generating the images on the device? I plan to load them pre-rendered.

[nstrayer]

Is there going to be support for requestAnimationFrame in the future?

[Krish_2009]

You can also use the sprite image  instead of setInterval();

If this answer works please mark this post as a Best Answer.  ~ K.K Designs