Android — Create Awesome Animation in Google Maps Compose

https://dribbble.com/shots/2042533-Android-Location-Service

I want to share a simple idea for creating an animation similar to WhatsApp location sharing or even Google Maps current location.

If you’ve ever tried to implement something like this, you must have encountered a simple limitation: we can’t place any Compose component directly within the scope of the GoogleMap component. Only components of type `ComposeNode<MarkerNode, MapApplier>` can be used, such as Polyline, Marker, Circle.

If you want to use any animation within the scope of the GoogleMap component, we need to do it through the properties of the components, changing the size, color, etc.

I’ll share an example to help you better understand the idea.

The basic component:

@Composable
fun PulseComponentAnimation(
    maxPulseSize: Float = 50f,
    minPulseSize: Float = 0f,
    latLng: LatLng
) {

    val infiniteTransition = rememberInfiniteTransition(label = "PulseComponentAnimation")

    val radius by infiniteTransition.animateFloat(
        initialValue = minPulseSize,
        targetValue = maxPulseSize,
        animationSpec = InfiniteRepeatableSpec(
            animation = tween(3000), repeatMode = RepeatMode.Restart
        ),
        label = "radius"
    )

    val alpha by infiniteTransition.animateFloat(
        initialValue = 1f,
        targetValue = 0f,
        animationSpec = InfiniteRepeatableSpec(
            animation = tween(3000),
            repeatMode = RepeatMode.Restart
        ), label = "alpha"
    )

    val newLat = latLng.latitude + -0.00004
    val newLng = latLng.longitude

    MarkerComposable(
        state = MarkerState(position = LatLng(newLat, newLng))
    ) {
        Box(
            modifier = Modifier
                .size(18.dp)
                .background(color = Color(0xff2FAA59), shape = CircleShape)
                .border(width = 2.dp, color = Color.White, shape = CircleShape)
        )
    }

    Circle(
        center = latLng,
        clickable = false,
        fillColor = Color(0xff2FAA59).copy(alpha = alpha),
        radius = radius.toDouble(),
        strokeColor = Color.Transparent,
        strokeWidth = 0f,
        tag = "",
        onClick = { }
    )
}

Now we are ready to simply place the component into the GoogleMap component:

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

            PulseComponentAnimation(latLng = myLocation)
)

I hope this will be helpful to anyone who needs to work with animation on Google Maps Compose.