Animation without affecting idle state

by

Currently, I have a animated circle that worked like this

const pulse = (map: MapRef, options: PulseOptions, step: number) => {
    const { widthKey, key, minWidth, maxWidth, sizePerStep, layerId } = options
    map.getMap().setPaintProperty(layerId, widthKey, [
        "interpolate",
        ["linear"],
        key,
        0,
        minWidth,
        1,
        getPulseWidth(minWidth, maxWidth, step, sizePerStep),
    ])
}

export const startPulse = async (mapRef: MapRef, options: PulseOptions) => {
    await mapRef?.getMap().once("idle")
    let step = options.step

    const interval = setInterval(() => {
        if (step === options.steps) step = 0
        step += 1
        pulse(mapRef, options, step)
    }, options.ms)
}

By calling setPaintProperty in every n ms to achieve a pulsing effect, however, this will lead to the map will never go idle when doing .once("idle")

I tried the mapbox tutorial one, but the performance wan’t great when having many markers, but looks like triggerRepaint will not affect the idle state.

Any idea on how can I implement triggerRepaint or any ways to not affect the idle state when setPaintProperty?

Leave a Comment