Чуть больше недели назад нам повезло, что Тиффани Браун присоединилась к нам на форумах SitePoint для своих живых вопросов и ответов по CSS-анимациям.
Я думаю, будет справедливо сказать, что с более чем 2200 просмотров это было довольно успешно! В случае, если вы пропустили это, я собрал основные моменты с мероприятия для вашего удовольствия от чтения.
Тиффани — независимый разработчик из Лос-Анджелеса. Она является автором CSS Master и соавтором Jump Start HTML5 . Прежде чем стать внештатным разработчиком, она входила в команду Opera Developer Relations и работала в небольших агентствах в Атланте. Тиффани теперь проводит свои дни, обучая мир веб-разработке с помощью своих письменных книг, блогов и статей.
Начиная
Q: Я инструктор в общественном колледже. Меня попросили исследовать и выложить веб-разработку AAS (2 года обучения) для веб-разработки. Есть так много вещей, из которых я могу выбрать, что я ошеломлен, когда пытаюсь выложить учебный план. Какой-нибудь совет для студентов по изучению веб-разработки? Я думал:
- HTML / CSS
- JavaScript / JQuery
- SQL
Основные проблемы — какие инструменты использовать, фреймворки, CMS и т. Д.?
Келле (персонал): Привет, Сьюзи, я действительно могу дать совет только по поводу внешнего интерфейса, но я думаю, что базовый HTML и CSS — отличное место для начала. С JavaScript, я думаю, что всегда лучше сначала изучать ванильный JavaScript, а затем внедрять библиотеки, чтобы студенты понимали разницу между языковой и библиотечной функциональностью.
Также полезно указать им правильные ресурсы, например, MDN — отличный справочник по API, который я хотел бы получить, когда начинал.
Тиффани: Я думаю, что это хороший путь. HTML и CSS. Я бы сказал, учить основам JavaScript, а не jQuery (или учить jQuery как часть JavaScript). SQL по-прежнему широко используется, так что это хорошее дополнение. Я бы также добавил серверный язык программирования:
- Ruby и его фреймворк Rails,
- Python и Django, и / или
- PHP + фреймворк Laravel.
Также полезно научить базовой конфигурации сервера: Nginx или Apache. Включите инструмент управления версиями в учебную программу, в идеале, как часть класса на что-то еще.
Q: Большое вам спасибо. Ванильный JavaScript — фантастическая идея. Как вы относитесь к Angular, Ember и Backbone?
Келле (персонал): Ember и Backbone хитры, потому что им нужен довольно приличный JS-фон, чтобы использовать их, по моему мнению.
Angular очень хорош для начинающих, особенно если они заранее нашли время, чтобы понять основы языка. Одна из хороших особенностей Angular (или плохая в зависимости от вашей точки зрения, но полезная для целей обучения) заключается в том, что она поставляется в комплекте с множеством полезных вещей, которые облегчают людям реализацию некоторых из наиболее важных идей в современной разработке переднего плана.
В SitePoint мы используем React почти исключительно, поэтому я довольно предвзят в отношении фреймворков представлений; однако, это определенно круче!
Гость: Фантастический совет. Я так благодарен. Спасибо за ответ. У вас есть рекомендации для инструмента управления версиями?
Тиффани: Я бы порекомендовал Git или Mercurial . SVN — это еще один вариант, но он не из приятных. Есть услуги, которые предлагают один или несколько из них, и студенты могут иногда получать бесплатные планы. Выполните поиск в Google / DuckDuckGo для размещенного Git или размещенного Mercurial, и вы найдете кучу.
В: Это одна из тех тем, в которые вы всегда хотите погрузиться, но у вас никогда не было времени, чтобы сделать это. Я всегда находил, что анимации были немного хитрыми и трудными для изучения, поэтому я всегда сдавался. Но эй! Может быть, мои впечатления неверны, и в конце концов они не такие хитрые. CSS-анимация значительно улучшилась, но большинство из тех, что я видел, все еще содержат кусочки JS (большую часть времени jQuery), поэтому мне кажется, что если вы хотите изучать одну, вы должны изучить другую.
Тиффани: Вы можете написать анимацию или переходы CSS, которые работают независимо от JavaScript. Анимации и переходы могут быть вызваны :hover:focus:checked Однако во многих случаях вам нужно добавить или удалить имя класса для запуска анимации / перехода. Так что, да, вам нужно выучить хоть немного JavaScript (но совсем чуть-чуть).
Рекомендации библиотеки
Q: Какие библиотеки анимации CSS вы рекомендуете? Я использую Animate.css
Tiffany: Animate.css — самый известный и самый дальний, так что я рекомендую это. Я слежу за Effekt.css, хотя. Это часть проекта HTML5 Boilerplate . В моих проектах переходов, как правило, было достаточно.
Q: Привет, вы бы порекомендовали использовать Hover.css ? Или почему нет?
Тиффани: Hover.css — это библиотека, к которой я не обращал достаточного внимания , чтобы составить мнение. Хорошо, что каждый предмет самодостаточен. Он позволяет вам выбирать, какие части использовать, и у него есть несколько умных анимаций. Я ни за, ни против.
Анимация
В: Вы бы порекомендовали использовать анимацию на настольных компьютерах или на мобильных устройствах? Если на мобильном телефоне, какие большие проблемы следует знать?
Тиффани: Вы можете использовать анимацию на любом устройстве с браузером, который ее поддерживает. Если устройство имеет более медленный процессор, вы можете столкнуться с некоторыми проблемами. Но это то, что (надеюсь) вы обнаружите во время тестирования.
Теперь, если ваша аудитория включает много пользователей Opera Mini , убедитесь, что ваши анимации и переходы используют запасной вариант. Opera Mini не поддерживает переходы или анимацию любого типа, будь то CSS или JavaScript.
В: Каковы ваши рекомендации по производительности, когда мы используем анимацию? Что использовать с осторожностью, чего следует избегать?
Тиффани:
Избегайте оплавления, где это возможно
Перекомпоновка происходит при изменении размеров объекта или его положения. Таким образом, вместо анимации сверху, справа, снизу и слева; использовать функции transformtranslate Поля и границы — это другие свойства, которые могут вызвать перекомпоновку. Я не проверял это, но подозреваю, что анимация может быть хорошим способом обойти это.
Анимация свойств объекта по ширине и высоте (в том числе свойств min / max там) также может инициировать перекомпоновку. Иногда вам нужно, хотя; использование transform: outlinescaleX()не всегда является хорошей альтернативой ширине и высоте.
Q: Мне интересно, есть ли практическое ограничение, размер или количество для использования элементов в анимации.
Тиффани: Как и во всем, что связано с сетью, тем больше элементов вы затрагиваете, тем медленнее может стать ваша страница. Но я не знаю каких-либо жестких ограничений для браузеров на количество элементов, которые можно анимировать одновременно. Однако существует проблема доступности для людей с эпилепсией или вестибулярными расстройствами. Вы хотите быть осторожным с анимацией слишком большого количества предметов одновременно. Вы также должны быть осторожны, чтобы не создавать анимации, которые занимают весь экран. WCAG2.0 имеет некоторые рекомендации для пользователей с приступами, которые полезны.
Q: Из того, что я видел до сих пор, анимации, переходы и преобразования используются для «улучшения», и я не заметил какого-либо использования там, где они сломались бы по какой-либо причине, на UX. Я предполагаю, что применяется тот же тип правил, что и «не используйте изображения без какой-либо формы альтернативного текста для передачи одного и того же сообщения».
Знаете ли вы о возможных проблемах в этом отношении?
Тиффани: Да! Есть довольно существенная разница в том, как переходы работают по сравнению с CSS-анимацией. Если браузер пользователя не поддерживает CSS-анимации, анимация не будет выполнена полностью. Вам нужно будет использовать запасной вариант JavaScript. Переходы, с другой стороны, будут просто переходить между начальным и конечным состояниями. Браузер будет игнорировать свойства, связанные с переходом. Это не симпатичный переключатель, но UX не сломается.
Переходы и анимации также требуют значений, которые можно интерполировать . Возможно, вы столкнулись с ситуацией с анимацией на или с высоты: auto, и обнаружили, что она не работает. Это потому, что начальное и конечное значения свойства должны быть числовыми, чтобы браузер мог определить значения между ними.
Я также рекомендую не связывать критически важные действия, такие как отправка формы Ajax, с событиями scaleY()transitionEnd Взаимодействие с пользователем может предотвратить эти события.
Q: Какая анимация лучше работает с JavaScript?
Q: Меня интересует то же самое. Приняв, что «CSS — это стиль», мне показалось неправильным, когда я впервые увидел, что CSS делает то, что я обычно использую для JavaScript. Теперь мне интересно, будет ли новый CSS больше «для тех, кто не знает JavaScript», или есть ли реальные преимущества, которые можно получить?
Тиффани: Здесь мы сталкиваемся с верхними границами моих знаний. Я думаю, что это зависит от браузера. Насколько мне известно, это в значительной степени ничья. Операции с позициями, размерами или полями в любом случае довольно медленные.
Недостатком JavaScript является то, что JavaScript-анимация происходит в том же потоке, что и все другие ваши JS. Вы потенциально влияете на производительность и отзывчивость вашего интерфейса.
Используя CSS, вы освобождаете движок JavaScript. И в некоторых браузерах вы получите преимущество обработки графическим процессором.
Теперь с SVG у вас не всегда есть выбор. Вы должны использовать SMIL , но SMIL не поддерживается в IE или Edge, и он устарел в Chrome. Так что проще использовать JavaScript, если вы хотите анимировать форму пути.
Пол (Гость): Я считаю, что CSS-анимации намного более плавные, чем JS-анимации, особенно анимации jQuery, которые очень нервные. Конечно, в некоторых случаях вам может понадобиться немного JS, чтобы вызвать CSS-эффект при необходимости.
Q: Вы сказали, что анимации jQuery нервные, но как насчет использования чего-то вроде speed.js против CSS-анимации? Информация о speed.js говорит о том, что он лучше работает на мобильных устройствах, чем CSS-анимации.
Пол (Гость): Да, я использую speed.js для анимированных меню на мобильных устройствах, и это намного плавнее, чем jQuery. Я полагаю, это зависит от того, что вы делаете, но иногда все, что вам нужно сделать в JS, это добавить класс к элементу и позволить CSS анимировать его, а не заставлять JS также анимировать элемент. (Имейте в виду, я все равно довольно мусор в JS.)
Тиффани. Используя CSS для анимации и переходов, вы перемещаете эти задачи из потока JavaScript в поток обработки графики. При использовании JavaScript для анимации вы рискуете, что другие операции JS будут задержаны до завершения анимации. С помощью CSS часть JavaScript ваших страниц остается доступной. Если вы хотите определить, когда анимация / переход завершен, вы можете сделать это асинхронно, используя события animationEndtransitionEnd
Что еще мне нравится в использовании CSS-анимации, так это то, что вы можете комбинировать их с медиа-запросами. Объект может скользить горизонтально по широкому экрану, но переворачиваться на маленькие (или что-то). И если у пользователя заблокирован JavaScript, анимация все равно будет работать (кроме обработки событий, конечно).
Советы по анимации
Q: Привет, @webinista! Мне было интересно, есть ли у вас какие-либо советы или правила для плавной, производительной анимации? Есть ли что-то, что мы должны избегать анимации?
Тиффани: Да! Я недавно столкнулся с этой проблемой. Будьте осторожны с анимацией свойств, которые изменяют размеры или положение объектов на вашей странице (также называемые причиной перекомпоновки). Это может быть особенно медленно, в зависимости от браузера.
-
animationEnd -
top -
left -
right -
bottom
Вместо этого используйте свойство margin-*transformtranslate()translateX() @PaulOB хорошо ответил на этот вопрос.
Я также столкнулся с проблемами со свойством translateY()filter Размытие по Гауссу довольно дорого для расчета. Так что я бы сказал, чтобы избежать анимации / перехода это сейчас.
Пол (Гость): Используйте перевод, чтобы переместить вещи, а не абсолютное позиционирование, поскольку это более производительно.
Вопрос: Какой последний трюк с анимацией или переходами вы сочли очень полезным или хитрым? Например, моя была blur() Благодарность!
Тиффани: Ооо. Это хороший.
Работая над книгой, я
animation-delaycubic-bezierЭто очень интересно для меня, потому что это уровень математики, который я люблю и боюсь одновременно .
Я хотел бы подвести итог, как это работает на макушке моей головы. Но короткая версия состоит в том, что когда 2-е и 4-е значения больше / меньше 1, это создаст эффект «перерегулирования» или «дублирования». Вы можете видеть, что я имею в виду здесь .
Анимация на сайтах
Вопрос: Прямо сейчас я вижу очень много людей, говорящих об анимации и ее возможностях, но помимо того, что кажется очень впечатляющими тестовыми образцами, например , Lava Lamp Криса Гэннона . Я не совсем уверен, где они вписываются в лексикон веб-дизайна. Как, по вашему мнению, они будут использоваться на бизнес-сайте (например), и есть ли у вас примеры, на которые вы можете указать?
Тиффани: Мы начинаем видеть анимацию и переходы на бизнес-сайтах. У MailChimp есть один из моих любимых примеров. После того, как вы запланируете электронную почту, появится анимированный SVG шимпанзе с «металлическими пальцами», побуждающий вас «качаться». К сожалению, он виден только зарегистрированным клиентам.
Я думаю, что вы увидите анимацию — и я включаю переходы — раньше добавляли такого рода прихоти. Вы можете делать умные загрузки анимации и эффекты наведения. Скажем, раскрытие всего объекта при наведении курсора на анимацию свойства clip-path McDonald’s может анимировать логотипы своих арок. Я думаю, вы также увидите анимированные графики в сочетании с SVG.
Это упаковка!
Как эти слова мудрости? Тиффани провела дополнительные 1,5 часа на форумах с нами, обсуждая CSS-анимацию. Если вы только читаете эту дискуссию здесь, то я бы сказал, что можно с уверенностью предположить, что вы пропустили событие. Однако нет необходимости чувствовать, что вы пропустили, потому что вы все еще можете прочитать всю дискуссию и продолжать принимать участие. А еще лучше, начните свое собственное обсуждение на форуме .