Skip to content

Instantly share code, notes, and snippets.

@cs09g
Last active January 3, 2023 20:38
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cs09g/8d3ca19009c79e473f8b57f62f6e7367 to your computer and use it in GitHub Desktop.
Save cs09g/8d3ca19009c79e473f8b57f62f6e7367 to your computer and use it in GitHub Desktop.
ant path with Mapbox-gl-js https://jsfiddle.net/cs09g/vtmLd6g9/
let dash = [3, 3]; // your input; dash you want to animate
let speed = 0.5; // your input; speed rate
let dashArraySeq = createDashArraySeq(dash, speed); // `dashArraySeq` contains dash arrays you can use
function createDashArraySeq(dash, speed = 1) {
let dashArraySeq = [dash];
for (let i = speed, len = dash[0] + dash[1]; i < len; i += speed) {
const arr = [];
if (i <= len - dash[0]) {
arr.push(0, i, dash[0], dash[1] - i);
} else {
const leftFillCnt = i - (len - dash[0]);
arr.push(leftFillCnt, dash[1], dash[0] - leftFillCnt, 0);
}
dashArraySeq.push(arr);
}
return dashArraySeq;
}
let dashArrayIdx = 0;
function animateLine(ts) {
dashArrayIdx = (dashArrayIdx + 1) % dashArraySeq.length;
map.setPaintProperty('line-layer', 'line-dasharray', dashArraySeq[dashArrayIdx]);
requestAnimationFrame(animateLine);
}
requestAnimationFrame(animateLine);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment