Animierter transparenter Kreis in Google Maps v2 animiert NICHT korrekt

Question

Ich konnte einen einfachen Kreis auf Android Google Maps v2 animieren, aber ich wollte einen Schritt nach vorne machen. Ich wollte, dass der animierte Kreis ähnlich wie Tinders animierte Kreise ist, ist das möglich?

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

Gerade jetzt, ich bin eine zappelig Animation bekommen, die sehr inakzeptabel ist. Hier ist mein Code:

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();

Ich bin offen für alle Vorschläge. Danke

Answer 1

Anscheinend gibt es zwei Github-Bibliotheken, die verwendet werden, können diese sich allmählich ausbreitende Wirkung auf Markierungen zu erzeugen, wenn sie richtig verwendet:

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

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

Answer 2

Die zappelig Animation ist ein known issue. Um dieses Problem zu umgehen, können Sie anstelle des Kreises GroundOverlay verwenden.

Hier ist eine Probe, die die Wirkung, die Sie erwähnt zu erhalten:

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(); 
} 

Jetzt für den Welleneffekt:

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

UPDATE: Dieses Problem has been fixed

Answer 3

Im mit this library:

See the marker

Nur:

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(); 

}