本文介紹了Google Maps SDK for Android：流暢地將相機(jī)設(shè)置為新位置的動(dòng)畫，渲染沿途的所有瓷磚的處理方法，對(duì)大家解決問題具有一定的參考價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧！

問題描述

背景

許多類似的問題以前似乎在SO上被問過(最明顯的是android google maps not loading the map when using GoogleMap.AnimateCamera()和How can I smoothly pan a GoogleMap in Android?)，但在這些帖子中發(fā)布的答案或評(píng)論都沒有讓我確切地知道如何做到這一點(diǎn)。

我最初以為它會(huì)像調(diào)用animateCamera(CameraUpdateFactory.newLatLng(), duration, callback)一樣簡(jiǎn)單，但像上面第一個(gè)鏈接的op一樣，我得到的只是一個(gè)灰色或非常模糊的貼圖，直到動(dòng)畫完成，即使我將其放慢到幾十秒長(zhǎng)！

我已經(jīng)設(shè)法找到并實(shí)現(xiàn)了this helper class，它很好地允許瓷磚沿途渲染，但即使延遲為0，每個(gè)動(dòng)畫之間也有明顯的延遲。

代碼

好了，是時(shí)候編寫一些代碼了。下面是(稍作修改的)幫助器類：

package com.coopmeisterfresh.googlemaps.NativeModules;

import android.os.Handler;

import com.google.android.gms.maps.CameraUpdate;
import com.google.android.gms.maps.GoogleMap;

import java.util.ArrayList;
import java.util.List;

public class CameraUpdateAnimator implements GoogleMap.OnCameraIdleListener {
    private final GoogleMap mMap;
    private final GoogleMap.OnCameraIdleListener mOnCameraIdleListener;

    private final List<Animation> cameraUpdates = new ArrayList<>();

    public CameraUpdateAnimator(GoogleMap map, GoogleMap.
        OnCameraIdleListener onCameraIdleListener) {
        mMap = map;
        mOnCameraIdleListener = onCameraIdleListener;
    }

    public void add(CameraUpdate cameraUpdate, boolean animate, long delay) {
        if (cameraUpdate != null) {
            cameraUpdates.add(new Animation(cameraUpdate, animate, delay));
        }
    }

    public void clear() {
        cameraUpdates.clear();
    }

    public void execute() {
        mMap.setOnCameraIdleListener(this);
        executeNext();
    }

    private void executeNext() {
        if (cameraUpdates.isEmpty()) {
            mOnCameraIdleListener.onCameraIdle();
        } else {
            final Animation animation = cameraUpdates.remove(0);

            new Handler().postDelayed(() -> {
                if (animation.mAnimate) {
                    mMap.animateCamera(animation.mCameraUpdate);
                } else {
                    mMap.moveCamera(animation.mCameraUpdate);
                }
            }, animation.mDelay);
        }
    }

    @Override
    public void onCameraIdle() {
        executeNext();
    }

    private static class Animation {
        private final CameraUpdate mCameraUpdate;
        private final boolean mAnimate;
        private final long mDelay;

        public Animation(CameraUpdate cameraUpdate, boolean animate, long delay) {
            mCameraUpdate = cameraUpdate;
            mAnimate = animate;
            mDelay = delay;
        }
    }
}

和我實(shí)現(xiàn)它的代碼：

// This is actually a React Native Component class, but I doubt that should matter...?
public class NativeGoogleMap extends SimpleViewManager<MapView> implements
    OnMapReadyCallback, OnRequestPermissionsResultCallback {

    // ...Other unrelated methods removed for brevity

    private void animateCameraToPosition(LatLng targetLatLng, float targetZoom) {
        // googleMap is my GoogleMap instance variable; it
        // gets properly initialised in another class method
        CameraPosition currPosition = googleMap.getCameraPosition();
        LatLng currLatLng = currPosition.target;
        float currZoom = currPosition.zoom;

        double latDelta = targetLatLng.latitude - currLatLng.latitude;
        double lngDelta = targetLatLng.longitude - currLatLng.longitude;

        double latInc = latDelta / 5;
        double lngInc = lngDelta / 5;

        float zoomInc = 0;
        float minZoom = googleMap.getMinZoomLevel();
        float maxZoom = googleMap.getMaxZoomLevel();

        if (lngInc > 15 && currZoom > minZoom) {
            zoomInc = (minZoom - currZoom) / 5;
        }

        CameraUpdateAnimator animator = new CameraUpdateAnimator(googleMap,
            () -> googleMap.animateCamera(CameraUpdateFactory.zoomTo(
            targetZoom), 5000, null));

        for (double nextLat = currLatLng.latitude, nextLng = currLatLng.
            longitude, nextZoom = currZoom; Math.abs(nextLng) < Math.abs(
            targetLatLng.longitude);) {
            nextLat += latInc;
            nextLng += lngInc;
            nextZoom += zoomInc;

            animator.add(CameraUpdateFactory.newLatLngZoom(new
                LatLng(nextLat, nextLng), (float)nextZoom), true);
        }

        animator.execute();
    }
}

問題

有沒有更好的方法來完成這項(xiàng)看似簡(jiǎn)單的任務(wù)？我在想，也許我需要將我的動(dòng)畫移動(dòng)到工作線程或其他什么地方；這會(huì)有幫助嗎？

感謝閱讀(我知道這是一種努力：p)！

更新30/09/2021

我已經(jīng)根據(jù)Andy在評(píng)論中的建議更新了上面的代碼，雖然它可以工作(盡管存在相同的延遲和渲染問題)，但最終的算法需要更復(fù)雜一些，因?yàn)槲蚁肟s小到縱向三角洲的中點(diǎn)，然后隨著旅程的繼續(xù)而返回。

一次完成所有這些計(jì)算，并同時(shí)流暢地渲染所有必要的瓷磚，對(duì)于我正在測(cè)試的廉價(jià)手機(jī)來說，似乎太多了?；蛘哌@是API本身的限制？無論如何，我如何才能使所有這些工作順利進(jìn)行，而不會(huì)在排隊(duì)的動(dòng)畫之間出現(xiàn)任何延遲？

推薦答案

這是我使用您的實(shí)用程序幀播放機(jī)的嘗試。

注意事項(xiàng)：

縮放值基于總步長(zhǎng)(此處設(shè)置為500)進(jìn)行內(nèi)插，并給定起始值和停止值。
Google地圖實(shí)用程序用于根據(jù)分?jǐn)?shù)距離SphericalUtil.interpolate計(jì)算下一個(gè)LNG。
分?jǐn)?shù)距離不應(yīng)是線性函數(shù)，以減少新瓷磚的引入。換句話說，在更高的變焦(更近的距離)下，相機(jī)移動(dòng)的距離更短，而縮小時(shí)相機(jī)的移動(dòng)量(從中心到中心)呈指數(shù)級(jí)增加。這需要更多的解釋…
如您所見，遍歷被一分為二–與距離移動(dòng)的指數(shù)函數(shù)相反。
最遠(yuǎn)的&quot；max&quot；Zoom(壞名字)可以是總距離的函數(shù)-計(jì)算為在中點(diǎn)處包圍整個(gè)路徑。目前，對(duì)于這種情況，它被硬編碼為4。
注意：映射animate函數(shù)不能，因?yàn)樗诿恳徊?/em>都引入了自己的彈跳球效果，這是不受歡迎的。因此，在給定相當(dāng)數(shù)量的步驟后，可以使用move函數(shù)。
此方法嘗試最大限度地減少每一步的磁貼加載，但最終TileLoader是無法(輕松)監(jiān)視的查看限制因素。

// flag to control the animate callback (at completion).
boolean done = false;

private void animateCameraToPosition(LatLng targetLatLng, float targetZoom) {
    CameraPosition currPosition = gMap.getCameraPosition();
    LatLng currLatLng = currPosition.target;

    //meters_per_pixel = 156543.03392 * Math.cos(latLng.lat() * Math.PI / 180) / Math.pow(2, zoom)
    int maxSteps = 500;
    // number of steps between start and midpoint and midpoint and end
    int stepsMid = maxSteps / 2;

    // current zoom
    float initz = currPosition.zoom;
    //TODO maximum zoom (can be computed from overall distance) such that entire path
    //     is visible at midpoint.
    float maxz = 4.0f;
    float finalz = targetZoom;

    CameraUpdateAnimator animator = new CameraUpdateAnimator(gMap, () -> {
        if (!done) {
            gMap.animateCamera(CameraUpdateFactory.
                    zoomTo(targetZoom), 5000, null);
        }
        done = true;

    });

    // loop from start to midpoint

    for (int i = 0; i < stepsMid; i++) {
        // compute interpolated zoom (current --> max) (linear)
        float z = initz - ((initz - maxz) / stepsMid) * i;

        // Compute fractional distance using an exponential function such that for the first
        // half the fraction delta advances slowly and accelerates toward midpoint.
        double ff = (i * (Math.pow(2,maxz) / Math.pow(2,z))) / maxSteps;

        LatLng nextLatLng =
                SphericalUtil.interpolate(currLatLng, targetLatLng, ff);
        animator.add(CameraUpdateFactory.newLatLngZoom(
                nextLatLng, z), false, 0);
    }

    // loop from midpoint to final
    for (int i = 0; i < stepsMid; i++) {
        // compute interpolated zoom (current --> max) (linear)
        float z = maxz + ((finalz - maxz) / stepsMid) * i;
        double ff = (maxSteps - ((i+stepsMid) * ( (Math.pow(2,maxz) / Math.pow(2,z)) ))) / (double)maxSteps;

        LatLng nextLatLng =
                SphericalUtil.interpolate(currLatLng, targetLatLng, ff);

        animator.add(CameraUpdateFactory.newLatLngZoom(
                nextLatLng, z), false, 0);
    }

    animator.add(CameraUpdateFactory.newLatLngZoom(
            targetLatLng, targetZoom), true, 0);

    //

    animator.execute();
}

gMap.moveCamera(CameraUpdateFactory.newLatLngZoom(new LatLng(40.68924, -74.04454), 13.0f));

new Handler().postDelayed(new Runnable() {
        @Override
        public void run() {
            animateCameraToPosition(new LatLng(33.899832, -118.020450), 13.0f);
        }
    }, 5000);

public void execute() {
    mMap.setOnCameraIdleListener(this);
    executeNext();
}

private void executeNext() {
    if (cameraUpdates.isEmpty()) {
        mMap.setOnCameraIdleListener(mOnCameraIdleListener);
        mOnCameraIdleListener.onCameraIdle();
    } else {
        final Animation animation = cameraUpdates.remove(0);
        // This optimization is likely unnecessary since I think the
        // postDelayed does the same on a delay of 0 - execute immediately.
        if (animation.mDelay > 0) {
            new Handler().postDelayed(() -> {
                if (animation.mAnimate) {
                    mMap.animateCamera(animation.mCameraUpdate);
                } else {
                    mMap.moveCamera(animation.mCameraUpdate);
                }
            }, animation.mDelay);
        } else {
            if (animation.mAnimate) {
                mMap.animateCamera(animation.mCameraUpdate);
            } else {
                mMap.moveCamera(animation.mCameraUpdate);
            }
        }
    }
}

// assume initial (40.68924, -74.04454) z=13.0f
gMap.animateCamera(CameraUpdateFactory.newLatLngZoom(new LatLng(33.899832,-118.020450), 13.0f), 30000, null);

    // Turn off this base map and install diagnostic tile provider
    gMap.setMapType(GoogleMap.MAP_TYPE_NONE);
    gMap.addTileOverlay(new TileOverlayOptions().tileProvider(new MyTileProvider(256,256)).fadeIn(true));

public class MyTileProvider extends UrlTileProvider {

    public MyTileProvider(int i, int i1) {
        super(i, i1);
    }

    @Override
    public URL getTileUrl(int x, int y, int zoom) {

        Log.i("tiles","x="+x+" y="+y+" zoom="+zoom);

        try {
            return new URL("http://mt1.google.com/vt/lyrs=m&x="+x+"&y="+y+"&z="+zoom);
        } catch (MalformedURLException e) {
            e.printStackTrace();
            return null;
        }

    }
}

// initial zoom 
x=2411 y=3080 zoom=13
x=2410 y=3080 zoom=13
x=2411 y=3081 zoom=13
x=2410 y=3081 zoom=13
x=2411 y=3079 zoom=13
x=2410 y=3079 zoom=13

x=9 y=12 zoom=5
x=8 y=12 zoom=5
x=9 y=11 zoom=5
x=8 y=11 zoom=5
x=8 y=13 zoom=5
x=9 y=13 zoom=5
x=7 y=12 zoom=5
x=7 y=11 zoom=5
x=7 y=13 zoom=5
x=8 y=10 zoom=5
x=9 y=10 zoom=5
x=7 y=10 zoom=5