CODEWITHSUNDEEP
androidgoogle-mapsanimation
Jatin
Jatin

Reputation: 1670

Circle animation on google map in android

doing circle animation on google map using valu animation but animation gets flickered and blinking all the time.

Here is a code,

 CircleOptions circleOptions = new CircleOptions()
                .center(searchStopPoint)   //set center
                .radius(100)   //set radius in meters
                .strokeColor(Color.TRANSPARENT)
                .fillColor(0x555751FF)
                .strokeWidth(5);

    busStopCircle = googleMap.addCircle(circleOptions);
    ValueAnimator valueAnimator = new ValueAnimator();
    valueAnimator.setRepeatCount(ValueAnimator.INFINITE);
    valueAnimator.setRepeatMode(ValueAnimator.RESTART);
    valueAnimator.setIntValues(0, 100);
    valueAnimator.setDuration(3000);
    valueAnimator.setEvaluator(new IntEvaluator());
    valueAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
    valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator valueAnimator) {
            float animatedFraction = valueAnimator.getAnimatedFraction();              
            busStopCircle.setRadius(animatedFraction * 100);
        }
    });

    valueAnimator.start();

Can anyone helps me to to make it smooth animation without flickering..

Thanks

Upvotes: 11

Views: 4800

Answers (2)

superpav
superpav

Reputation: 55

Although Google claims the issue has been fixed, I can confirm that as of today any Circle primitive added whether via android-maps-compose or via vanilla maps api is poorly optimized for animation, causing a lot of dropped frames and overall "stuttering" of the application even if it has barely any UI.

Using GroundOverlay instead of a Circle solved the issue for me, albeit I had hoped for more smoothness. It really amazes me how huge of a gap there is between the capabilities of the official Google Maps app (buttery smooth animations) and the janky Google Maps API that cannot even return LatLng of the Point of Interest when it's clicked (it returns the latlng of the tap contrary to what their documentation says).

P.S. I couldn't add a comment due to low reputation, so I had to post it as an answer.

Upvotes: 0

Neeraj
Neeraj

Reputation: 2558

This is a known issue. One workaround would be to use a GroundOverlay instead of a circle.
Here's a sample:
Create the circle :

// The drawable to use for the circle
    GradientDrawable d = new GradientDrawable();
    d.setShape(GradientDrawable.OVAL);
    d.setSize(500,500);
    d.setColor(0x555751FF);
    d.setStroke(5, Color.TRANSPARENT);

    Bitmap bitmap = Bitmap.createBitmap(d.getIntrinsicWidth()
            , d.getIntrinsicHeight()
            , Bitmap.Config.ARGB_8888);

    // Convert the drawable to bitmap
    Canvas canvas = new Canvas(bitmap);
    d.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
    d.draw(canvas);

    // Radius of the circle
    final int radius = 100;

    // Add the circle to the map
    final GroundOverlay circle = map.addGroundOverlay(new GroundOverlayOptions()
    .position(searchStopPoint, 2 * radius).image(BitmapDescriptorFactory.fromBitmap(bitmap)));

Now animate the circular overlay :

ValueAnimator valueAnimator = new ValueAnimator();
    valueAnimator.setRepeatCount(ValueAnimator.INFINITE);
    valueAnimator.setRepeatMode(ValueAnimator.RESTART);
    valueAnimator.setIntValues(0, radius);
    valueAnimator.setDuration(3000);
    valueAnimator.setEvaluator(new IntEvaluator());
    valueAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
    valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator valueAnimator) {
            float animatedFraction = valueAnimator.getAnimatedFraction();
            circle.setDimensions(animatedFraction * radius * 2);
        }
    });

    valueAnimator.start();

UPDATE : This issue has been fixed

Upvotes: 6

Related Questions