Chipr
@Chipr
UX/UI designer

Как правильно передать анимацию разработчику?

Добрый день.
С усложнением проектов пришла необходимость в микро/макро анимации. И к обычному набору материалов для верстки в виде png, svg, шрифтов, загруженных макетов на invision, UI гайдов и прочего, стал добавлять gif анимации нужных страниц/элементов + если необходимо, описание. Но беда в том, что результат работы фронтенда не устраивает, анимации топорные, линейные и не такие как сделаны мной. Общий вид сайта портится. В общем, вопрос: как грамотно передать анимацию фронтенду, чтобы все было как на gif? Может описание каких-то таймингов или еще что-то, как это происходит в крупных компаниях?
Спасибо.

P.S. Анимация сделана в Principle.
  • Вопрос задан
  • 2310 просмотров
Пригласить эксперта
Ответы на вопрос 4
sfi0zy
@sfi0zy Куратор тега JavaScript
Creative frontend developer
Вариант 1:
У разработчика есть то же ПО, что и у вас. Он может открыть ваш проект и не по описанию и гифке все делать, а по вашим исходникам.

Вариант 2:
У разработчика нет возможности открыть ваш проект. Такое вполне может случиться. Например ваш Principle не очень дружит с линуксом. Или еще что-то не так. В такой ситуации желательно иметь:
  • Гифку
  • Гифку x0.1, а то иногда все так быстро движется, что ничего не понятно
  • Список функций, которые вы используете (кривые безье сложно угадывать на глазок, а easing - понятие ооочень растяжимое)
  • Тайминги, по крайней мере продолжительность основных движений в анимации (в небольших взаимодействиях с элементами разница в 50ms может "чувствоваться", но "увидеть" ее сложно)
  • Если есть хитрые соотношения размеров - было бы хорошо иметь описание логики, а то иногда не понятно, идет движение "на 100px" или "на треть высоты элемента"


Если есть обратная связь с вами, как дизайнером (можно что-то уточнить в процессе), то этого вполне достаточно.

результат работы фронтенда не устраивает

Не забывайте о том, что у очень многих (как это ни странно) фронтендеров чувство вкуса отсутствует от слова совсем. Так что для них создание чего-то красивого и нестандартного - это почти пытка. Правда что в такой ситуации делать - не очень представляю.
Ответ написан
axaxa_man
@axaxa_man
web developer
ИМХО

Наверняка в больших командах садятся рядом дизайнер и разработчик и сообща всё делают. + еще с ними может быть тот, кто заанимировал интерфейс (если анимация была сделана например в AE) и на месте всё делают.

.gif вряд ли будет достаточно, если анимации неоднозначные, отгружайте еще и principle исходники или если нет возможности запустить их у исполнителя – описания. В Principle для каждого элемента и каждой анимации можно хотя бы сделать скриншот таймлайна с анимациями, временем и какие свойства меняются.

Но это то, что сразу на ум приходит, интересно, как это делают.
Ответ написан
redview
@redview
Design. Hackintosh.
Попробуйте Framer, там кодом но не так сложно как звучит. Если код совсем не по душе, Principle (кривую анимации хоть скриншотом, анимировать легко, условия записывать ну и т.д.).
Я лично стараюсь найти CSS/JS даже самых простых хаверов и дать фронту, что бы точнее было. И если фронт не «мартышка» и не «тыкает клавиатурой в текстовом редакторе», то всё будет окей)
Ответ написан
Комментировать
@pavelkunyavskiy
Дело в том, что одно дело тыкать мышкой в графическом редакторе, делая анимацию, чему любая мартышка научится, а другое - изучить горы JS библиотек для анимаций и их API.

Если есть желание получать результат соответствующий магии, которую за кулисами делают свистоперделки вроде invision - то либо нанимайте профи фронтендера, либо сами изучайте API анимаций, для того чтобы понимать как это работает в реале, а не от кликания мышкой.
Ответ написан
Ваш ответ на вопрос

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

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