Animowane przezroczyste kółko w Google Maps v2 NIE jest prawidłowo animowane.

Question

Udało mi się animować podstawowe koło w Google Maps w Mapach Google na Androida, ale chciałem zrobić krok naprzód. Chciałbym, żeby animowane koło było podobne do animowanych kółek Tinders, czy to możliwe?

Przykład: http://jsfiddle.net/Y3r36/9/

Teraz jestem coraz niespokojny animację, która jest bardzo nie do przyjęcia. Tu jest mój kodu:

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

Jestem otwarty na wszelkie sugestie. Dziękuję

Answer 1

Podobno istnieją dwie biblioteki GitHub, które mogą być użyte do stworzenia tego odzew na markery, jeżeli są stosowane prawidłowo:

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

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

Answer 2

niespokojny animacja jest known issue. Aby obejść ten problem, można użyć kręgu GroundOverlay.

Oto przykład, aby uzyskać pożądany efekt wymienić:

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

Teraz za odzew:

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

UPDATE: Ten problem has been fixed

Answer 3

Im przy this library:

See the marker

Wystarczy:

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

}