Code Monkey home page Code Monkey logo

ubercaranimation's Introduction

UberCarAnimation

A demo application which demonstrates movement of car on map developed after inspiration from Uber.

Demo


Youtube Link: https://www.youtube.com/watch?v=JIs4kLZ8qQI

APIs and Libraries used
  • Google Maps Api
  • Google Maps Directions API
  • Volley



Explained Logic

Steps:

  • Parse the "overview_polyline" from the JSON by providing the appropriate GET parameters. For eg:
    
    "https://maps.googleapis.com/maps/api/directions/json?" +
                        "mode=driving&"
                        + "transit_routing_preference=less_driving&"
                        + "origin=" + latitude + "," + longitude + "&"
                        + "destination=" + destination + "&"
                        + "key=" + getResources().getString(R.string.google_directions_key)
    
    
  • Decode the polyline which will provide you with list of latitudes and longitudes that is List<LatLng> to be apt.
  • Setting up of Value animator:Create a value animator by providing the ofFloatValue, setting duration and adding update listener in Handler
    
    ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, 1);
    valueAnimator.setDuration(3000);
    valueAnimator.setInterpolator(new LinearInterpolator());
    valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
      @Override
      public void onAnimationUpdate(ValueAnimator valueAnimator) {
        //CODE
    

    });

  • In the value animator Update listener get the Animation fraction and evaluate the latitudes and longitudes as shown:
    
    v=valueAnimator.getAnimatedFraction();
    lng = v * endPosition.longitude + (1 - v)* startPosition.longitude;
    lat = v * endPosition.latitude + (1 - v)* startPosition.latitude;
    
    
    where v is animation fraction and startposition and endPostion refer to each pair of LatLng from the decoded list from polyline for eg (0,1) then (1,2) then(2,3) and so on.
    According to linear interpolation: The parameter 'v' defines where to estimate the value on the interpolated line, it is 0 at the first point and 1 and the second point. For interpolated values between the two points v ranges between 0 and 1. We evaluate values one by one between each pair of LatLng by traversing through the list.
  • Finally set position of marker to the new position, also evaluating the bearing between the consecutive points so that it seems car is turning literally and finally update camera as:
    
    marker.setPosition(newPos);
    marker.setAnchor(0.5f, 0.5f);
    marker.setRotation(getBearing(startPosition, newPos));
    mMap.moveCamera(CameraUpdateFactory
                    .newCameraPosition
                    (new CameraPosition.Builder()
                    target(newPos)
                    .zoom(15.5f)
                    .build()));
    
    



Running the project

The application uses Google Maps Api Key and Google Map Directions key. Get these api key on google developers console after enabling them for your project. Replace your google maps directions api key in strings.xml and google maps key in google_maps_api.xml. For convenience a TODO has been added there just follow them.

Developers

ubercaranimation's People

Contributors

amanjeetsingh150 avatar

Watchers

James Cloos avatar AruLNadhaN avatar

Forkers

rahulandroid

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.