Как разрабатываются сложные анимации для web сайтов (с точки зрения дизайна)?

Здравствуйте. Вроде как опытный программист, сверстал не один десяток сложных сайтов, иногда даже очень креативных и красивых, но никогда не имел дело с сложными анимациями, которые пишут на canvas. Если технически, я смогу разобраться как их писать на canvas, то, подскажите пожалуйста, в каком виде я должен получать исходники? Обычно получаю макеты в Figma, Photoshop, Illustrator, и т.д. А тут как он должны выглядеть? Много-много слоев (допустим в psd), которые как будто предназначены для GIF? Или в дополнении к этому, дизайнер должен сделать видео, например в After Effects? Дизайнер обратился ко мне с тем же вопросом, ответа не знает. Может можете подсказать какие-то мануалы, или ссылки на пособия?
Примеры анимаций:
1) www.djeco.com/en - на главном экране
2) https://dae.sk/start - на главном экране с кругом, сравнительно простенькая анимация, но все равно не понятно в каком формате должны выглядеть исходники для нее
3) https://dribbble.com/shots/4433298-PQ-icons конкретно здесь - это gif изображение. Но что если бы стояла задача сделать это на canvas?
Наперед большое спасибо.

UPD: интересует, в каком именно виде/формате должен выглядеть дизайн, а не КАК это делать с точки зрения программинга (т.е. я понимаю что есть разные JS библиотеки, и т.д.). Т.е., это набор слоев + видео (для тяжелых анимаций), или + ТЗ (для более легких), или обычно как делают сложные CANVAS анимации?
  • Вопрос задан
  • 988 просмотров
Решения вопроса 1
@vladdimir
Верстальщик
Чтобы сделать анимацию, что нужно увидеть, как она работает и получить элементы, из которых она состоит. Так что в идеале: гифка или видео + объекты анимации в виде изображений.
Иногда, вместо полного видео, хватает и статических изображений трех состояний: исходное, промежуточное и конечное. + описание на пальцах переходов и эффектов. Тут как с дизайнером договоритесь. Если он там нечто эпическое планирует, то лучше увидеть это в динамике.

На первом сайте. кстати, анимация не канвас, а css.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
qant
@qant
programer
Может уже поздно, но серьезные анимации и 3д делают при помощи
treejs https://threejs.org/examples/#webgl_geometry_nurbs
и pixijs https://pixijs.io/examples/#/demos-basic/container.js
Ответ написан
@BalgabayevD
Начинающий front-end программист
Можно нарисовать красивую моушн графику в after effects затем через movinbody экспортировать в json. В YouTube много таких примеров.
Ответ написан
Ваш ответ на вопрос

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

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