Как реализовать иллюзию непрерывного движения в SVG?

Question

Представьте себе индикатор прогресса, подобный этому, который создает ощущение движения влево:

Примечание: тонкая ярко-зеленая линия в верхней части анимации является артефактом сжатия.
Я ищу способ реализовать нечто подобное, но в произвольном пути SVG, например

Я пытаюсь понять, что там на самом деле происходит, например:

Это градиент с большим количеством stops, и они продолжают
двигаться?
Эти много смежных, перекошенных прямоугольников движутся в унисон?
Это одна длинная последовательность наклонных соседних
прямоугольников, вдоль которых движется «скользящее окно»?

Как можно реализовать такие анимации?
И что было бы наилучшей практикой для его реализации с использованием примитивов SVG?
Свободный перевод вопроса How to implement a continuous motion illusion in SVG? от участника  @ralien.

Alexandr_TT · Answer

Я использую путь дважды: #a и #b. Оба пути #a, и #b имеют stroke-dasharray: 1, но путь с id #b имеет смещение stroke-dashoffset: 1; Я анимирую stroke-dashoffset для обоих #a и #b. use { stroke-dasharray: 1; } #a { stroke: green; animation: dasha 5s linear infinite; } #b { stroke: DarkSeaGreen; stroke-dashoffset: 1; animation: dashb 5s linear infinite; } @keyframes dasha { to { stroke-dashoffset: -54.66; } } @keyframes dashb { to { stroke-dashoffset: -53.66; } } UPDATE Если вы примените переменные CSS, то вы можете использовать только одну анимацию: use { stroke-dasharray: 1; } #a { --offset:0; stroke: green; stroke-dashoffset: 53.66; animation: dash 5s linear infinite; } #b { --offset:1; stroke: DarkSeaGreen; stroke-dashoffset: 54.66; animation: dash 5s linear infinite; } @keyframes dash { to { stroke-dashoffset: var(--offset) } } Свободный перевод ответа How to implement a continuous motion illusion in SVG? от участника @enxaneta.

Как реализовать иллюзию непрерывного движения в SVG?

One Answer

Add your own answers!

Ask a Question