Animate a styled line

[Ducktatorrr]

Hey all!

Interested to see if anyone has done any line animation work and wondering how you achieved such. I searched within this repo and couldn't find anything related to it (or I missed something).

I'm interested to animate the line in a way to indicate the direction of a line as the lines indicate a driven route.

Thanks!

[dimfeld]

I’ve done it in a non-open-source project as part of some contract work and it works great. Basically you do what’s in this Mapbox example, just with Svelte components instead of mapbox for the sources/layers/etc: https://docs.mapbox.com/mapbox-gl-js/example/animate-ant-path/

Then instead of calling setPaintProperty you update the paint property on the relevant LineLayer component instead.

Oh and make sure you have some way to detect when to stop calling requestAnimationFrame. That demo doesn't bother since it runs forever but you'll want to make sure that you stop calling it once the page is torn down. Something like this will work if you don't have some other interlock:

let active = true;
onDestroy(() => active = false);

function animateDashArray(timestamp) {
   // the rest of the function

  if(active) {
    requestAnimationFrame(animateDashArray);
  }
}

[Ducktatorrr]

Thanks for that! That solved it. For reference is the code I used below:

<script lang="ts>
	// imports etc...
	
	geoJsonData = {};
	let active = true;
	onDestroy(() => (active = false));
	
	// Create dashArraySequence for line animation
	const dashArraySequence = [
		[0, 4, 3],
		[0.5, 4, 2.5],
		[1, 4, 2],
		[1.5, 4, 1.5],
		[2, 4, 1],
		[2.5, 4, 0.5],
		[3, 4, 0],
		[0, 0.5, 3, 3.5],
		[0, 1, 3, 3],
		[0, 1.5, 3, 2.5],
		[0, 2, 3, 2],
		[0, 2.5, 3, 1.5],
		[0, 3, 3, 1],
		[0, 3.5, 3, 0.5],
	];

	let step = 0;
	const ANIMATION_SPEED = 50; // Speed of the animation

	function animateDashArray(timestamp) {
		// Calculate the new step for the dash array
		const newStep = Math.floor(
			(timestamp / ANIMATION_SPEED) % dashArraySequence.length
		);

		// Update the dash array if the step has changed
		if (newStep !== step) {
			geoJsonData = {
				...geoJsonData,
				properties: {
					...geoJsonData.properties,
					"line-dasharray": dashArraySequence[newStep],
				},
			};
			step = newStep;
		}

		// Continue the animation loop if active
		if (active) {
			requestAnimationFrame(animateDashArray);
		}
	}

	$: if (geoJsonData) {
		requestAnimationFrame(animateDashArray);
	}
</script>

<!-- MapLibre component etc -->
	<GeoJSON data={geoJsonData}>
		<!-- Background line layer -->
		<LineLayer
			layout={{ "line-cap": "round", "line-join": "round" }}
			paint={{
				"line-width": 5,
				"line-color": "#008800",
				"line-opacity": 0.3,
			}}
		/>
		<!-- Animated dashed line layer -->
		<LineLayer
			paint={{
				"line-width": 5,
				"line-color": "#008800",
				"line-opacity": 0.7,
				"line-dasharray": geoJsonData?.properties?.[
					"line-dasharray"
				] || [0, 2],
			}}
		/>
	</GeoJSON>
<!-- Maplibre component end -->

This works like a charm for me but always happy to know if others would approach this differently :)
Thanks again!