Animated Transparent Circle su Google Maps v2 NON sta animando correttamente

Question

Sono stato in grado di animare un cerchio di base su Android Google Maps v2, ma volevo fare un passo avanti. Volevo che il cerchio animato fosse simile ai cerchi animati di Tinders, è possibile?

Esempio: http://jsfiddle.net/Y3r36/9/

In questo momento, sto ottenendo un'animazione irrequieto che è molto inaccettabile. Qui è il mio codice:

public void onMapReady(GoogleMap map) { 
 
     double latitude = 33.750587; 
 
     double longitude = -84.4199173; 
 

 
     LatLng latLng = new LatLng(latitude,longitude); 
 

 
     map.moveCamera(CameraUpdateFactory.newLatLng(latLng)); 
 
     map.animateCamera(CameraUpdateFactory.zoomTo(13)); 
 
     map.addMarker(new MarkerOptions() 
 
       .position(new LatLng(latitude, longitude)) 
 
       .title("Marker")); 
 

 

 
     final Circle circle = mMap.addCircle(new CircleOptions() 
 
       .center(new LatLng(latitude,longitude)) 
 
       .radius(50).fillColor(0x5500ff00).strokeWidth(0) 
 
     ); 
 
     ValueAnimator valueAnimator = new ValueAnimator(); 
 
     valueAnimator.setRepeatCount(ValueAnimator.INFINITE); 
 
     valueAnimator.setRepeatMode(ValueAnimator.RESTART); 
 
     valueAnimator.setIntValues(0, 100); 
 
     valueAnimator.setDuration(1000); 
 
     valueAnimator.setEvaluator(new IntEvaluator()); 
 
     valueAnimator.setInterpolator(new AccelerateDecelerateInterpolator()); 
 
     valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { 
 
      @Override 
 
      public void onAnimationUpdate(ValueAnimator valueAnimator) { 
 
       float animatedFraction = valueAnimator.getAnimatedFraction(); 
 
       Log.e("", "" + animatedFraction); 
 
       circle.setRadius(animatedFraction * 100); 
 
      } 
 
     }); 
 
     valueAnimator.start();

Sono aperto a qualsiasi suggerimento. Grazie

Answer 1

quanto pare ci sono due librerie GitHub che possono essere utilizzati per creare questo effetto a catena sui marcatori, se usato correttamente:

https://github.com/skyfishjy/android-ripple-background

https://github.com/markushi/android-circlebutton

Answer 2

L'animazione è un irrequieto known issue. Per ovviare a questo problema, è possibile utilizzare uno GroundOverlay anziché il cerchio.

Ecco un esempio per ottenere l'effetto che lei ha citato:

private static final int DURATION = 3000; 
private void showRipples(LatLng latLng) { 
    GradientDrawable d = new GradientDrawable(); 
    d.setShape(GradientDrawable.OVAL); 
    d.setSize(500,500); 
    d.setColor(0x5500ff00); 
    d.setStroke(0, 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 = 50; 

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

    // Prep the animator 
    PropertyValuesHolder radiusHolder = PropertyValuesHolder.ofFloat("radius", 0, radius); 
    PropertyValuesHolder transparencyHolder = PropertyValuesHolder.ofFloat("transparency", 0, 1); 

    ValueAnimator valueAnimator = new ValueAnimator(); 
    valueAnimator.setRepeatCount(ValueAnimator.INFINITE); 
    valueAnimator.setRepeatMode(ValueAnimator.RESTART); 
    valueAnimator.setValues(radiusHolder, transparencyHolder); 
    valueAnimator.setDuration(DURATION); 
    valueAnimator.setEvaluator(new FloatEvaluator()); 
    valueAnimator.setInterpolator(new AccelerateDecelerateInterpolator()); 
    valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { 
     @Override 
     public void onAnimationUpdate(ValueAnimator valueAnimator) { 
      float animatedRadius = (float) valueAnimator.getAnimatedValue("radius"); 
      float animatedAlpha = (float) valueAnimator.getAnimatedValue("transparency"); 
      circle.setDimensions(animatedRadius * 2); 
      circle.setTransparency(animatedAlpha); 
     } 
    }); 

    // start the animation 
    valueAnimator.start(); 
} 

Ora per l'effetto a catena:

showRipples(latLng); 
    new Handler().postDelayed(new Runnable() { 
     @Override 
     public void run() { 
      showRipples(latLng); 
     } 
    }, DURATION - 500); 

UPDATE: Questo problema has been fixed

Answer 3

Im usando this library:

See the marker

Just:

private void initRadar(Location location){ 
    mapRadar = new MapRadar(map, new LatLng(location.getLatitude(),location.getLongitude()),getContext()); 
    mapRadar.withDistance(2000); 
    mapRadar.withClockwiseAnticlockwiseDuration(2); 
    //mapRadar.withOuterCircleFillColor(Color.parseColor("#12000000")); 
    mapRadar.withOuterCircleStrokeColor(ContextCompat.getColor(getContext(),R.color.primary)); 
    //mapRadar.withRadarColors(Color.parseColor("#00000000"), Color.parseColor("#ff000000")); //starts from transparent to fuly black 
    mapRadar.withRadarColors(ContextCompat.getColor(getContext(),R.color.blue_light), ContextCompat.getColor(getContext(),R.color.blue_dark)); //starts from transparent to fuly black 
    //mapRadar.withOuterCircleStrokewidth(7); 
    //mapRadar.withRadarSpeed(5); 
    mapRadar.withOuterCircleTransparency(0.5f); 
    mapRadar.withRadarTransparency(0.5f); 
    mapRadar.startRadarAnimation(); 

}