UberCarAnimation: A try to make animation of cars on map — Part I

Every time I notice some feature in an android application, I always try to figure out that how those great developers must have developed it. One of those features was animation of the cars on the maps that we see on Uber, Lyft or any other similar applications. In this article I will try to demonstrate that how I ended up making such an animation in my own way.

After seeing some amazing features

Final outcome

Introducing, UberCarAnimation which you can find on Github as:

amanjeetsingh150/UberCarAnimation

Some of the features which can be found in the project are:

1. Demonstration of how car animates on map
2. An event bus implementation with help of RxJava to give callbacks for starting of the Journey, end of the journey and current location of the car.
3. Real world demonstration of how drivers app publish location updates on client side and animations occurs simultaneously on client’s side.

Let’s straight away dive into the features one by one:

1. How animation occurs on the map:

Things needed: Google Maps API setup and key, Google Directions API key.

In this feature I kept my source fixed on some origin LatLng1:

1. You will be using Google directions API to get the steps between the entered source and destination.
2. You can use Retrofit+RxJava for API calls and get the overview_polyline JSONObject and obtain the String points from the API results. The overview_polyline JSONObject and points in the response will be something like:

"overview_polyline" : {
  "points" : "kz~mDkb|vMjA|DsAp@o@VYD[EcCCmD?yIHkDHY`@MXDvAT~MFrE"
}

3. These are then further decoded to list of LatLngs which are the actual steps to be followed for reaching the destination. You can see the function to decode Polyline String to the list of LatLng in my project with the name as decodePoly.

4. Now its time to animate the car from the obtained List<LatLng>. First we will be posting a Handler on UI Thread which will help us to loop over the pair of LatLng and dispatch animation for each pair of LatLng.

Setting up Handler and ValueAnimator

Here we perform three tasks: post a Handler to loop over the pair of LatLng, get the pair of LatLng from list of LatLng as startPosition and endPosition and at last we setup the ValueAnimator with its update listener.

5. Now we have two adjacent or a pair of LatLng and the problem statement breaks down to how we will translate the car between that two points. Here car is nothing but a marker on the map.

If we will be able to find this solution then this translation is going to occur between each pair of LatLng we have in our set from polyLine list. This is achieved by something called as Linear Interpolation we have studied in our higher studies. The theory is as follows:

Linear Interpolation

Imagine that the two red points are the pair of LatLng. According to linear interpolation we will take a parameter ‘v’ which is going to range between 0 and 1. This ‘v’ can help us to define the points between x0 and x1. The parameter is 0 for x0 and 1 for the x1. We use getAnimatedFraction() function as this ‘v’ parameter as it is ranged between 0 and 1 in this case and we can have the new points equation in our update listener callback as:

New Points for motion of the car

Here the newPos is the new calculated point to which we will move our car on.

6. Beware the turn has come!!. You guys must have thought that what will be happening at the turns. For this purpose we have something called as Bearing. Bearing is the angle at which a person should rotate while standing on a point P1 to reach P2. We will calculate bearing for each consecutive LatLng.

Turning of the car-via Giphy

The movement of car will be executed from:

Moving and rotating the car

getBearing is the function with argument as startPosition and the newPosition. It will give the angle at which marker should be rotated from startPosition to go to newPos.

Overall Picture of above algorithm:

Explained diagram — via https://dribbble.com/tiltman (Pankaj Kumar)

Here think this machine as a Handler posted on UI and which picks up consecutive LatLng pair and the animator which is ValueAnimator calculates the points between them (via Linear Interpolation) and moves the marker in its update Listener.

2. Event Bus to provide Journey related Events

For providing callbacks of Journey I implemented a Event Bus through RxJava.

1. There are three type of events we are interested in: start of journey, end of Journey and the current location of car.
2. Create a Singleton class JourneyEventBus.
3. Declare a PublishSubject which we will use to consume the events. And now as the subject act as observer as well, we will be able to subscribe it and get the events.
4. The consuming of events in JourneyEventBus class is given in the code below:

Different Journey Events setting and getter

5. Informing the RxBus: We will be informing our event bus about events when appropriate events occur. This is depicted in following snippet:

Consumption of Events in RxBus

6. In onResume( ) that is before any events are consumed by our subject we subscribe to the EventBus we made as follows and perform the actions we need:

Finally we have established the EventBus. Now lets see the overall outcome:

UberCarAnimation

Similarly you can get current location update in Log console or wherever you like according to the use case.

In the next part I will show you how I demonstrated the real world scenario of how driver app publishes location and animation occurs simultaneously in our maps. You can find the link to the next part here

UberCarAnimation: A try to make Animation of cars on the map-II

Till then, Show some ❤ if you liked this article by hitting clap and starring the repository. Also the project is open for any type of issues and PR. Feel free to open any issues or PR.

Happy Coding ❤