08-30-2017 19:59 - edited 08-30-2017 20:00
08-30-2017 19:59 - edited 08-30-2017 20:00
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.
Answered! Go to the Best Answer.
09-01-2017 00:21
09-01-2017 00:21
You're correct, the best way would be to use a setInterval() in javascript, then dynamically change the <image> href attribute.
09-01-2017 00:21
09-01-2017 00:21
You're correct, the best way would be to use a setInterval() in javascript, then dynamically change the <image> href attribute.
10-16-2017 01:01
10-16-2017 01:01
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?
10-16-2017 08:39
10-16-2017 08:39
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"
10-16-2017 08:59
10-16-2017 08:59
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.
10-16-2017 12:20
10-16-2017 12:20
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?
10-17-2017 23:14
10-17-2017 23:14
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.
10-17-2017 23:29
10-17-2017 23:29
Are you generating the images on the device? I plan to load them pre-rendered.
10-19-2017 09:43
10-19-2017 09:43
Is there going to be support for requestAnimationFrame in the future?
10-12-2020 10:53 - edited 08-04-2021 20:14
10-12-2020 10:53 - edited 08-04-2021 20:14
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