Cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

Best way to produce GIF-like animations?

ANSWERED

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.

Best Answer
1 BEST ANSWER

Accepted Solutions

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

View best answer in original post

Best Answer
9 REPLIES 9

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

Best Answer

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? 

 

Best Answer
0 Votes

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"

Best Answer

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.

Best Answer
0 Votes

 

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?

 

 

 

Best Answer

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.  

Best Answer

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

Best Answer
0 Votes

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

Best Answer
0 Votes

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

Best Answer
0 Votes