Содержание
- 01. Придерживайтесь четырех основных свойств.
- 02. Введите скорость
- 03. Выбери подходящий момент
- 04. Остановить и запустить с состоянием воспроизведения анимации.
- 05. Подумайте о доступности
- 06. Создайте цепочку анимаций для воздействия
- 07. Используйте will-change для повышения эффективности
- 08. Анимация шрифтов с переменными шрифтами.
- 09. Используйте переменные, чтобы поддерживать согласованность
- 10. Сохраняйте естественность с помощью дуги.
- 11. Воспроизвести
- 12. Подумайте о том, как поразить
При правильном выполнении CSS-анимация может вдохнуть жизнь в ваш сайт и привлечь ваших пользователей без использования дополнительных библиотек. Создание продуманных, плавных анимаций, которые придают содержательную глубину вашему сайту, не должно быть сложной задачей - современные свойства CSS теперь предоставляют вам почти все инструменты, необходимые для создания незабываемых впечатлений для ваших пользователей.
В этой статье мы рассмотрим несколько основных советов, как раскрыть все возможности интерактивной CSS-анимации. Пока вы здесь, вы также можете ознакомиться с нашим обзором потрясающих примеров CSS-анимации.
Многие из этих советов относятся к принципам анимации Диснея - и действительно, в любой достойной статье о создании анимации было бы упущением не упомянуть об этом. Ознакомьтесь с нашей специальной статьей о 12 основных принципах анимации Диснея, чтобы получить полное руководство. Они были представлены в основополагающей книге Фрэнка Томаса и Олли Джонстон «Иллюзия жизни» и стали отличной отправной точкой для новичков в анимации.
01. Придерживайтесь четырех основных свойств.
CSS-анимация обеспечивает относительно простой способ плавного перехода большого количества свойств. Хорошие сплошные анимированные интерфейсы зависят от плавного и плавного взаимодействия, и для этого лучше всего обеспечивать 60+ FPS (кадров в секунду). Чтобы сохранить производительность в наших временных шкалах анимации, мы постараемся изо всех сил ограничить наши анимированные свойства четырьмя основными:
- Шкала - преобразование: масштаб (2)
- Должность - преобразовать: translateX (50rem)
- Вращение - преобразовать: повернуть (180 градусов)
- Непрозрачность - непрозрачность: 0,5
Анимация свойств, таких как радиус границы, высота / ширина или поля, повлияет на методы компоновки браузера, а анимация фона, цветов или теней блока повлияет на методы рисования браузера и значительно снизит ваш FPS. Анимация этих свойств может дать некоторые интересные эффекты, но их следует использовать с осторожностью, чтобы поддерживать производительность.
02. Введите скорость
Один из основных принципов анимации Диснея - сжатие и растяжка. Хотя это может показаться слишком игривым для чистого, современного веб-сайта, сжатие и растягивание - это принципы, которые прививают воспринимаемую производительность, то есть мы можем привить ощущение производительности страницы, которое может не совпадать с нашими техническими показателями. Сжимая или растягивая элементы в движении, мы придаем им иллюзию большей (или меньшей) скорости, снова придавая нашей странице ощущение подлинной плавности.
03. Выбери подходящий момент
Независимо от того, какую библиотеку или стек вы выберете для использования, синхронизация и замедление анимации имеют решающее значение для обеспечения плавного взаимодействия, которое кажется естественным и интуитивно понятным для ваших пользователей. К счастью, у нас есть много отличных вариантов, встроенных прямо в CSS, которые помогают создать более органичный вид.
Спецификация CSS предлагает нам несколько отличных нативных функций плавности, наиболее естественными из которых являются легкость входа, что позволяет времени анимации увеличивать и уменьшать скорость, когда анимация начинается и заканчивается. Но более глубокая настройка возможна, а иногда и необходима - и дополнительные библиотеки JS не всегда являются ответом.
Входить кубический Безье. Это помогает думать о времени вашей анимации как о следовании вертикальной кривой, как если бы вы катили мяч вверх или вниз по холму, отмечая, как скорость изменяется с каждым изменением степени наклона. Используя функцию кубического безье, мы можем эффективно сопоставить нашу анимацию или переход с этими кривыми, даже учитывая как ожидание - эффективные завершающие или вводные кадры нашей анимации - так и завершение, то есть заключительные кадры. анимации.
Имея доступ к этим свойствам, мы можем придать нашей анимации более реалистичную физику, например эластичность. Чтобы получить отличный визуальный индикатор того, как эти функции могут работать (и проверить их самостоятельно), посетите отличный сайт easings.net Андрея Ситника. Если вы хоть немного знакомы с кривыми и ручками векторного рисунка, вы сразу поймете, как кубический Безье работает.
Поскольку ключевые кадры анимации CSS обычно содержат несколько сегментов, редко непосредственно переходящих от 1 до 100%, важно помнить, что любая функция синхронизации, кроме линейный будет выполняться от начала до конца кривой движения для каждого сегмента.
Пример: ключевые кадры анимации находятся в диапазоне от 0% - 25% - 75% - 100%, и используйте легкость входа как временная функция. Это означает, что анимация будет эффективно появляться и исчезать в трех случаях. Имея это в виду, при необходимости функции синхронизации анимации также могут быть изменены в самих цепочках ключевых кадров. Так же способно, как кубический Безье иногда лучше всего подходит для переходов CSS. Проверьте CodePen ниже.
04. Остановить и запустить с состоянием воспроизведения анимации.
С помощью состояние воспроизведения анимации свойство, вы можете легко запускать или приостанавливать анимацию. Например, вы можете захотеть остановить анимацию при наведении курсора. Для этого используйте состояние-воспроизведения-анимации: приостановлено. Эта опция предложит вашим пользователям большую степень интерактивности, и в тандеме с разделенными запятыми свойствами анимации в цепочке или несколькими короткими строками JavaScript мы можем точно определить, когда анимация должна быть активной.
05. Подумайте о доступности
Работая над улучшением взаимодействия с пользователем с помощью анимации, мы часто не думаем о доступности. Не все могут наслаждаться движением в Интернете. Для некоторых пользователей - например, склонных к судорогам - это потенциально может вызвать серьезные проблемы со здоровьем.
К счастью, есть все более популярный медиа-запрос, который мы можем использовать: предпочитает ограниченное движение. Этот запрос работает в тандеме с пользовательскими настройками ОС, что позволяет нам ограничивать анимацию по мере необходимости. Например, представьте, что мы используем особенно неистовую анимацию, используемую, чтобы передать ощущение срочности и привлечь пользователя к призыву к действию. С использованием предпочитает ограниченное движение мы можем сохранить этот элемент статическим.
@media (предпочитает-уменьшенное-движение: уменьшение) {.wildlyFlailing {анимация: нет; }}
Следует иметь в виду несколько важных вещей: если анимированные элементы используют режим заливки анимации, который определяет конечное состояние, убедитесь, что элементы загружаются в этом конечном состоянии при нацеливании на пользователей, чувствительных к движению. Если элемент использует анимацию для перемещения его в позицию окна просмотра, мы должны быть уверены, что он меняет положение с помощью двухкадровой пошаговой анимации или с переходом через 0 секунд.
06. Создайте цепочку анимаций для воздействия
Одна из самых упускаемых из виду возможностей CSS-анимации - это возможность объединять анимации в цепочку. То есть мы можем определять каждую анимацию отдельно через запятую, но запускать их в тандеме.
Например, мы можем создать одну анимацию для поворота нашего элемента, вторую анимацию для масштабирования размера фона и третью, чтобы настроить ее непрозрачность для постепенного появления и исчезновения. Более того, мы можем применять к этой анимации дополнительные свойства, такие как значения, разделенные запятыми, для управления задержками, функциями синхронизации, длительностью или даже состояниями воспроизведения.
В то время как связанные анимации могут потребовать значительного количества настроек для синхронизации всех свойств в движении, они также предлагают нам большой детальный контроль над тем, как мы выбираем время и упрощение каждого анимированного свойства, создавая сложное движение с гораздо меньшим количеством строк CSS. (или необходимые элементы DOM).
07. Используйте will-change для повышения эффективности
Одно отличное свойство, которое есть в каждом наборе инструментов CSS-аниматора, - это малоизвестное, но очень полезное свойство изменится. Раньше было несколько хитрых методов, которые вы могли использовать, чтобы обмануть браузер и заставить аппаратное ускорение наших анимированных или переходных свойств - и они вроде как работали. Однако теперь у нас есть специальное свойство, к которому можно подключиться; а также изменится может дать необходимый импульс производительности вашей анимации.
Хотя есть некоторые общие значения по умолчанию для изменится там, как правило, мы хотим определить, какое свойство будет обновляться для какого элемента - например, будет-изменить: преобразовать или, если необходимо объединение в цепочку, будет-изменение: радиус-границы, непрозрачность.
Проще говоря, изменится свойство сообщает нашему браузеру, что эти элементы - неожиданно - изменятся. В результате производительность этих элементов, как правило, будет иметь приоритет и аппаратное ускорение.
Давайте изменится все вещи! Нет, нет, нет - чрезмерное использование этого свойства или установление приоритета для всех ваших анимированных или переходных элементов вызовет большую нагрузку на оборудование, чем это компенсирует. Так что помните: используйте его экономно и только для анимации или переходов, которые имеют решающее значение для создания впечатлений, которые вы создаете, изменится может дать вам необходимый импульс.
08. Анимация шрифтов с переменными шрифтами.
Типографику всегда было сложно правильно анимировать. Конечно, мы можем анимировать размер шрифта (свойство, которое лучше обрабатывать с помощью анимации масштаба) и цвет, но с введением переменных шрифтов у нас теперь есть целый новый набор анимированных параметров в нашем наборе инструментов.
Для непосвященных вариативные шрифты содержат несколько вариантов шрифта в одном файле шрифта с возможными вариациями в весе, углах, украшениях и многом другом. Более того, все эти варианты можно анимировать в CSS с помощью настройки-вариации-шрифта. Используя это, мы теперь можем плавно переходить от нормального к курсиву, светлого к полужирному или от полос к без перекоса, все с ощущением морфинга SVG - потому что во многих отношениях это именно то, что здесь происходит.
09. Используйте переменные, чтобы поддерживать согласованность
Отличный способ сохранить согласованность - использовать переменные CSS или переменные препроцессора для определения времени анимации.
: root {time-base: 1000;}
Установка базовой анимации или продолжительности перехода без определения единицы (секунды или миллисекунды) дает нам гибкость для вызова этой продолжительности в пределах calc () функция. Хотя продолжительность может отличаться от нашей базовой переменной CSS, она всегда будет простой модификацией этого числа и поддерживать единообразие.
10. Сохраняйте естественность с помощью дуги.
Снова возвращаясь к 12 принципам анимации Диснея, мы видим упоминание дуги. Рассматриваемая дуга относится к по сути круговому движению, при котором происходит большинство естественных движений. Очень редко в повседневной жизни мы наблюдаем движение по прямой. И хотя это проще и требует меньшего количества ключевых кадров для анимации строго слева направо или сверху вниз, мы можем предложить нашим пользователям более удобный опыт, помня об этой дуге, признавая при этом, что некоторые макеты в конечном итоге запрещают нам анимация наших элементов вокруг изогнутых контуров (часто создавая помехи для других элементов).
11. Воспроизвести
Иногда лучший способ по-настоящему почувствовать, как формируется анимация вашего интерфейса, - это создать запись экрана. Очевидно, что наблюдение за тем, как что-то работает, является отличным способом убедиться, что ваша анимация работает так, как вы хотите.
Так как же автору этой статьи убедиться, что он получает то, что хочет? Как терминал, занимающийся демонстрациями CodePen, он любит создавать GIF-изображения для экранных изображений своих анимаций. Набор этих GIF-файлов и их правильное зацикливание на самом деле служит другой цели. Это позволяет ему просматривать анимацию и диагностировать любые проблемы с синхронизацией или динамикой.
12. Подумайте о том, как поразить
При работе с циклическими геометрическими или основанными на узорах CSS-анимациями часто бывает полезно смещать наши анимации с помощью задержек анимации. Это может стать проблемой, если элемент вошел в область просмотра, но мы просим пользователя дождаться начала анимации. Мы можем добиться того же типа смещения анимации, используя отрицательные задержки, гарантируя, что временная шкала анимации запускается немедленно при загрузке страницы, без времени ожидания для пользователя.
Эта статья изначально появилась в журнале Web Designer. Изучите все наши статьи о веб-дизайне здесь.
Присоединяйтесь к нам в апреле 2020 года с нашей линейкой суперзвезд JavaScript на GenerateJS - конференции, которая поможет вам создать лучший JavaScript. Забронируйте сейчас наgenerateconf.com
