WispProxy
@WispProxy
JS, Front-End, DevOps Engineer — vbelozyorov.com

Какой выбрать фреймворк для сложных веб-анимаций (с примером)?

Здравствуйте.

Какой есть фреймворк для быстрой реализации подобных веб-анимаций:
  1. dribbble.com/shots/2487473-Lima
  2. dribbble.com/shots/2672582-Motion-Market

Опробованные решения:
  1. Paper.js
  2. Processing.js
  3. Raphaël

Обязательные условия для фреймворка:
  1. Поддержка растровых и векторных моделей
  2. Поддержка мобильных устройств
  3. Поддержка events


Спасибо за экспертный ответ с примером.
  • Вопрос задан
  • 5825 просмотров
Решения вопроса 2
Ronnie_Gardocki
@Ronnie_Gardocki
Я у мамы фронтендщик.
Варианта 2 почти всегда:
1) Greensock (GSAP). Самая крутая либа для анимаций, умеет наверное все, кроме разве что канваса/webgl (для этого обычно уже юзают threejs или ручками что-то пишут).
2) Bodymovin. На второй гифке например последовательная анимация, не требующая интеракций от юзера, но содержащая при этом множество деталей и микродвижений. Пилить такое руками - ОЧЕНЬ много часов (разница между похожим прототипом и прототипом на 90% схожим с гифком - колоссальная). В то время как с bodymovin вы просто экспортируете всю анимацию из after effects и запустите ее на клиенте. Есть конечно же свои плохие стороны, отсутствие гибкости и весьма немалое количество кода, экспортируемого из AE, но обычно в таких ситуациях других способов не бывает.
Ответ написан
Комментировать
mudrenokanton
@mudrenokanton
frontend dev
Прочитайте эти 2 статьи:
более новая
более старая
С момента их написания еще активно начали говорить про anime.js, но она ни в какое сравнение с возможностями и гибкостью GSAP не идет.
Первую анимацию, из тех которые вы показали, лучше делать на canvas. Мелкие частицы аж никак на вектор не тянут. Хотя может и можно как-то заморочиться с svg фильтрами или просто 50—150 точек запульнуть в сцену.
Вторую анимацию можно сделать руками на GSAP, но это будет довольно таки мучительно.
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
VGrabko
@VGrabko
Golang, Php, Js
three.js
Ответ написан
Комментировать
@GreatRash
Ответ написан
Комментировать
Taraflex
@Taraflex
Ищу работу. Контакты в профиле.
Adobe Animate CC c экспортом в canvas
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы