Чем делается SVG анимация?

Question

[lukoie]

Как вот тут на третьем экране: https://craftcommerce.com/
Есть визуальные инструменты для такой задачи?

Comments

[Сергей delphinpro]

рисование линий - это анимация свойства dashstroke-array
появление - анимация свойства opacity

Рисуем svg в любом редакторе, а дальше скриптом делаем анимации.
Если использовать jquery, то все сводится к использованию метода .animate()

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

[lukoie]

Сергей: это я в курсе, спасибо. меня интересует увидеть именно реализацию визуального инструмента.

Answer 1

[uvelichitel]

Анимация

Как вот тут на третьем экране: https://craftcommerce.com/

сделана скорее всего на vivius https://github.com/maxwellito/vivus визуальным инструментом вроде adobe Illustrator, Sketch, Inkscape.

Comments

[lukoie]

спасибо, да, я вивус искал

Answer 2

[Николай]

Можно вручную, есть редакторы разного плана, можно через canvas. На codepen можешь ввести canvas animation и посмотреть примеры, может сумеешь адаптировать под себя. Из редакторов бесплатных знаю только на mac - Keyshape Beta.

Comments

[lukoie]

21й же век, ракеты в космос летают. вручную анимацию прописывать?
спасибо за наводку, попробую на alternativeto глянуть.
Может еще кто-то подскажет интересные инструменты.

[lukoie]

вот видите, Николай вивус делает это автоматически, и не нужно вручную.

Answer 3

[A K]

Sketch
- https://blog.axosoft.com/2016/11/23/from-sketch-ap...
- https://www.sketchcasts.net/episodes/svg-animation...

Answer 4

[albertnikitin]

yoksel.github.io/about-svg тут есть примеры.

Answer 5

[Anna_BS]

maxwellito
codepen

Answer 6

[Рост Осипов]

Snap.svg

Comments

[lukoie]

Ну, это как бы не совсем визуальный инструмент создания анимации, но спасибо.

Answer 7

[ЕВГЕНИЙ ХАРЧЕНКО]

https://vectr.com/ ОТЛИЧНАЯ ВЕЩЬ!

Comments

[lukoie]

ок, но вопрос был об АНИМАЦИИ. А это только простой векторный редактор.