将Animate Compose GoogleMap移动到指定位置

Question

我正在开发一个简单的地图应用程序，并尝试使GoogleMap在持续1000毫秒的时间内进行可组合的缩放动画。

到目前为止，我有以下代码：

Column( ... ) {

                val destinationLatLng = LatLng(destination.lat, destination.lng)
                
                val cameraPositionState = rememberCameraPositionState {
                    position = CameraPosition.fromLatLngZoom(destinationLatLng, 15f)

                }

                GoogleMap(
                        modifier = Modifier.fillMaxSize(),
                        cameraPositionState = cameraPositionState
                        //stuck on animating this
                )

            }

在旧版Google地图视图中，我可以使用以下示例代码来动画显示摄像头。

googleMap.animateCamera(CameraUpdateFactory.newCameraPosition), 1000, null)

然而，在Compose中，我无法重新设计以实现缩放动画。

我已查看了Compose Maps SDK和Maps Compose Library的文档，但我仍然卡住了。

请告知是否有一种在Compose GoogleMap中实现相机动画的方法。

- Tonnie

Answer 1

如果您的Composable被组合时只需要一次动画，请使用如下代码所示的LaunchEffect(key1 = true)。

val initialZoom = 6f
val finalZoom = 15f
val destinationLatLng = LatLng(destination.lat, destination.lng)

val cameraPositionState = rememberCameraPositionState {
    position = CameraPosition.fromLatLngZoom(destinationLatLng, initialZoom)
}

LaunchedEffect(key1 = true) {
    cameraPositionState.animate(
        update = CameraUpdateFactory.newCameraPosition(
            CameraPosition(destinationLatLng, finalZoom, 0f, 0f)
        ),
        durationMs = 1000
    )
}

GoogleMap(
    modifier = Modifier.fillMaxSize(),
    cameraPositionState = cameraPositionState
)

- MS2099

---

太棒了，它正在工作！感谢@MS2099的查看。 - Tonnie