Задать вопрос

Как вот так анимировать иконки, что используется для этого?

С помощью чего делаются вот такие анимации иконок? Может кто поделится ссылками на похожую анимацию и объяснения
heatwatch.gif
  • Вопрос задан
  • 3687 просмотров
Подписаться 6 Оценить Комментировать
Пригласить эксперта
Ответы на вопрос 4
IonDen
@IonDen
JavaScript developer. IonDen.com
PhotoShop, After Effects -> to gif.

Можно конечно попробовать сымитировать на CSS, но это будет весьма трудоемко. Можете начать отсюда:
https://daneden.github.io/animate.css/
https://developer.mozilla.org/en-US/docs/Web/CSS/C...
https://developer.mozilla.org/en-US/docs/Web/CSS/@...
продолжить сюда:
greensock.com/tweenmax

Демки: css-live.ru/cssjssvg-s-podvypodvertom/ezhenedelnay...
Ответ написан
Комментировать
Ronnie_Gardocki
@Ronnie_Gardocki
Я у мамы фронтендщик.
Вариант с гиф это совсем уж извращение.
1 вариант по идее можно сделать с помощью svg gooey фильтра (комбинация блюра с контрастом, которая дает эффект перетекания).
Но чаще всего такое делают либо с помощью спрайтов (устаревший, но простой вариант), либо с помощью bodymovin (js плагин для After Effect, вы экспортите анимацию из AE и юзаете в нем).
Ну и конечно есть вариант такое руками с помощью SVG запилить, но это крайне нерациональный подход на фоне того что я описал выше.
Ответ написан
Комментировать
mudrenokanton
@mudrenokanton
frontend dev
Тут немного объясняют и есть даже толковые исходники:
tympanus.net/codrops/2016/05/11/distorted-button-e...
Ответ написан
Комментировать
@rock4ster Автор вопроса
Спасибо, посмотрим.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы