TransWikia.com

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

Stack Overflow на русском Asked on December 16, 2021

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

введите сюда описание изображения

Примечание: тонкая ярко-зеленая линия в верхней части анимации является артефактом сжатия.

Я ищу способ реализовать нечто подобное, но в произвольном пути SVG, например

введите сюда описание изображения

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

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

Как можно реализовать такие анимации?
И что было бы наилучшей практикой для его реализации с использованием примитивов SVG?

Свободный перевод вопроса How to implement a continuous motion illusion in SVG? от участника @ralien.

One 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;
  }
}
<svg viewBox='0 0 24 24' width="200"><title>gesture</title>
    <defs><path id="thePath"  fill="none" d='M4.59 6.89c.7-.71 1.4-1.35 1.71-1.22.5.2 0 1.03-.3 1.52-.25.42-2.86 3.89-2.86 6.31 0 1.28.48 2.34 1.34 2.98.75.56 1.74.73 2.64.46 1.07-.31 1.95-1.4 3.06-2.77 1.21-1.49 2.83-3.44 4.08-3.44 1.63 0 1.65 1.01 1.76 1.79-3.78.64-5.38 3.67-5.38 5.37 0 1.7 1.44 3.09 3.21 3.09 1.63 0 4.29-1.33 4.69-6.1h2.46'></path>
  </defs>
    <use id="a" xlink:href="#thePath" />
    <use id="b" xlink:href="#thePath" />
</svg>

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)
  }
}
<svg viewBox='0 0 24 24' width="200"><title>gesture</title>
    <defs><path id="thePath"  fill="none" d='M4.59 6.89c.7-.71 1.4-1.35 1.71-1.22.5.2 0 1.03-.3 1.52-.25.42-2.86 3.89-2.86 6.31 0 1.28.48 2.34 1.34 2.98.75.56 1.74.73 2.64.46 1.07-.31 1.95-1.4 3.06-2.77 1.21-1.49 2.83-3.44 4.08-3.44 1.63 0 1.65 1.01 1.76 1.79-3.78.64-5.38 3.67-5.38 5.37 0 1.7 1.44 3.09 3.21 3.09 1.63 0 4.29-1.33 4.69-6.1h2.46'></path>
  </defs>
    <use id="a" xlink:href="#thePath" />
    <use id="b" xlink:href="#thePath" />
</svg>

Свободный перевод ответа How to implement a continuous motion illusion in SVG? от участника @enxaneta.

Answered by Alexandr_TT on December 16, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP