SVG graphics & CSS animations

5892
7
Jump to solution
08-25-2014 02:28 PM
SteveCole
Frequent Contributor

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.]

1 Solution

Accepted Solutions
RiyasDeen
Occasional Contributor III

Hi Steve,

Attached line ripple.

View solution in original post

7 Replies
RiyasDeen
Occasional Contributor III

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.

RiyasDeen
Occasional Contributor III

Hi Steve,

Attached line ripple.

SteveCole
Frequent Contributor

Hi Riyas,

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

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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

SteveCole
Frequent Contributor

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

0 Kudos
SteveCole
Frequent Contributor

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.

0 Kudos
RiyasDeen
Occasional Contributor III

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.