如何在Google Map的中心创建雷达动画? [英] How to create the radar animation at the center of Google Map?

问题描述

我正在尝试使像雷达这样的动画具有搜索效果.我为此找到了一些第三方库，但是很难理解.是实现这一目标的任何简单方法.

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.

推荐答案

在您映射活动或片段片段时添加此代码.

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

   }

  }

注意:我不知道您需要该动画的原因是什么.但我使用它，默认情况下标记位于地图中心.我将地图放置在relativelayout内，还将raderView放置在RelativeLayout的中心.

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.

现在这是您的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"
     />

这篇关于如何在Google Map的中心创建雷达动画?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！