谷歌地图v2上的透明动画圆形未能正确运行动画。

Question

我能够在Android Google Maps v2上实现基本圆形动画，但我想更进一步。我希望动画圆与Tinder的动画圆相似，这可能吗？

示例：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();

我乐意听取任何建议。谢谢。

- LoneProgrammingWolf

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

更新：此问题已修复

- Neeraj

---

@Neeraj：这个可以用，但是当我放大地图时，涟漪动画的大小也会增加。你知道如何保持大小不变吗？谢谢。 - user2234

@Neha，不再需要使用此解决方法，因为问题已经得到修复。现在您可以添加“圆形”而无需出现闪烁问题。 - Neeraj

@Neeraj：我试过使用圆形，但是在我缩放地图时，它会收缩和扩展。我想让它的大小保持不变。 - user2234

@Neeraj 这是我正在面临的问题 https://dev59.com/Ianka4cB1Zd3GeqPKjmr - user2234

@Neha 我猜你可能需要这样的东西 https://dev59.com/inHYa4cB1Zd3GeqPQdRM#39065179？不过你可能需要重新处理答案中的计算。 - Neeraj

@Neeraj：是的，我需要类似的解决方案，谢谢提供链接。我会尝试一下。 - user2234

Answer 2

很简单

首先，你需要在类外声明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());

然后使用以下代码来显示动画

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

- natsujay

Answer 3

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

- natsujay

Answer 4

我正在使用这个库：

查看标记

只需：

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

}

- Pablo Cegarra

---

你知道如何将它与Google地图标记一起使用吗？ - user2234

Answer 5

显然，有两个Github库可以用来在标记上创建这种涟漪效果，如果使用正确：

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

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

- LoneProgrammingWolf

---

你是怎么决定使用这些库来创建Google地图标记的？ - f4b