动画不适用于多段线？

Question

我正在用 animation 创建 polyline 并且在 onLocationChanged() 正在创建 polyline。每次调用 onLocationChanged() 时，都会创建一个新的 polyline。

Note:动画就像：第一个黑色线将移动到源到目的地和animation然后是灰色线。问题是，它有时工作正常。但是一段时间后黑线不可见，只显示灰线动画。

供参考，请参阅附件。在 gif 中，您可以看到前四次效果很好，之后您会注意到，黑线不可见。它是看不见的，因为它在灰线后面。

这是我的 onLocationChanged() 方法：

    @Override
    public void onLocationChanged(final Location location) {
        super.onLocationChanged(location);
        mLat = location.getLatitude();
        mLng = location.getLongitude();

        LatLng myLatLngCurrentONlocationChnage = new LatLng(mLat, mLng);

        if (btnYesBooking || isBookingReserve) {
            mSearchComplete.setVisibility(View.GONE);
            String url = getDirectionsUrl(myLatLngCurrentONlocationChnage, myLatLngFinalDestinationClicked);

            DownloadTask downloadTask = new DownloadTask();

            // Start downloading json data from Google Directions API
            downloadTask.execute(url);

            myDestinationBookingMarker = mGoogleMap.addMarker(new MarkerOptions()
                    .position(myLatLngFinalDestinationClicked)
                    .icon(BitmapDescriptorFactory.fromResource(R.drawable.red_pin)));
            addMarker(mGoogleMapCar, mLat, mLng);
}

请查看 onPostExecute() 方法，其中实现了 animation 代码。

        @Override
        protected void onPostExecute(List<List<HashMap<String, String>>> result) {

            PolylineOptions lineOptions = null;
            if (result != null) {
                // Traversing through all the routes
                for (int i = 0; i < result.size(); i++) {
                    points = new ArrayList<LatLng>();
                    lineOptions = new PolylineOptions();

                    // Fetching i-th route
                    final List<HashMap<String, String>> path = result.get(i);

                    // Fetching all the points in i-th route
                    for (int j = 0; j < path.size(); j++) {
                        HashMap<String, String> point = path.get(j);
                        if (j == 0) {    // Get distance from the list
                            estimateDistance = (String) point.get("distance");

                            continue;
                        } else if (j == 1) { // Get duration from the list
                            estimeteDuration = (String) point.get("duration");
                            continue;
                        }

                        double lat = Double.parseDouble(point.get("lat"));
                        double lng = Double.parseDouble(point.get("lng"));
                        LatLng position = new LatLng(lat, lng);
                        // points.clear();
                        points.add(position);
                    }


                    if (estimeteDuration != null) {
                        mTvEstimatedTime.setText("Estimated Time to reach: " + estimeteDuration);
                        mSearchComplete.setVisibility(View.GONE);
                        mTxtEstimateArrivalTime.setText(estimeteDuration);


                    }
                    mTvEstimatedTime.setVisibility(View.VISIBLE);
                    mTxtEstimateArrivalTime.setVisibility(View.VISIBLE);
                    mRecyclerViewHotspot.setVisibility(View.GONE);
                    mDetailLayout.setVisibility(View.GONE);
                    mParkingdetailLayout.setVisibility(View.GONE);

                    lineOptions.addAll(points);
                }

                LatLngBounds.Builder builder = new LatLngBounds.Builder();
                for (LatLng latLng : points) {
                    builder.include(latLng);
                }
                polylineOptions = new PolylineOptions();
                polylineOptions.color(Color.GRAY);
                polylineOptions.width(12);
                polylineOptions.startCap(new SquareCap());
                polylineOptions.endCap(new SquareCap());
                polylineOptions.jointType(ROUND);
                polylineOptions.addAll(points);
                greyPolyLine = mGoogleMap.addPolyline(polylineOptions);

                blackPolylineOptions = new PolylineOptions();
                blackPolylineOptions.width(12);
                blackPolylineOptions.color(Color.BLACK);
                blackPolylineOptions.startCap(new SquareCap());
                blackPolylineOptions.endCap(new SquareCap());
                blackPolylineOptions.jointType(ROUND);

                blackPolyline = mGoogleMap.addPolyline(blackPolylineOptions);
                polylineAnimator = ValueAnimator.ofInt(0, 100);
                polylineAnimator.setDuration(700);
                polylineAnimator.setInterpolator(new LinearInterpolator());
                polylineAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator valueAnimator) {

                        List<LatLng> points = greyPolyLine.getPoints();
                        int percentValue = (int) valueAnimator.getAnimatedValue();
                        int size = points.size();
                        int newPoints = (int) (size * (percentValue / 100.0f));
                        List<LatLng> p = points.subList(0, newPoints);
                        blackPolyline.setPoints(p);


                    }
                });


                polylineAnimator.addListener(new Animator.AnimatorListener() {
                    @Override
                    public void onAnimationStart(Animator animation) {

                    }

                    @Override
                    public void onAnimationEnd(Animator animation) {
                        List<LatLng> greyLatLng = greyPolyLine.getPoints();
                        if (greyLatLng != null) {
                            greyLatLng.clear();

                        }
                        polylineAnimator.start();

                    }

                    @Override
                    public void onAnimationCancel(Animator animation) {
                        polylineAnimator.cancel();
                    }

                    @Override
                    public void onAnimationRepeat(Animator animation) {

                    }
                });

                polylineAnimator.start();


            }
            mGoogleMap.getUiSettings().setZoomGesturesEnabled(false);
            zoomRoute(mGoogleMap, points);

        }

知道我做错了什么吗？谢谢！

Answer 1

您可以为黑线设置 zIndex 以确保绘制在灰线上。

如the documentation所述：

An overlay with a larger z-index is drawn over overlays with smaller z-indices. The order of overlays with the same z-index is arbitrary. The default zIndex is 0.

您可以使用 blackPolylineOptions 对象设置行的 zIndex：

blackPolylineOptions.zIndex(5f); // Using 5 as an example, anything greater than 0 (the default) will work

动画不适用于多段线？

Animation not working fine with polyline?

android

google-maps

android-animation

google-polyline