Vòng tròn trong suốt động trên Google Maps v2 KHÔNG hoạt ảnh chính xác

Question

Tôi đã có thể tạo hoạt ảnh cho một vòng kết nối cơ bản trên Android Google Maps phiên bản 2, nhưng tôi muốn thực hiện nó một bước tiến. Tôi muốn vòng tròn hoạt hình giống với vòng tròn hoạt hình Tinders, có thể không?

Ví dụ: http://jsfiddle.net/Y3r36/9/

Ngay bây giờ, tôi nhận được một hình ảnh động ngồi không yên đó là rất không thể chấp nhận. Đây là mã của tôi:

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

Tôi mở cửa cho bất cứ đề nghị. Cảm ơn bạn

Answer 1

Rõ ràng có hai thư viện github có thể được sử dụng để tạo hiệu ứng gợn này trên mốc, nếu được sử dụng một cách chính xác:

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

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

Answer 2

Các hình ảnh động ngồi không yên là một known issue. Để khắc phục sự cố này, bạn có thể sử dụng GroundOverlay thay vì vòng tròn.

Dưới đây là một ví dụ để có được những hiệu ứng mà bạn đề cập:

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

Bây giờ cho các hiệu ứng gợn:

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

CẬP NHẬT: Vấn đề này has been fixed

Answer 3

Im sử dụng this library:

See the marker

Chỉ:

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

}