Google map circle radius In Out Animation

This title is too obvious that everyone has worked on it and knows the animation very well. Well, I am not talking about heart beat animation of circle radius, I am talking about In an Out animation. So, Let’ start….

What we want to achieve as per the below gif.

Animation Google map radius In Out

So, How can we do like that?

As per my last story, I shared you how to do pin drop animation on google map, Here is the link of that. https://medium.com/@modijecky/google-map-pin-drop-animation-a6888758b61c

Looks Interesting!!

Now the Logic behind this animation is We draw circle on google map by increasing its radius step by step using timer and remove the older ones.

So, Now you have the core logic, Now ready to implement it ??

Let’s Start

First, We need a current location and set radius of for example, 5000 meters. So…

This will set out current location, Now for the radius

You have one question that what is bounds() here. So here is the explanation for that

Now, We have to fit that radius of google map within our Screen ratio. So there is extension of google map which calculates bounds of given coordinates using radius

Now the Core part ANIMATION

So we are using timer here for animation So each time timer method calls we can increase or decrease radius

Timer Method

Now you think what is circleAnimation ==.out and .in is?
So it is enum to identify whether my circle animation is In or Out.

Now you have questions like what is meaning of appending array with GMSCircle object.
Also what is purpose of code when you remove object from array.

So at first we talk about core logic that we need to remove older radius to remove it from google map. These last lines contains that logic.

It removes the older circle radius from google map.

That’s it, We have successfully achieved out outcome.

Here is the full source code.
https://gist.github.com/jeckymodi/86f4a41cbfcf95ea60d541b99286e86b