How to create the radar animation at the center of Google Map? [closed]

问题

I am trying to give animation like radar for searching effect. I found some third party library for that but its hard to understand. Is any simple way to achieve that.

回答1:

Add this code at you map activity or fragment whatever you use.

private RadarView mapRadar;

Now inside where you place the marker you can use this:

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

now below is our custom view class for the animation

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

   }

  }

Note: i don't know for what reason you need that animation. but i use that, by default marker is place in center of the map. i place map inside the relativelayout and i also place raderView at the center of the RelativeLayout.

now here is your 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"
     />

来源：https://stackoverflow.com/questions/44272668/how-to-create-the-radar-animation-at-the-center-of-google-map