Animated feedback when interacting with Icons

[PatriciaMoller]

I noticed the icons have a slight "drop" animation when they first appear on the map.

Is it possible to:
If you open a question within reach, to make that icon to bounce (see gif 1)
If you answer correctly, make it bounce and sparkle? This (see gif 2)
If you tap a question out of reach or answer incorrectly, have it shake? (See gif 3, if an question was answered incorrectly, it would be the red icon?)

(Gif are illustrated examples, not assets)

My current idea for Gif2 is to have a gif animation play behind the icon at the same location, however. I imagine those could end up being rather heavy, tough if they are made as low-res as possible and frame efficient, they may not end too taxing. I will look into vector/svg animation, since it most likely will be needed for other animations at a later point (gif of added elements in gif2 are available here: https://drive.google.com/open?id=0BwI6ykFZVgBJc2JtTXRUaUUwQms)

[pjotrsavitski]

The animation used if provided by the Google Maps API itself. It is rather limited one. There is also a bouncing option, but changing the animation requires some effort and has certain "quirks" to it.

We could temporarily swap the icons with some animated version of another picture (that is hypothetical claim and needs some testing for a real proof).

I am a bit confused about the images though. We had to opt for SVG ones, but now we suddenly get the animated GIF images instead.

As for animated SVG images, it should be tested first as there could be some limitations that the API could impose.

[PatriciaMoller]

Posted a bit too quickly sorry about that.

To clarify: The GIFs are just illustrated examples of suggested movement. They are not assets to be used. The animation of the icons would be moving the SVG-icon. Any special effects (such as starts popping up) would be an animated GIF placed behind the SVG, as I imagine it would be faster to implement that rather than scripting that movement.

I found this article/tutorial, they seem to be using CSS to handle the movement of the icon. Does that seem like a reasonable way to do it?
https://www.sitepoint.com/animated-google-map-markers-css-javascript/

[pjotrsavitski]

I see no issue with that kind of approach. I suppose we could also apply animations to our markers as it is needed.

[pjotrsavitski]

Managed to give that a try. It is doable and should not be a big deal for the simple bounce and shake animations. We could even be able to apply the ones offered by Animate.css.

In case of the sparkling one. That should probably be achieved by temporarily switching to a special icon, applying animation and then switching to the red icon in the end.

One of the issues I've seen is that the leftovers of the styles for the initial animation are going to get in the way. These should either be removed or the initial dropdown should never occur.

We might also need to apply animations with the use of jQuery.animate functionality instead, this should give a lot more control over what is happening during the animation and when animation is finished. Approach using JS code should allow having a lot more control over course of animation and applying any additional actions.

[PatriciaMoller]

If it's possible to make use of those animations or similar, that would be amazing. They would bring so much more life and energy to the experience.

I don't quite get what you mean by "special icon". Would the animated and static icon be treated as separate objects?

I'm not experienced with scripting/implementation. If JS grants more freedom and control, then I vote for that. If doesn't end up complicating things, it might be better in case we want specific movements.

[pjotrsavitski]

Special icon would be the one with sparkles. Changing icons means having different images and forcing marker objects to use those.

The JS is there anyway and in large quantities. Using existing library just saves the effort of coming up with CSS logic for animations. Not super complicated, but our case is not as simple as the example given. Animations have to be applied to certain objects at certain point in time ... and so on.

[PatriciaMoller]

Just trying to understand the flow:
By default, it's the static SVG.
For simple movement, like a little shake, it could be done with script (CSS or JavaScript, whichever is the most appropriate)
For more complex animations, such as the sparkling, a separate animated icon (a gif?) plays before switching to the correct static SVG again.
?

[pjotrsavitski]

All of those are images at all times, those could even use animated images (needs a small configuration setting being enforced). The effects are mostly applied with styles. Either that happens by applying the CSS animations with a little help from JS or constant JS changes to keep the style values being changed (hard to explain the difference).

In case of sparkling we could just use heavy JS to control the animation and apply the effects as needed. In this case swap for the version of image with sparks. Or we could just switch the image to the animated one, then we would switch back.

The final destination is the same, but several roads could lead there.

[PatriciaMoller]

I made a more proper gif, using Flash, of the Bounce animation. Here Can we use that to test if gifs are suitable for animated icon? Or at least see how having animated icons affect the interaction and what playback speeds are appropriate.

[pjotrsavitski]

Yes, we can surely test that. I will get that live next week. GIF images should work just fine.

…

On 21 Sep 2017, at 12:33, PatriciaMoller ***@***.***> wrote: I made a more proper gif, using Flash, of the Bounce animation. Here Can we use that to test if gifs are suitable for animated icon? Or at least see how having animated icons affect the interaction and what playback speeds are appropriate. — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

[pjotrsavitski]

I will try to do that. Although the jumping one should probably be orange with question mark. The green star icon means correctly answered question. I will report the finding right here and will upload to the server if it seems to be working.

[pjotrsavitski]

This is how it looks like right now:
marker_bounce.zip

Had to mess with the size a bit so that it would match the other icons. We could change the icons to anything we need for a certain duration of time. Then we could make the code make the switch to something else.

This is how the original bounce animation (packed with the Google Maps API itself):
native_bounce.zip

I did not yet get to the point where we could apply some custom CSS animations to visual markers. Will need to dive deeper for that.

But we could easily use the animated gifs, if we need that.

[PatriciaMoller]

In what way/how much did you change the size? It'd be be good to know for future reference.

Hmm, the GIF looks rather choppy and the transparency doesn't work. I cut down some of frames because I was worried about it getting too heavy. Maybe won't be an issue, if the files will be so small, both in pixels and filesize, anyway. But it's good to know that it's an option.

https://gist.github.com/jeremypetrequin/6414054 Stumbled upon this. If I understand it correctly, it makes to possible to play a spritesheet as a JS clip. In that case, granted that the spritesheet doesn't end up being too big (which as earlier said probably won't be that big of an issue) we could have more control over playback speed and quality. GIFs don't handle transparency gradients very well. It may not matter much in this specific case. But it could be a future issue if other UI elements are to animated, which I have some ideas for.
If played at a high speed, the JSON+spritesheet plays very smoothly.

For comparison, an "uncut" 21 frame GIF is ~160kB. The spritesheet of the same animation is ~500kB, but will overall have better quality.

What do you think? I think this could be better for all the cases where the animations are more than a static icon moving.

If you want to try with the uncut gif it's here

JSON + spritesheet