Umber Car Animation

Here is an example to show car's animation on the Map.

New Features!

• Car move from A position to B when user searched.
• Display a route to connect A to B position
• Display window Marker

you can clone this repo to take a look the code. For this time Uber car's animation is done. Here is demo :

Installation

• Animation Marker on map function

 public static void animateMarker(Location destination, final Marker marker) {
if (marker != null) {
final LatLng startPosition = marker.getPosition();
final LatLng endPosition = new LatLng(destination.getLatitude(), destination.getLongitude());
float startRotation = marker.getRotation();
final LatLngInterpolator latLngInterpolator = new LatLngInterpolator.LinearFixed();
ValueAnimator valueAnimator = ValueAnimator.ofFloat(new float[]{0.0f, 1.0f});
valueAnimator.setDuration(TIME_DELAY);
valueAnimator.setInterpolator(new LinearInterpolator());
valueAnimator.addUpdateListener(new AnimatorUpdateListener() {
public void onAnimationUpdate(ValueAnimator animation) {
try {
marker.setPosition(latLngInterpolator.interpolate(animation.getAnimatedFraction(),startPosition, endPosition));
} catch (Exception e) {
}
}
});
valueAnimator.start();
}
}

• Rotate Marker function

 public static void rotateMarker(Marker marker, float toRotation) {
final Handler handler = new Handler();
final long start = SystemClock.uptimeMillis();
final float startRotation = marker.getRotation();
final Interpolator interpolator = new LinearInterpolator();
final float f = toRotation;
final Marker marker2 = marker;
handler.post(new Runnable() {
public void run() {
float t = interpolator.getInterpolation(((float) (SystemClock.uptimeMillis() - start)) / 1000.0f);
float rot = (f * t) + ((1.0f - t) * startRotation); Marker marker = marker2; if ((-rot) > BitmapDescriptorFactory.HUE_CYAN) { rot /= 2.0f; } marker.setRotation(rot); if (((double) t) < 1) { handler.postDelayed(this, 16); } } }); }

The main idea to animate the marker smoothly is that run handler in loop with the same delay time. In this example we define the delay time is :

 public static final long TIME_DELAY=1000;

Now is testing animation with sample app, you can look inside MapsActivity.java for full source code :

 Runnable runnable =new Runnable() {
@Override
public void run() {
if (index <listRoutes.size() - 1) {
index++;
// next = index +1;
}
updateMarker(marker, listRoutes.get(index));
handler.postDelayed(this, MarkerAnimation.TIME_DELAY);
}
};
private void startAnimation() {
handler.removeCallbacks(runnable);
marker = mMap.addMarker(new MarkerOptions().position(listRoutes.get(0)).icon(BitmapDescriptorFactory.fromResource(R.drawable.ic_car_marker_15)));
marker.setAnchor(0.5f, 0.5f);
marker.setFlat(true);
MarkerAnimation.rotateMarker(marker, new Random().nextFloat() * 360.0f);
MarkerAnimation.fadeInMarker(this, marker, true);
index = -1;
handler.postDelayed(runnable,1000);
}
public void updateMarker(Marker marker, LatLng newLocaiton) {
if (marker != null) {
Location prevLoc = new Location("gps");prevLoc.setLatitude(marker.getPosition().latitude);
prevLoc.setLongitude(marker.getPosition().longitude);
Location newLoc = new Location("gps");
newLoc.setLatitude(newLocaiton.latitude);
newLoc.setLongitude(newLocaiton.longitude);
MarkerAnimation.animateMarker(newLoc, marker);
double bearing = MarkerAnimation.getBearing(marker.getPosition(), new LatLng(newLoc.getLatitude(), newLoc.getLongitude()));
if (bearing > 0.0d) {
MarkerAnimation.rotateMarker(marker, (float) bearing);
}
}
}

when we call startAnimation() function. The animation will be animate and marker will smoothly move from A position to B position. Easy, right?

Todos

• Display a route animation to connect A to B position
• Display window Marker animation

All things are the same with Uber done.

###License

MIT