Android 中 Google 地图标记周围的脉冲环动画 [英] Pulse ring animation around a Google Maps marker in Android

问题描述

我想在 Android google mapFragment(如 Uber)中的蓝点当前用户位置上添加脉冲环动画.

I want to add a pulse ring animation on blue dot current user location in Android google mapFragment (like Uber).

有人可以帮我解决这个问题吗?

Can anybody help me with this thing?

推荐答案

我找到了向标记添加脉动动画的解决方案.这是地图部分，这里的变量map"表示您的地图.

I have found a solution to add pulsating animation to a marker. Here is the map part, Here variable "map" denotes your map.

private Circle lastUserCircle;
private long pulseDuration = 1000;
private ValueAnimator lastPulseAnimator;

private void addPulsatingEffect(LatLng userLatlng){
           if(lastPulseAnimator != null){
                lastPulseAnimator.cancel();
                Log.d("onLocationUpdated: ","cancelled" );
            }
            if(lastUserCircle != null)
                lastUserCircle.setCenter(userLatlng);
            lastPulseAnimator = valueAnimate(userLocation.getAccuracy(), pulseDuration, new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    if(lastUserCircle != null)
                        lastUserCircle.setRadius((Float) animation.getAnimatedValue());
                    else {
                        lastUserCircle = map.addCircle(new CircleOptions()
                                .center(userLatlng)
                                .radius((Float) animation.getAnimatedValue())
                                .strokeColor(Color.RED)
                                .fillColor(Color.BLUE));
                    }
                }
            }); 

}
protected ValueAnimator valueAnimate(float accuracy,long duration, ValueAnimator.AnimatorUpdateListener updateListener){
        Log.d( "valueAnimate: ", "called");
        ValueAnimator va = ValueAnimator.ofFloat(0,accuracy);
        va.setDuration(duration);
        va.addUpdateListener(updateListener);
        va.setRepeatCount(ValueAnimator.INFINITE);
        va.setRepeatMode(ValueAnimator.RESTART);

        va.start();
        return va;
    }

您必须通过添加 PositionChangedListener 在位置更新时调用它.您可以在 Google 地图文档中轻松找到.之后，每次更新调用上述方法.

You have to call this on location updates by adding PositionChangedListener. You can easily find that in Google map docs. After that, for each update call the above method.

将脉冲半径固定为大致相同的值，使其既不太大也不太小

写这个方法

protected float getDisplayPulseRadius(float radius) {
        float diff = (map.getMaxZoomLevel() - map.getCameraPosition().zoom);
        if (diff < 3)
            return radius;
        if (diff < 3.7)
            return radius * (diff / 2);
        if (diff < 4.5)
            return (radius * diff);
        if (diff < 5.5)
            return (radius * diff) * 1.5f;
        if (diff < 7)
            return (radius * diff) * 2f;
        if (diff < 7.8)
            return (radius * diff) * 3.5f;
        if (diff < 8.5)
            return (float) (radius * diff) * 5;
        if (diff < 10)
            return (radius * diff) * 10f;
        if (diff < 12)
            return (radius * diff) * 18f;
        if (diff < 13)
            return (radius * diff) * 28f;
        if (diff < 16)
            return (radius * diff) * 40f;
        if (diff < 18)
            return (radius * diff) * 60;
        return (radius * diff) * 80;
    }

并改变这一行

userLocation.getAccuracy()

到

getDisplayPulseRadius(userLocation.getAccuracy()

还有

.radius((Float) animation.getAnimatedValue())

到

.radius(getDisplayPulseRadius((Float) animation.getAnimatedValue()))

如果您想要颜色变大时逐渐变透明的效果，您可以在下一行中使用它，您可以在动画师内设置半径

If you want an effect like the color fades to transparent when it gets big, you can use this just in the next line where you are setting the radius inside the animator

circle.setFillColor(adjustAlpha(pulseAroundMeFillColor, 1 - animation.getAnimatedFraction()));

private int adjustAlpha(int color, float factor) {
        int alpha = Math.round(Color.alpha(color) * factor);
        int red = Color.red(color);
        int green = Color.green(color);
        int blue = Color.blue(color);
        return Color.argb(alpha, red, green, blue);
    }

这篇关于Android 中 Google 地图标记周围的脉冲环动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！