Добавляем анимацию блоков

[VeraChernushina]

---

🎓 Добавляем анимацию блоков

💥 https://htmlacademy-animation.github.io/2509851-magic-vacation-1/4/

[keksobot]

♻️ Я собрал ваш пулреквест. Посмотреть можно здесь.

[keksobot]

♻️ Я собрал ваш пулреквест. Посмотреть можно здесь.

[sfi0zy]

✏️ Первичная проверка.

Обозначения:

🔴 - Нужно обязательно исправить.
☝️ - Нужно принять к сведению, обращать внимание в перспективе.
💡 - Дополнительные мысли для саморазвития (за рамками учебных задач).
🔷 - Важное сообщение.

Чеклист:

• Поочередное появление пунктов правил. Тексты появляются из прозрачности со смещением.
• Анимация кружков - с увеличением/уменьшением, как и у кнопки социальных сетей в шапке.
• Кнопка "Погнали" появляется в форме круга, расширяется, затем в ней появляется текст.

Комментарии:

☝️ - Обратите внимание, что в видео-концепте логика работы анимации кружков другая. Кружок увеличивается, а цифра в нем - нет. По сути логика работы этих кружков такая же, как у кнопки соц сетей. Хотя у нас нет полноценной дизайн-системы, но тут прослеживается последовательность в дизайне компонентов. Это хороший пример ситуации, когда в наши руки попадает верстка от других разработчиков и она не совсем соответствует дальнейшей логике, что с ней нужно делать. Здесь нам определенно нужно иметь два элемента, один для кружка, а другой для цифры. А наш теоретический коллега-верстальщик сделал только один. Придется исправить. В реальной работе при составлении ТЗ на верстку может иметь смысл заранее туда включать какие-то требования по поводу разделения вещей на несколько элементов. Тут все очень ситуативно и зависит от дизайна, но стоит про такой момент знать. Иногда такие уточнения ТЗ с нашей стороны экономят кучу времени и избавляют от выполнения двойной работы.

---

💡 - Получение длительностей и угадывание временных функций из видео при работе над интерфейсами – в некоторой степени сомнительная затея. В рамках учебного курса, как упражнение - ок. Развиваем глазомер, так сказать, учимся видеть детали. Но в реальной работе этим заниматься не стоит - слишком уж много времени уходит на что-то, чем можно вообще не заниматься. Обычно мы можем организовать процессы так, чтобы исключить саму идею подбора чего-то из видео. Это упростит работу всем вокруг. Дизайн интерфейсов – это же больше промышленный дизайн, чем искусство. Все должно быть по возможности унифицировано для уменьшения издержек на производстве. Если анимации имеют разную длительность – это должно быть логически обосновано. Если разные временные функции – тоже. Так или иначе мы приходим к ограниченной дизайн-системе (даже если ее изначально нет в проекте, то мы ее можем создать), и все длительности, задержки и временные функции берутся из нее. В таком контексте видео-концепты становятся просто способом показать суть движений, когда их сложно описать словами. Видео не нужно рассматривать как эталон, к которому нужно что-то подгонять по времени.

💡 - Если все же возникает желание/необходимость посмотреть видео по кадрам (например если дизайнеры нашли какое-то видео в интернете и там какое-то хитрое движение, и его нужно разглядеть получше), то это может быть удобно делать в программах, предназначенных для редактирования видео. Если вы еще пользуетесь плеером с одной кнопкой на страницах учебника - попробуйте альтернативные варианты, чтобы посмотреть, как оно может выглядеть. Там есть разные программы, сам я обычно использую Blender для таких исключительных ситуаций, потому что он и так используется для работы с 3D, и получается все в одном месте.

Итог:

✅ 🔷 - Выполнена большая часть задания. Остальное может быть доделано/исправлено при выполнении следующих заданий. Задание принято.