I want to add an animated circle to Google Maps view similar to the circle you see on this image.
The circle should be pulsing from the center to the largest radius indicating current user's location and the area of searching.
Here is relevant code block
Circle circle = mMap.addCircle(new CircleOptions()
.center(new LatLng(lat, lon))
.strokeColor(Color.CYAN).radius(1000));
valueAnimator = new ValueAnimator();
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
float animatedFraction = valueAnimator.getAnimatedFraction();
circle.setRadius(animatedFraction * 1000);
circle.setStrokeWidth(1 + animatedFraction * 7);
}
});
With this code I am only able to see static circle stroke without any animation.
Any help will be appreciated. Thanks in advance.
Simply :)
final Circle circle = MAP.addCircle(new CircleOptions().center(EGYPT)
.strokeColor(Color.CYAN).radius(100));
ValueAnimator vAnimator = new ValueAnimator();
vAnimator.setRepeatCount(ValueAnimator.INFINITE);
vAnimator.setRepeatMode(ValueAnimator.RESTART); /* PULSE */
vAnimator.setIntValues(0, 100);
vAnimator.setDuration(1000);
vAnimator.setEvaluator(new IntEvaluator());
vAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
vAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
float animatedFraction = valueAnimator.getAnimatedFraction();
// Log.e("", "" + animatedFraction);
circle.setRadius(animatedFraction * 100);
}
});
vAnimator.start();
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With