topic SVG graphics & CSS animations in ArcGIS JavaScript Maps SDK Questions

SVG graphics & CSS animations

SteveCole — Mon, 25 Aug 2014 21:28:57 GMT

A question for the ESRI Dev folks or anyone else who have spent time on this topic-

I'm working on adding some animations to the selected feature when a user clicks on a feature using the technique in this ESRI sample. Unlike the sample, I'm tapping into the graphic-draw event of the map's graphic layer. It does work- and here's a JSFiddle that shows it in action. I'll call this my "pulse" animation.

What I have in the JSFiddle, however, is actually my second choice of "animation". I originally wanted to incorporate this animation into my project but it does not animate (here's my modified Fiddle of the original to show what I wanted the animation to do). I know the "hook" into the event in my JS code is sound because my "pulse" animation linked in my Fiddle works (and also works in my actual project).

I wanted to use a different animation style for linear features (as shown on #5 on this page) but it does not animate.

I guess my question is this- is there some part of the JS API that prevents some of these animations from operating? A CSS conflict between my CSS and the API's? I can't see it but that doesn't mean it exists.

Thanks!

Steve

[EDIT: I should clarify some things- I've mostly been developing in Chrome with some double checking in Firefox.I do know that IE doesn't support animations natively. I did get the line animation to work in Firefox but it does not animate in Chrome.]

Re: SVG graphics & CSS animations

RiyasDeen — Tue, 26 Aug 2014 09:26:14 GMT

Hi Steve,

Should say it's an interesting idea to highlight features.

Managed to get the point highlight working. I'll try the line when i can find sometime. If you get it working before, do post back I'll be interested in knowing.

Re: SVG graphics & CSS animations

RiyasDeen — Tue, 26 Aug 2014 12:01:52 GMT

Hi Steve,

Attached line ripple.

Re: SVG graphics & CSS animations

SteveCole — Tue, 26 Aug 2014 18:01:43 GMT

Hi Riyas,

I don't see an attachment or link in your reply.

Re: SVG graphics & CSS animations

RobertScheitlin__GISP — Tue, 26 Aug 2014 18:05:58 GMT

You will not see the attachments in your inbox. you will actually have to go to the thread to see them.

Re: SVG graphics & CSS animations

SteveCole — Tue, 26 Aug 2014 18:54:03 GMT

Thanks for that tip, Robert. Just another thing to love about GeoNet!

Re: SVG graphics & CSS animations

SteveCole — Tue, 26 Aug 2014 21:29:42 GMT

Riyas Deen‌

I marked the line example as the correct answer since I don't think you can mark two posts as the correct answer. Your line ripple example is a much smoother animation than what I originally came up with and I've already incorporated it into my project so thank you for that!

The example for points is beautiful- this is exactly what I mentally envisioned for the animation. While your example works, there is a small glitch with your approach but I don't know the answer for fixing it. It seems to be built on screen coordinates so zooming the map or, more severely, panning the map breaks the location of the animation. A map zoom will correct itself but if you simply pan the map, the animation stays at its original screen location even though the point has moved elsewhere.

I can see what you did there but I don't quite understand the why.

Re: SVG graphics & CSS animations

RiyasDeen — Wed, 27 Aug 2014 02:45:49 GMT

Hi Steve,

Sorry about that din realize my logic would break when extent changes. I have modified the code to work for extent change as well.

Please look for createRipple method in the code, i have made an assumption there. you will have to get your graphics object there.