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

Question

[Mikalai Bulava]

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

P.S. Анимация сделана в Principle.

Comments

[noodles]

В этой статье в конце пять шагов
https://medium.com/@ryan_brownhill/after-effects-t...
Выполнить их и передать в удобном виде в разработку.

Answer 1

[Ivan Bogachev]

Вариант 1:
У разработчика есть то же ПО, что и у вас. Он может открыть ваш проект и не по описанию и гифке все делать, а по вашим исходникам.

Вариант 2:
У разработчика нет возможности открыть ваш проект. Такое вполне может случиться. Например ваш Principle не очень дружит с линуксом. Или еще что-то не так. В такой ситуации желательно иметь:

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

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

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

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

Comments

[Mikalai Bulava]

Хорошо. В каком виде передавать все тайминга и свойства? Скриншоты, обычные текстовые файлы? Есть какие-то предположения или на собственном опыте. В целом, я как-то так и думал, но хотелось бы чтобы было удобно и фронтенду.

[Ivan Bogachev]

Chomp B, По собственному опыту говорю - не важно как именно это будет оформлено, главное - возможность скопипастить.

[Mikalai Bulava]

Ivan Bogachev, спасибо, поразмышляю над этим.

Answer 2

[Денис Князев]

ИМХО

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

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

Но это то, что сразу на ум приходит, интересно, как это делают.

Comments

[Mikalai Bulava]

садятся рядом дизайнер и разработчик

Это отнимает массу времени и очень часто не по делу. Такое практиковалось. Время, затраченное на разговоры, можно было потратить более продуктивно.

т

от, кто заанимировал интерфейс

Да, такое я слышал и в некоторых студиях с жирным прайсом есть вакансии моушн-дизайнеров, но это другой уровень. Хотелось бы пока найти середину в соотношении цена-качество.

отгружайте еще и principle исходники

Тут выше писали, что иногда софта у разработчиков просто нет, нет возможности поставить. Как тогда быть?

Спасибо за ответ! Если постучаться к менеджерам в крупную студию, они смогут раскрыть тайны рабочего процесса, как думаете?

[Денис Князев]

Chomp B, конечно, не обязательно менеджера, просто дизайнера/разработчика, который с такой задачей встречается более-менее регулярно.

Answer 3

[Роман RW]

Попробуйте Framer, там кодом но не так сложно как звучит. Если код совсем не по душе, Principle (кривую анимации хоть скриншотом, анимировать легко, условия записывать ну и т.д.).
Я лично стараюсь найти CSS/JS даже самых простых хаверов и дать фронту, что бы точнее было. И если фронт не «мартышка» и не «тыкает клавиатурой в текстовом редакторе», то всё будет окей)

Answer 4

[pavelkunyavskiy]

Дело в том, что одно дело тыкать мышкой в графическом редакторе, делая анимацию, чему любая мартышка научится, а другое - изучить горы JS библиотек для анимаций и их API.

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

Comments

[Mikalai Bulava]

Именно. Дизайнеры — мартышки, вы — царь и бог. Ничего интересного. Каждый должен заниматься своим дело. Мартышки изучать пользователей и делать анимацию удобной для пользователя, а цари и боги реализовывать это. Если где-то в этой цепочки кому-то не хватает квалификации — это только его проблема.
P.S. В следующий раз отвечайте по делу. Показывать свое ЧСВ тут нет необходимости.

[opendannyy]

а вот у меня тут как раз вопрос встречный я как веб диз, делаю все анимации на css+js и иногда с помощью фишек svg.
и очень хочу научится тыкать как мартышка в графическом редакторе. Есть ли смысл начинать работать с After Effects или мне достаточно других более простых инструментов. Глянул тот же principle — кайф. Хватает ли его что бы делать крутые анимашки, пилить гифки? Или если я еще хочу и видосики на behance пилить лучше не париться и делать все в After Effects? Помогите советом