Make a pulse animation in AGSPictureGraphics

1768
5
Jump to solution
06-29-2017 07:33 AM
chiragshah4
New Contributor II

Want pulse animation in agsgraphics in esri map ios 

0 Kudos
1 Solution

Accepted Solutions
MarkDostal
Esri Contributor

Thank you for your question!  While we don't have anything specific to "pulse" graphics in the API, you can accomplish this by setting up your own timer and changing one or more graphicsOverlay, graphics, or symbol properties when the timer fires.  Below are two examples:  the first one changes the opacity of the graphics overlay containing the graphic to pulse; the second one changes the size of the symbol associated with the graphic.

The code to create the timer is as follows:

            var timer = Timer()

            ...

            timer = Timer.scheduledTimer(timeInterval: 0.02,

                                         target:self,

                                         selector: #selector(pulseGraphic),

                                         userInfo: nil,

                                         repeats: true)

And the "pulseGraphic" method to adjust the overlay opacity:

    var opacity: Float = 0.0

    var goingDown: Bool = true

    func pulseGraphic() {

        opacity = opacity + (goingDown ? -0.01 : 0.01)

        

        if opacity < 0.25 {

            goingDown = false

        }

        else if opacity > 1.0 {

            goingDown = true

        }

        else {

            animationGraphicsOverlay.opacity = opacity

        }

    }

Hope that helps.  If you have further questions, let me know.

Mark

View solution in original post

5 Replies
MarkDostal
Esri Contributor

Thank you for your question!  While we don't have anything specific to "pulse" graphics in the API, you can accomplish this by setting up your own timer and changing one or more graphicsOverlay, graphics, or symbol properties when the timer fires.  Below are two examples:  the first one changes the opacity of the graphics overlay containing the graphic to pulse; the second one changes the size of the symbol associated with the graphic.

The code to create the timer is as follows:

            var timer = Timer()

            ...

            timer = Timer.scheduledTimer(timeInterval: 0.02,

                                         target:self,

                                         selector: #selector(pulseGraphic),

                                         userInfo: nil,

                                         repeats: true)

And the "pulseGraphic" method to adjust the overlay opacity:

    var opacity: Float = 0.0

    var goingDown: Bool = true

    func pulseGraphic() {

        opacity = opacity + (goingDown ? -0.01 : 0.01)

        

        if opacity < 0.25 {

            goingDown = false

        }

        else if opacity > 1.0 {

            goingDown = true

        }

        else {

            animationGraphicsOverlay.opacity = opacity

        }

    }

Hope that helps.  If you have further questions, let me know.

Mark

chiragshah4
New Contributor II

Is there any way to do this in android too?

0 Kudos
MarkDostal
Esri Contributor

The code to change the opacity of the graphics overlay and the size of the marker symbol will be similar on Android.  I'm not familiar enough with it to say if Android has a similar timer to iOS, but I image they do.  If you need more help with that, please post a question on the Runtime Android forum, here:  https://community.esri.com/community/developers/native-app-developers/arcgis-runtime-sdk-for-android 

AlexanderNohe1
Occasional Contributor III

Hey Mark.  I ripped a lot of the android sample off of your iOS sample above.  I gave you a shout-out in the Readme for my Android sample in GeoNet:

Pulse Graphic Sample in Kotlin by nohe427 · Pull Request #309 · Esri/developer-support · GitHub 

Hope that is okay.

0 Kudos
MarkDostal
Esri Contributor

Alexander,

No problem, that's cool with me.  Glad you could use the code!

Cheers,

Mark