Добавляем анимацию появления шапки #2
Conversation
|
♻️ Я собрал ваш пулреквест. Посмотреть можно здесь. |
There was a problem hiding this comment.
✏️ Первичная проверка.
Обозначения:
🔴 - Нужно обязательно исправить.
☝️ - Нужно принять к сведению, обращать внимание в перспективе.
💡 - Дополнительные мысли для саморазвития (за рамками учебных задач).
🔷 - Важное сообщение.
Чеклист:
- Логотип плавно появляется слева.
- Футер плавно появляется снизу.
- Шапка появляется из прозрачности без смещения.
- Рисуется полоса под первым (активным) пунктом меню в шапке.
- Кружочек иконки социальных сетей увеличивается, как бы пружинит, и потом уменьшается. Размер самой иконки с точками не меняется. Сохранена работоспособность анимаций кнопки при наведении мыши (из первого задания).
Комментарии:
🔴 - Отсутствует анимация появления футера. Похоже, что вы перепутали футер (белая полоса снизу) и текст с побуквенной анимацией. В прошлой проверке я уже упоминал, что побуквенные анимации - это отдельная вещь, пока мы эти элементы не трогаем.
🔴 - Отсутствует появление шапки из прозрачности.
🔴 - Отсутствует пружинящий эффект у кнопки соц сетей при ее появлении. Кружок должен увеличиваться, иконка - нет.
🔷 - Предыдущее задание было принято формально, с напутствием обращать большее внимание на детали. Здесь слишком многое осталось без внимания. Нужно доделать. На текущий момент важно осознать две вещи: первая - сложные задачи состоят из комбинаций простых. Пропуская движения в простых задачах вы не накапливаете опыт их внедрения в страницы, и потом будет сложнее их комбинировать. Это накапливается как снежный ком. Вторая - логика работы интерфейса важна. Сохранение логики дизайна, аккуратный перенос ее в код, - это существенная часть нашей работы. И умение разделить сложное движение на ряд простых, проанализировать его, разобраться, что там с чем связано - это то, что нужно в себе развивать параллельно умению писать код. И здесь все так же. Сложные сцены включают в себя больше движений, больше логический связей. Разбирая по кирпичикам простые штуки вы делаете задел на будущее, когда нужно будет разбирать сложные дизайнерские концепты.
💡 - Если у нас в проекте есть дизайн-система, то вполне вероятно, что она включает в себя набор длительностей и временных функций для анимаций. К сожалению в учебном проекте такой системы нет, но тем не менее у вас в коде будут продолжать накапливаться повторяющиеся значения длительностей, задержек для анимаций и временных функций. И на самом деле в любом проекте они будут накапливаться. Может иметь смысл подумать над тем, как будет удобно организовать эти повторяющиеся значения. Со стороны дизайнера это может выглядеть как список значений с инструкциями, какие из них для каких ситуаций в интерфейсе должны применяться, а с нашей стороны - как набор констант препроцессора. Даже маленький шаг по созданию такого набора с инструкциями по использованию может существенно сократить количество согласований, правок, и необходимости что-то постоянно контролировать и подгонять. Причем многие типовые интерфейсы можно покрыть очень маленькими наборами значений. Например часто для длительностей достаточно набора из короткой (для реакций на действия пользователя), средней (для смены состояний компонентов) и большой (для глобальных перестановок в интерфейсе).
Итог:
❌ - Выполнены не все требования ТЗ. Необходима доработка.
| transform: translate(0, 0); | ||
| opacity: 1; | ||
| transition: all 6s; | ||
| transition-timing-function:cubic-bezier(0.17,0.67,0,1.05) |
There was a problem hiding this comment.
☝️ - Будьте осторожны с такими значениями больше 1 или меньше 0 в кривых Безье, в ситуациях, когда это не задумано изначально как движение туда-сюда. Эти значения могут создать лишнюю точку перегиба кривой, и из-за нее может появиться плавающий баг, когда в конце движения элемент прыгает немного назад. Или в начале будет двигаться не туда. Такое легко пропустить при тестировании, это может быть артефакт в 1px, но он потом где-нибудь в продакшене всплывет и будет резать глаз.
| @@ -31,10 +31,20 @@ | |||
| position: relative; | |||
| flex: none; | |||
| top: -0.5rem; | |||
| left: -120px; | |||
There was a problem hiding this comment.
☝️ - Посмотрите внимательно на видео. Насколько сильно этот логотип изначально смещен? Примерно? На ширину одной буквы? Сейчас на стандартном fullhd мониторе он вылетает из-за края экрана. 120px тут - явный перебор. Здесь проблему легко исправить, она заключена в одном числе.
| &--loaded { | ||
| transform: scale(1); | ||
| transition: all 6s; | ||
| transition-timing-function:cubic-bezier(0.17,0.67,0,1.05) |
There was a problem hiding this comment.
☝️ - Для решения задачи анимирования "туда-сюда" можно использовать кривую Безье, которая немного выходит за пределы квадрата 1 на 1. Современные браузеры уже давно умеют такое делать. Как пример - cubic-bezier.com/#.6,-0.25,.34,1.51.
☝️ - А еще у нас есть функция linear(), которая медленно, но верно, начинает поддерживаться всеми основными браузерами. Она открывает еще более широкий спектр возможностей.
🎓 Добавляем анимацию появления шапки
💥 https://htmlacademy-animation.github.io/2469617-magic-vacation-1/2/