Анимируем смены состояний интерактивных элементов

[galina132]

выполнение задания 1

---

🎓 Анимируем смены состояний интерактивных элементов

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

[keksobot]

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

[sfi0zy]

🙋 Здравствуйте

Похоже это первая проверка, которую я провожу у вас на этом курсе. Стоит сказать пару слов. Меня зовут Иван.

Важный спойлер с информацией о процессе проверок и консультаций

Ключевые моменты прохождения курса со мной

Если вы все еще выбираете наставника, то обратите внимание на следующую информацию:

• Я провожу проверки д/з каждый будний день, обычно утром в 9-10 часов по Москве. Заниматься я рекомендую каждый день, чтобы постоянно быть в контексте происходящего, и чтобы у нас был постоянный контакт. Лучше заниматься каждый день понемногу, чем много, но раз в две недели.
• Студентов я веду от начала и до конца курса. Проверяю все строго, рассматриваю студентов как потенциальных коллег и помощников. Смотрю не только на то, что сделано, но и на то, как сделано. Ожидаю, что на уровне учебника задания будут делаться по большей части самостоятельно, а наше общение будет больше нацелено на передачу опыта. Возможно в какой-то момент вам покажется, что планка качества стоит очень высоко, сильно выше учебника. Это нормально. Тут не школа, чтобы "пройти" предмет. Мы постараемся готовить вас к ролям в проектах, которые вы, возможно, не занимали ранее. Это потребует изначально вложиться в анализ задач и наработать некоторые навыки, но они потом останутся с вами надолго.
• В проверках вам будут встречаться не только комментарии по текущему коду, но и дополнительные темы для самостоятельного изучения или обдумывания. Учебник больше раскрывает теоретические возможности инструментов, а информация в проверках - это мое дополнение к нему со стороны личной практики и набитых шишек. Они больше про привычки и подходы к работе, про то, что важно, а что не важно, про выбор инструментов, про риски и управление разработкой в проектах, похожих на учебный. На протяжении всего обучения там будут появляться разные советы, ключевые слова, чтобы погуглить, вопросы для самостоятельного анализа, а также альтернативные инструменты и подходы к решению задач, подобных учебным, или просто распространенных в мире не совсем стандартного фронтенда. Я буду подталкивать вас к разностороннему анализу решаемых задач, чтобы в перспективе вы видели весь контекст вокруг них и могли действовать самостоятельно, полностью контролируя происходящее.
• По поводу консультаций: код за вас писать не буду. Гуглить тоже. Если уж совсем не получается - подскажу, куда смотреть. Но лучше не спешить и постараться делать все самостоятельно. По идее учебник, материалы на MDN, и, в дальнейшем, документация к Three.js, должны с лихвой покрывать домашние задания в плане теоретической информации. Обычно я рекомендую обращаться за консультациями в конце каждой из 4 базовых тем (CSS/SVG/Canvas/WebGL), после выполнения всех заданий по теме, уже имея контекст происходящего в голове и проделанную работу, чтобы обсудить ее, закрыть оставшиеся после учебника и комментариев вопросы по инструментам, подходам, организации процессов разработки и.т.д. Рассматривайте мою роль в консультациях скорее как тимлида, к которому можно зайти с вопросами "а почему?", "а на что это влияет?", "а какие есть еще варианты?", и на равных обсудить все, что нужно, чем как репетитора с единственно правильными решениями, который все знает и еще и за вас что-то сделает. Таким образом можно будет получить максимальный результат.
• Асинхронные текстовые консультации проходят по будним дням. Для того, чтобы они были продуктивными и не очень растягивались во времени, имеет смысл сразу присылать списки вопросов, чтобы я мог отвечать сразу на все.
• Голосовые консультации возможны в понедельник и среду, в 9 и 10 часов утра по Москве. Точную дату и время нужно согласовывать заранее. Если вы отправляете заявку на голосовую консультацию - ожидайте письма на указанный у вас в профиле адрес.

Ссылки

Также сразу оставлю ссылки: Сайт, Хабр, Тостер, CodePen. Там можно посмотреть, чем я занимался в контексте анимаций и нестандартной верстки в целом, и какой опыт могу вам передать в рамках курса.

---

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

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

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

Чеклист:

• Эффект при наведении на пункт меню - меняется цвет, полоса рисуется слева направо. При убирании мыши - полоса убирается также слева направо.
• Плавные переходы состояния кнопки "Поделиться" и иконок социальных сетей. Иконки появляются по очереди, а пропадают все вместе.
• Блок "ОТГАДАЙ ПЕРВЫМ МЕСТО..." плавно появляется со смещением вверх.
• Плавное появление текстов на слайдах на экране истории. Тексты появляются по очереди, со смещением.
• Плавное появление текстового поля на экране игры. Радиус скругления углов при увеличении ширины не меняется.

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

☝️ - Обратите внимание, что полоса при наведении на пункт меню должна убираться вправо. Она появляется с одной стороны, а убирается в другую.

🔴 - Иконки кнопки соц сетей должны появляться по очереди, а не одновременно.

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

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

---

💡 - В рамках курса у нас есть второй проект - "Иллюзион". Там практически весь код, связанный с CSS-анимациями вынесен в отдельный файл. Альтернативно можно этот код поделить и хранить в файлах самих компонентов, к которым он относится. Предлагаю вам подумать, какой из этих двух вариантов организации кода будет удобнее и, главное, почему? Или может быть имеет смысл смешанный вариант? Не воспринимайте "эталонные" примеры как нечто единственно правильное. Возможны разные варианты. Раскритикуйте код Иллюзиона по полной программе и придумайте аргументы "за" и "против" предложенного там подхода с хранением кода всех анимаций в одном файле.

💡 - По мере прохождения курса мы будем затрагивать разные подходы к разным задачам, в том числе альтернативные учебнику, и будет хорошо, если вы уже сейчас начнете заниматься анализом того, что вы делаете. Какие есть классы задач? Какие есть классы инструментов? Почему что-то сделано так, а не иначе? Почему выбран именно такой инструмент? А какие еще есть варианты? Почему не вон тот инструмент? Почему? Почему? Почему? Анализируя контекст вы не только будете глубже разбираться в том, что делаете вы или ваши коллеги, но и будете развивать способность к аргументации собственных профессиональных решений в контексте наших задач. Очень полезная штука. А я буду время от времени вас подталкивать к размышлениям, задавая какие-то вопросы или делая отсылки к альтернативным инструментам. По мере прохождения курса они будут накапливаться, и мы сможем дополнительно обсудить все это на консультациях. В идеальном варианте к концу курса мы сможем сформировать у вас разностороннее видение предметной области, чтобы вы не просто слепо повторяли "единственно правильные решения" или что-то, что "всегда так делали", а все же четко понимали, что вы делаете, в каком контексте, и с какой целью. Но придется много думать, без этого никак.

Итог:

🔷 - Это задание будет формально принято, чтобы вы могли пройти на шаг вперед и влиться в процесс прохождения курса (доделать что-то можно в процессе выполнения следующих заданий). Но в дальнейшем обращайте внимание на детали. Они важны.

[sfi0zy]

☝️ - Весь макет сверстан в единицах rem, которые привязаны к размеру экрана. Фиксированные значения в px могут разойтись с ними и привести к багам или странным движениям на определенных размерах экрана. Лучше продолжать использовать rem. Если все же нужны пиксели, то стоит все проверять много раз на всех возможных размерах экранов - такие нестыковки легко пропустить.

💡 - Если вы раньше не сталкивались с версткой на плавающих размерах шрифта и с CSS-шлюзами, то будет полезно познакомиться с хорошей статьей по теме. В современном CSS у нас еще появилась функция clamp(), с помощью нее можно немного сократить код самих шлюзов, но суть происходящего не поменяется.

💡 - В целом при работе с CSS-анимациями очень важно обращать внимание на адаптивность. И, как ни странно, именно выбор единиц измерения часто будет отделять хорошо проделанную работу от глючного поделия, которое придется переверстывать, потому что оно рассыпается при малейшем изменении размера экрана. На появлении текста из прозрачности мы можем не заметить, что что-то поехало и логика анимации изменилась, но когда компоненты становятся более комплексными - проблемы становятся очевидными для всех вокруг. Обычно хорошей идеей будет выбор единиц измерения в соответствии с логикой в дизайне. Линия в 1 пиксель, смещение на высоту буквы (em/rem), увеличение от 0% до 100%, вписывание чего-то в размер окна (vh, vw, vmin, vmax) - там часто будет простое человеко-понятное описание происходящего. И его можно перенести в CSS с помощью местных единиц измерения. Поначалу такой подход может показаться требующим больших мыслительных усилий, чем тупая копипаста пикселей везде, или нагромождение media-выражений на каждый чих, но в долгосрочной перспективе мы экономим кучу времени на исправлениях и подпорках, чтобы все хоть как-то работало.

[sfi0zy]

☝️ - Где-то тут заложилась логическая ошибка. Если взять стандартный fullhd монитор и посмотреть на эту анимацию, то мы увидим, что в самом начале меняется длина кнопки с текстом. Она увеличивается, ее левый край прыгает, а текст смещается влево. Такого быть не должно. Кнопка должна стоять на месте.

☝️ - При работе с CSS анимациями важно следить за тем, чтобы они не ломали верстку вокруг себя. Анимации на одних элементах могут смещать другие, провоцировать появление скроллбаров от переполнения чего-то, давать изменения в размерах элементов в 1px (артефакты округления), которые заметно портят общее впечатление от интерфейса, могут просто скрывать за собой другие анимации или перебивать их стили, могут расходиться с изначальными состояниями компонентов, и.т.д. Помните о том, что анимации существуют не в вакууме, и всегда проверяйте, что они работают нормально после внедрения в реальный интерфейс.