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


Спасибо за экспертный ответ с примером.
  • Вопрос задан
  • 4639 просмотров
Решения вопроса 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, но это будет довольно таки мучительно.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы