Google地圖v2上的動畫透明圓圈無法正確制作動畫

Question

我能夠在Android Google Maps v2上為一個基本圈子設置動畫，但我想向前邁進一步。 我希望動畫圈與Tinders動畫圈類似，這可能嗎？

示例： http ： //jsfiddle.net/Y3r36/9/

現在，我得到一個非常不可接受的煩躁動畫。 這是我的代碼：

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

我願意接受任何建議。 謝謝

Answer 1

煩躁的動畫是一個已知的問題 。 若要解決此問題，您可以使用GroundOverlay而不是圓。

這是獲得您提到的效果的示例：

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

現在為漣漪效應：

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

更新 ：此問題已得到修復

Answer 2

顯然，如果使用正確，有兩個github庫可用於在標記上創建這種漣漪效應：

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

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

Answer 3

我正在使用這個庫 ：

看標記

只是：

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

}

Answer 4

它簡單的家伙

首先，你需要在課堂外使用GroundOverlay對象和radius對象

 GroundOverlay circle;
 int radius = 100000;

然后創建valueanimator對象並啟動它

 final ValueAnimator valueAnimator = new ValueAnimator();
        valueAnimator.setRepeatCount(ValueAnimator.INFINITE);
        valueAnimator.setRepeatMode(ValueAnimator.RESTART);
        valueAnimator.setIntValues(0, radius);
        valueAnimator.setDuration(3000);
        valueAnimator.setEvaluator(new IntEvaluator());
        valueAnimator.setInterpolator(new AccelerateDecelerateInterpolator());

然后使用以下代碼顯示animatino

circle = mMap.addGroundOverlay(new GroundOverlayOptions()
                        .position(marker.getPosition(), 2 * radius).image(BitmapDescriptorFactory.fromBitmap(drawcircle())));



                valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator valueAnimator) {
                        float animatedFraction = valueAnimator.getAnimatedFraction();
                        circle.setDimensions(animatedFraction * radius * 2);
                    }
                });

                valueAnimator.start();

Answer 5

根據miss neha的問題

是的，可以使用標記

按照上面的回答和

將動畫代碼寫入OnMarkerClick事件

喜歡

 if(circle!=null)
                {
                    circle.remove();
                }


                circle = mMap.addGroundOverlay(new GroundOverlayOptions()
                        .position(marker.getPosition(), 2 * radius).image(BitmapDescriptorFactory.fromBitmap(drawcircle())));



                valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator valueAnimator) {
                        float animatedFraction = valueAnimator.getAnimatedFraction();
                        circle.setDimensions(animatedFraction * radius * 2);
                    }
                });

                valueAnimator.start();