MaptilerAnimation
The MaptilerAnimation class provides utilities for animating between keyframes with custom easing and playback controls. It supports event-based hooks for frame updates and works with rendering loops or UI transitions.
Example
// Linearly animated between values
const animation = new MaptilerAnimation({
keyframes: [
// props are interpolated across the duration
{ delta: 0, props: { lon: -7.445 } },
// userData can hold any type of custom data to pass with the keyframe
{ delta: 0.5, userData: { mydata: "whoa!" } },
{ delta: 1, props: { lon: -7.473 } },
],
duration: 1000, // 1 second
iterations: Infinity, // loop forever
});
const marker = new Marker().setLngLat(
new LngLat(
-7.449346225791231,
39.399728941536836,
)
).addTo(map);
// TimeUpdate is fired every frame
animation.addEventListener(AnimationEventTypes.TimeUpdate, (e) => {
marker.setLngLat(
new LngLat(
e.props.lon,
39.399728941536836,
)
);
});
// Fired when the keyframe changes
animation.addEventListener(AnimationEventTypes.Keyframe, ({ userData }) => {
console.log(userData.mydata); // "whoa!"
});
animation.play();
// Eased between values
const animation = new maptilersdk.MaptilerAnimation({
keyframes: [
// props are interpolated across the duration
{ delta: 0, easing: EasingFunctionName.ElasticInOut, props: { lon: -7.445 } },
{ delta: 1, props: { lon: -7.455 } },
],
duration: 1000, // 1 second
iterations: Infinity, // loop forever
});
