Add animated dash line example

[ravenfeld]

Hello, I'd like to make a line with dash animations.

I found this issue on the old repo
mapbox/mapbox-android-demo#795

Do you know if this is feasible now?

Thanks in advance

[louwers]

Yes that should be possible by continuously updating the line-dasharray property: https://maplibre.org/maplibre-style-spec/layers/#line-dasharray

The jsbin you linked gives you an idea.

[ravenfeld]

Ok, there's nothing that's currently done. It's up to me to develop the animation. So I'm going to try it out with an Animator and see what happens.

[ravenfeld]

        LineLayer(layerDashName, sourceLineName)
            .withProperties(
                lineColor("#FFFFFF"),
                lineWidth(4f),
                lineDasharray(arrayOf(0f, 0f, 0f))
            ).apply {
                minZoom = 12.0f
            }

    @Suppress("MagicNumber")
    fun startAnimation(style: Style): ValueAnimator? {
        val layer = style.getLayerAs<LineLayer>(layerDashName) ?: return null

        val dashSequences = generateDashSequences(24f)

        val animator = ValueAnimator.ofInt(0, dashSequences.size - 1)

        animator.apply {
            duration = 2000L
            repeatCount = ValueAnimator.INFINITE
            addUpdateListener { valueAnimator ->

                val idx = valueAnimator.animatedValue as Int
                layer.setProperties(lineDasharray(dashSequences[idx]))
            }
            start()
        }

        return animator
    }

    @Suppress("MagicNumber")
    private fun generateDashSequences(space: Float): List<Array<Float>> {
        val sequences = mutableListOf<Array<Float>>()
        sequences.add(arrayOf(0f, space, 1f))
        sequences.add(arrayOf(0.5f, space, 0.5f))
        sequences.add(arrayOf(1f, space, 0f))
        var offset = 0f
        var space = space
        while (space > 0f) {
            val t = arrayOf(0f, offset, 1f, space)
            sequences.add(t)
            offset += 0.5f
            space -= 0.5f
        }

        return sequences
    }

Here is my code, it is not perfect because the beginning starts before the end but I do not really understand why

Screen_recording_20250924_211055.mp4