Animated User LocationPuck

[MarcoSanz12]

Hi, I’m trying to implement the user location indicator with a small animation, but I can’t get the transition to look smooth. For some reason, the interpolated positions cause a jitter on the vertical axis.

Any idea how this could be done? I’ve seen the example in the Native documentation, but I can’t get it to work here in Compose 🙏.

This is the interpolated location between 2 fixed coordinates

// latLng is the latest user position detected, updated every few seconds
@MaplibreComposable
@Composable
fun LocationPuck(latLng: LatLng) {
    val positionAnimator = remember {
        Animatable(Position(latLng.longitude, latLng.latitude), PositionConverter)
    }
    LaunchedEffect(latLng) {
        launch {
            positionAnimator.animateTo(
                targetValue =  Position(longitude = latLng.longitude, latitude = latLng.latitude),
                animationSpec = tween(
                    durationMillis = LocationProvider.CONTINUOUS_LOCATION_UPDATE_INTERVAL_MS.toInt(),
                    easing = LinearEasing
                )
            )
        }
    }
    val featurePoint by remember(positionAnimator.value) {
        derivedStateOf {
            Feature(
                geometry = Point(positionAnimator.value),
            )
        }
    }
    val source = rememberGeoJsonSource(
        data = GeoJsonData.Features(featurePoint)
    )
    LocationPuckLayers(
        locationSource = source,
        accuracy = 5.5,
        metersPerDp = 0.0
    )
}

[sargunv]

How does your PositionConverter work? I assume it's converting the lat/long into single-precision (32 bit) floats, which are inherently imprecise at the scale of earth lat/lon. Last I checked, Compose doesn't have animation helpers that operate on double-precision (64 bit) floats.

You could mitigate the floating point imprecision somewhat by offsetting the lat/lon so the numbers are closer to zero (essentially, lat/lon relative to some point near where you're animating). This is known as a "floating origin".

Or perhaps animate some tweening value between 0-1, and use that value to transform the point along its path (origin at 0, destination at 1).

[MarcoSanz12]

You were right — it was the loss of precision when converting between Float and Double.
I followed your idea of interpolating the fraction from 0 to 1 to get the coordinates, and now it’s perfectly smooth.
Thanks!!

@MaplibreComposable
@Composable
fun LocationPuck(location: Location, metersPerDp: Double) {
    // Interpolated location
    val interpolatedLocation by animateLocationAsState(targetLocation = location)

    var featurePoint by remember(interpolatedLocation) {
        mutableStateOf(
            Feature(
                geometry = Point(
                    coordinates = Position(
                        latitude = interpolatedLocation.latitude,
                        longitude = interpolatedLocation.longitude
                    )
                ),
            )
        )
    }

    val source = rememberGeoJsonSource(
        data = GeoJsonData.Features(featurePoint)
    )

    LocationPuckLayers(
        locationSource = source,
        accuracy = interpolatedLocation.accuracy,
        metersPerDp = metersPerDp
    )
}

@Composable
private fun animateLocationAsState(targetLocation: Location): State<Location> {
    // Last location
    var previousLocation by remember { mutableStateOf(targetLocation) }
    // Current progress location
    val animatedLocation = remember { mutableStateOf(targetLocation) }

    LaunchedEffect(targetLocation) {
        animate(
            initialValue = 0f,
            targetValue = 1f,
            animationSpec = tween(
                durationMillis = (LocationProvider.CONTINUOUS_LOCATION_UPDATE_INTERVAL_MS).toInt(),
                easing = LinearEasing
            ),
        ) { fraction, _ ->
            val latitude = lerp(previousLocation.latitude, targetLocation.latitude, fraction)
            val longitude = lerp(previousLocation.longitude, targetLocation.longitude, fraction)
            val accuracy =  androidx.compose.ui.util.lerp(previousLocation.accuracy, targetLocation.accuracy, fraction)

            // Update interpolated location
            animatedLocation.value = Location("eased").apply {
                this.latitude = latitude
                this.longitude = longitude
                this.accuracy = accuracy
            }
        }
    }

    // Update saved location with the current progress
    DisposableEffect(targetLocation) {
        onDispose {
            previousLocation = animatedLocation.value
        }
    }

    return animatedLocation
}