[JavaScript] Можно ли преобразовать "canvas" в GIF-анимашку?

slavegirl
На сайте с 25.06.2012
Offline
388
667

Ещё раз здравствуйте!

Очень часто слушаю разную музыку в ВК и мне очень понравилось, как они в новом дизайне сделали анимацию эквалайзера при проигрывании песен. Захотелось себе такую же на сайт добавить. Но если раньше такие штучки делались в GIF и копировались правой кнопкой мышки, то сейчас почти все крупные ресурсы стали рисовать на "канвасе", и теперь не то что анимашку, иконку обычной, но красивой кнопки "одолжить" без нервотрёпки в фотошопе не получится...

Вот об этой анимации идёт речь:


<canvas class="audio_row__sound_bars" width="40" height="40" style=""></canvas>

Можно ли её как-то "вытянуть" в прозрачную гифку? Но чтобы без записи экрана на видео и недельной пост-обработки в редакторе...

Заранее большое спасибо за любые советы!

С уважением,

Slavegirl

https://t.me/joinchat/RKtR6f68OwU1NzM6  ❤️‍🔥  Сарказм is my orgazm
AS
На сайте с 12.12.2017
Offline
6
#1

Как очевидный вариант - поиск похожей гифки в интернете.

Google

slavegirl
На сайте с 25.06.2012
Offline
388
#2

AutoSearches, забыла добавить: уже искала, но ничего такого же красивого и плавного не нашла...

Мне эта анимашка прямо в мозг въелась. Сразу видно, что дизайнеры ВК очень над ней постарались!

Но за ссылку спасибо! По такому запросу я ещё не искала.

И ещё, в ВК анимация довольно длительная. Такое ощущение, что проходит секунд 5-10 до начала повтора (если она вообще повторяется по кругу).

LEOnidUKG
На сайте с 25.11.2006
Offline
1722
#3

Можно ещё так попробовать сделать:

https://www.google.ru/search?client=opera&q=svg+to+gif&sourceid=opera&ie=UTF-8&oe=UTF-8

✅ Мой Телеграм канал по SEO, оптимизации сайтов и серверов: https://t.me/leonidukgLIVE ✅ Качественное и рабочее размещение SEO статей СНГ и Бурж: https://getmanylinks.ru/
dma84
На сайте с 21.04.2009
Offline
168
#4
LEOnidUKG:
Можно ещё так попробовать сделать:

https://www.google.ru/search?client=opera&q=svg+to+gif&sourceid=opera&ie=UTF-8&oe=UTF-8

А можно и на CSS

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий