如何在Google Map的中心创建雷达动画？

Question

我想给搜索效果像雷达一样的动画。我发现了一些第三方库，但很难理解。有什么简单的方法来实现这一点。

Answer 1

无论您使用什么，在您的地图活动或片段中添加此代码。

Marker marker = mMap.addMarker(new MarkerOptions() 
.position(new LatLng(userSourceLat, userSourceLng)) 
.title("No match Found") 
.snippet("Searching for Match")); 
mapRadar.setShowCircles(true); 
if (mapRadar!= null) mapRadar.startAnimation(); 

现在下面是我们对动画自定义视图类

public class RadarView extends View { 

private final String LOG = "RadarView"; 
private final int POINT_ARRAY_SIZE = 25; 
float alpha = 0; 
Point latestPoint[] = new Point[POINT_ARRAY_SIZE]; 
Paint latestPaint[] = new Paint[POINT_ARRAY_SIZE]; 
android.os.Handler mHandler = new android.os.Handler(); 
private int fps = 100; 
Runnable mTick = new Runnable() { 
    @Override 
    public void run() { 
     invalidate(); 
     mHandler.postDelayed(this, 1000/fps); 
    } 
}; 
private boolean showCircles = true; 

public RadarView(Context context) { 
    this(context, null); 
} 


public RadarView(Context context, AttributeSet attrs) { 
    this(context, attrs, 0); 
} 

public RadarView(Context context, AttributeSet attrs, int defStyleAttr) { 
    super(context, attrs, defStyleAttr); 

    Paint localPaint = new Paint(); 
    localPaint.setColor(getResources().getColor(R.color.colorPrimary)); 
    localPaint.setAntiAlias(true); 
    localPaint.setStyle(Paint.Style.STROKE); 
    localPaint.setStrokeWidth(1.0F); 
    localPaint.setAlpha(0); 

    int alpha_step = 255/POINT_ARRAY_SIZE; 
    for (int i = 0; i < latestPaint.length; i++) { 
     latestPaint[i] = new Paint(localPaint); 
     latestPaint[i].setAlpha(255 - (i * alpha_step)); 
    } 
} 

public void startAnimation() { 
    mHandler.removeCallbacks(mTick); 
    mHandler.post(mTick); 
} 

public void stopAnimation() { 
    mHandler.removeCallbacks(mTick); 
} 

public int getFrameRate() { 
    return this.fps; 
} 

public void setFrameRate(int fps) { 
    this.fps = fps; 
} 

; 

public void setShowCircles(boolean showCircles) { 
    this.showCircles = showCircles; 
} 

@Override 
protected void onDraw(Canvas canvas) { 
    super.onDraw(canvas); 


    int width = getWidth(); 
    int height = getHeight(); 

    int r = Math.min(width, height); 


    //canvas.drawRect(0, 0, getWidth(), getHeight(), localPaint); 

    int i = r/2; 
    int j = i - 1; 
    Paint localPaint = latestPaint[0]; // GREEN 

    if (showCircles) { 
     canvas.drawCircle(i, i, j, localPaint); 
     canvas.drawCircle(i, i, j, localPaint); 
     canvas.drawCircle(i, i, j * 3/4, localPaint); 
     canvas.drawCircle(i, i, j >> 1, localPaint); 
     canvas.drawCircle(i, i, j >> 2, localPaint); 
    } 

    alpha -= 0.5; 
    if (alpha < -360) alpha = 0; 
    double angle = Math.toRadians(alpha); 
    int offsetX = (int) (i + (float) (i * Math.cos(angle))); 
    int offsetY = (int) (i - (float) (i * Math.sin(angle))); 

    latestPoint[0] = new Point(offsetX, offsetY); 

    for (int x = POINT_ARRAY_SIZE - 1; x > 0; x--) { 
     latestPoint[x] = latestPoint[x - 1]; 
    } 


    int lines = 0; 
    for (int x = 0; x < POINT_ARRAY_SIZE; x++) { 
     Point point = latestPoint[x]; 
     if (point != null) { 
      canvas.drawLine(i, i, point.x, point.y, latestPaint[x]); 
     } 
    } 


    lines = 0; 
    for (Point p : latestPoint) if (p != null) lines++; 

    boolean debug = false; 
    if (debug) { 
     StringBuilder sb = new StringBuilder(" >> "); 
     for (Point p : latestPoint) { 
      if (p != null) sb.append(" (" + p.x + "x" + p.y + ")"); 
     } 

     Log.d(LOG, sb.toString()); 
     // " - R:" + r + ", i=" + i + 
     // " - Size: " + width + "x" + height + 
     // " - Angle: " + angle + 
     // " - Offset: " + offsetX + "," + offsetY); 
    } 

    } 

    } 

注：我不知道

private RadarView mapRadar; 

里面你的地方，你可以使用这个标记

现在为什么你需要这个动画。但我使用它，默认标记是放置在地图的中心。我把地图放在relativelayout里面，我也把raderView放在RelativeLayout的中心。

现在这里是你的XML

<RelativeLayout 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:layout_above="@+id/bootomLayout"> 

<fragment 
    android:id="@+id/mapView" 
    class="com.google.android.gms.maps.SupportMapFragment" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" /> 

<your.packagename.RadarView 
    android:id="@+id/radarView" 
    android:layout_width="240dp" 
    android:layout_height="240dp" 
    android:layout_centerInParent="true" 
    />