Анимация (SVG?) - PullRequest
       100

Анимация (SVG?)

0 голосов
/ 29 февраля 2020

Мне нужно сделать относительно простую анимацию, но я должен признать, что не уверен, как go закончить ее полностью.

Вот обзор ожидаемого конечного результата:

enter image description here

Его поведение относительно простое. Когда страница загружается, ничего не отображается, затем через x секунд начинается анимация. Все линии нарисованы в одно и то же время с одинаковой продолжительностью.

Мой первый тест работает хорошо, но я не знаю, как добавить «стрелки» в конце линий. См. Мой codepen : https://codepen.io/lorraineS/pen/GRJrqvj

Обратите внимание, что стрелки не всегда должны быть видны. Важно то, что они находятся в конце анимации.

Моя техника основана на принципе, что векторные линии «нарисованы» одной линией (в моем случае, на фиг. Figma), которая не будет случай с реальной стрелкой.

В результате я больше не уверен, что мой метод подходит для ожидаемого результата, в частности, играя с анимацией "strokeDashoffset".

strokeDashoffset: [anime.setDashoffset, 0],

Что ты думаешь? Есть ли у вас какие-либо подсказки, чтобы дать мне этого?

Спасибо

...