android - Google Maps v2 上的动画透明圆圈动画不正确

Question

我能够在 Android Google Maps v2 上为基本圆制作动画，但我想更进一步。 我希望动画圈类似于 Tinder 动画圈，这可能吗？

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

现在，我得到一个非常 Not Acceptable 烦躁动画。这是我的代码:

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

烦躁的动画是known issue .要解决此问题，您可以使用 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);

更新:这个问题has been fixed