Skip to content
Nutiteq edited this page Jul 17, 2013 · 3 revisions

There are multiple options to animate map elements: using a Thread which changes values, or Android Animators where you can use built-in effects like bounding. Here are two samples showing both methods with Markers, but you can use similar methods for other map elements (Lines, Polygons, Points, Texts) as well.

Style animation

One of the common cases is to animate marker style (this includes color, size, bitmap) when added to the map. The following code builds list of different marker styles and then steps through these styles at 60 frames per second:

        // Create marker styles. Each style has different size,
        // but any other parameter (color, bitmap, etc) can be animated likewise
        Bitmap pointMarker = UnscaledBitmapLoader.decodeResource(getResources(), R.drawable.olmarker);
        MarkerStyle.Builder<?> markerStyleBuilder = MarkerStyle.builder().setBitmap(pointMarker).setColor(Color.WHITE);
        final List<MarkerStyle> markerStyles = new ArrayList<MarkerStyle>();
        for (int i = 0; i < 100; i++) {
          markerStyles.add(markerStyleBuilder.setSize(i * 0.005f).build());
        }

        // Create marker
        MapPos markerLocation = proj.fromWgs84(24.5f, 58.3f);
        final Marker marker = new Marker(markerLocation, markerLabel, markerStyles.get(0), null);
        markerLayer.add(marker);

        // Start marker animation
        new Thread() {
          int counter = 0;

          public void run() {
            // Loop through all marker styles at roughly 60 frames per second
            while (counter < markerStyles.size()) {
              mapActivity.runOnUiThread(new Runnable() {
                @Override
                public void run() {
                  marker.setStyle(markerStyles.get(counter));
                }
              });
              try {
                Thread.sleep(1000 / 60); // target 60fps
              } catch (InterruptedException e) { }
              counter++;
            }
          }
        }.start();

Location animation

It is also possible to use interpolated keyframe animations. The following snippet moves marker from one location to another. It uses PropertyValuesHolder and ObjectAnimator classes that came with API Level 11 (Android 3.0). For older Android versions, support library is available from http://nineoldandroids.com/

        // Define start and end keyframes
        MapPos markerLocation0 = proj.fromWgs84(24.5f, 58.3f);
        MapPos markerLocation1 = proj.fromWgs84(15.5f, 67.3f);
        Keyframe[] markerLocationKeyframes = new Keyframe[] {
          Keyframe.ofObject(0.0f, markerLocation0),
          Keyframe.ofObject(1.0f, markerLocation1)
        };
        
        // Create property values holder for "mapPos" property and set custom evaluator for MapPos type
        PropertyValuesHolder markerLocationPVHolder = PropertyValuesHolder.ofKeyframe("mapPos", markerLocationKeyframes);
        markerLocationPVHolder.setEvaluator(new TypeEvaluator() {
          public Object evaluate(float fraction, Object startValue, Object endValue) {
            MapPos pos0 = (MapPos) startValue;
            MapPos pos1 = (MapPos) endValue;
            return new MapPos(pos0.x + (pos1.x - pos0.x) * fraction, pos0.y + (pos1.y - pos0.y) * fraction);
          }
        });
        
        // Create object animator for the marker using marker PVH and start the animation 
        ObjectAnimator animator = ObjectAnimator.ofPropertyValuesHolder(marker, markerLocationPVHolder);
        animator.setDuration(2000); // duration 2000ms
        // Make it to bounce
        animator.setInterpolator(new BounceInterpolator());
        animator.start();
Clone this wiki locally