Googleマップでポインタをアニメーション化する方法


この記事はGoogleマップ上のポインタ移動のアニメーションを表示することです.
マップ上のポインタの動きのアニメーションを行うための多くの方法があります、この記事は、反応ネイティブマップを使用することに焦点を当てています.この動画にはMapView、マーカー、AnimatedRegionを使用します.
ここでは、この記事の最後に作成します.

このアニメーションを作成するには、緯度と経度の値を持つ位置配列を使用します.
〔緯度〕20.93289777777778
我々は4秒ごとに州の位置を更新しますので、次のポインタ値を取得し、地図上にアニメーション化します.
コードサンプル
const [location  ,setlocation ]=useState(0); 

 useEffect(() => {                
        const interval = setInterval(() => { 
             getLocation()

        },4000);
        return () => clearInterval(interval)       
    })

const getLocation =  () => {   
        console.log("get live location after 4 second")
let i=0; 
var locationArray=[             
{latitude:20.752219999999998,longitude:79.75849777777778},
{latitude:20.75269111111111,longitude:79.75815999999999},
{latitude:20.75293111111111,longitude:79.75798222222222}, 
{latitude:20.754004444444444,longitude:79.75805333333334},
]
const { latitude, longitude } =locationArray[i+1];
animate(latitude, longitude);
}

const animate = (latitude, longitude) => {
        const newCoordinate = {latitude, longitude};
        if(Platform.OS == 'android'){
            if(markerRef.current){
            markerRef.current.animateMarkerToCoordinate(newCoordinate, 7000);
            }
        }else{
            coordinate.timing(newCoordinate).start();
        }
    }
完全なコードはhttps://github.com/swapnilwatkar/GoogleMap-Animation/blob/main/MapScreen.jsにあります