Веб-анимация является одним из факторов, который может сильно улучшить внешний вид вашего веб-сайта. К сожалению, в отличие от мобильных приложений, не так много сайтов используют анимацию в своих интересах, как вы думаете. Мы не хотим причислять вас к ним, поэтому эта статья предназначена для вас и всех, кто ищет способы использовать анимацию для лучшего взаимодействия с пользователем! В частности, мы узнаем, как сделать веб-взаимодействие восхитительным с помощью CSS-анимации.
Вот что мы собираемся построить вместе:
Прежде чем мы продолжим, стоит упомянуть, что я собираюсь предположить, что вы хотя бы немного знакомы с современными интерфейсными средами и базовым пониманием CSS-анимации. Если нет, то не бойтесь! У CSS-Tricks есть отличные руководства по React и Vue, а также подробный пост альманаха по свойству CSS animation .
Хорошо? Хорошо, давайте поговорим о почему мы хотели бы использовать анимацию в первую очередь и покрыть некоторую базовую информацию о CSS-анимациях.
Содержание статьи
Зачем нам что-то оживлять?
Возможно, мы могли бы сделать целый пост только на эту тему. Ой, подожди! Сара Драснер уже сделала это, и ее очки являются острыми и убедительными.
Но, чтобы подвести итог, основываясь на моем собственном опыте:
- Анимации улучшают взаимодействие пользователей с интерфейсом. Например, интеллектуальные анимации могут снизить когнитивную нагрузку, предоставляя пользователям лучший контекст между переходами страниц.
- Они могут предоставить пользователям четкие подсказки, например, о том, где мы хотим, чтобы они сосредоточили внимание.
- Анимации служат еще одним шаблоном проектирования, помогая пользователям эмоционально привязываться к интерфейсу и взаимодействовать с ним.
- Еще одно преимущество использования анимаций заключается в том, что они могут создать ощущение, что сайт или приложение загружаются быстрее, чем на самом деле.
Пара домашних правил с анимацией
Вы когда-нибудь сталкивались с сайтом, который оживляет все вещи ? Вау, это может быть неприятно. Итак, вот пара вещей, которых следует избегать при работе с анимацией, чтобы наше приложение не попало в одну лодку:
- Избегайте анимации CSS-свойств, отличных от
transformиopacity. Если нужно анимировать другие свойства, например, ширину или высоту, убедитесь, что не происходит много изменений макета одновременно. На самом деле анимации обходятся дорого, и вы можете точно узнать, сколько стоит, обратившись к триггерам CSS. - Кроме того, только из-за того, что анимация может создавать ощутимый прирост производительности, на самом деле есть смысл уменьшить отдачу, когда дело доходит до их использования. Одновременная анимация слишком большого количества элементов может привести к снижению производительности.
Теперь мы можем испачкать руки кодом!
Давайте создадим музыкальное приложение
Мы собираемся создать музыкальное приложение, на которое мы смотрели ранее, которое вдохновлено выстрелом Дрибббла Аурелиена Саломона. Я выбрал этот пример, чтобы мы могли сосредоточиться на анимации не только внутри компонента, но и между различными маршрутами. Мы создадим это приложение с помощью Vue и создадим анимацию с использованием ванильного (то есть без фреймворка) CSS.
Анимации должны идти рука об руку с разработкой пользовательского интерфейса. Создание пользовательского интерфейса до определения их движения, вероятно, будет стоить гораздо больше времени. В этом случае выстрел Dribbble предоставляет нам такую возможность.
Давайте начнем с разработки.
Шаг 1: раскрутить приложение локально
Перво-наперво. Нам нужно создать новый проект Vue. Опять же, мы предполагаем некоторое базовое понимание Vue здесь, поэтому, пожалуйста, ознакомьтесь с руководством Learning Vue для получения дополнительной информации о настройке.
Нам нужна пара зависимостей для нашей работы, в частности, vue-router для перехода между представлениями и sass-loader чтобы мы могли писать в Sass и компилировать в CSS. Вот подробное руководство по использованию маршрутов, и Sass можно установить, указав командную строку в каталоге проекта и используя npm install -D sass-loader node-sass .
У нас есть то, что нам нужно!
Шаг 2: Настройка маршрутов
Для создания маршрутов мы сначала создадим два минимальных компонента — Artists.vue и Tracks.vue . Мы поместим новый файл в папку src с именем router.js и добавим маршруты для этих компонентов как:
импорт Vue из 'vue'
импортировать роутер из 'vue-router'
импортировать художников из ./components/Artists.vue
импортировать треки из ./components/Tracks.vue
Vue.use (маршрутизатор)
экспорт по умолчанию новый маршрутизатор ({
режим: «история»,
маршруты: [
{
path: '/',
name: 'artists',
component: Artists
},
{
path: '/:id',
name: 'tracks',
component: Tracks
}
]
})
Импортируйте router.js в main.js и внедрите его в экземпляр Vue. Наконец, замените содержимое вашего App.vue на .
Шаг 3. Создание компонентов и контента для музыкального приложения
Нам нужны два компонента, между которыми мы перейдем с анимацией. Это будут:
-
Artists.vue: сетка художников -
Tracks.vue: изображение художника с кнопкой «назад»
Если вы хотите немного продвинуться вперед, вот некоторые преимущества для работы:
- Изображения и образцы данных в формате JSON.
- Содержимое для компонентов
Когда все будет сказано и сделано, два взгляда получатся примерно такими:
Шаг 4: Анимировать!
Вот мы, та часть, которую мы действительно хотели получить за все это время. Самая важная анимация в приложении — переход от Artists к Tracks при нажатии на исполнителя. Это должно быть легко, когда нажатие на изображение художника помещает это изображение в фокус при переходе от одного вида к другому. Это именно тот тип анимации, который мы редко видим в приложениях, но он может значительно снизить когнитивную нагрузку для пользователей.
Чтобы убедиться, что мы все на одной странице, мы будем называть первое изображение в последовательности «предыдущим», а второе — «текущим». Уменьшить эффект относительно легко, если мы знаем размеры и положение предыдущего изображения в переходе. Мы можем анимировать текущее изображение, преобразовав его, как на предыдущем изображении.
Я использую формулу transform: translate (x, y) scale (n) где n равен размеру предыдущего изображения, деленному на размер текущего изображения. Обратите внимание, что мы можем использовать статическое значение n поскольку размеры фиксированы для всех изображений. Например, размер изображения в представлении «Исполнители» составляет 190x190 и 240x240 в представлении «Треки». Таким образом, мы можем заменить n на 190/240 = 0,791 . Это означает, что значение преобразования становится масштабом перевода (x, y) (0,791) в нашем уравнении.
Следующая вещь — найти x и y . Мы можем получить эти значения, хотя событие click в представлении Artists как:
const {x, y} = event.target.getBoundingClientRect ()
… и затем отправлять эти значения в представление Tracks, все при переключении маршрута. Поскольку мы не используем какую-либо библиотеку управления состоянием, два компонента будут взаимодействовать через родительский компонент, который является компонентом верхнего уровня, App.vue . В App.vue давайте создадим метод, который переключает маршрут и отправляет информацию об изображении в виде параметров.
gotoTracks (position, artistId) {
это. $ router.push ({
название: «следы»,
params: {
id: artistId,
позиция: позиция
}
})
}
Вот соответствующий код репозитория для справки, если вам это интересно.
Поскольку мы получили положение и идентификатор изображения в дорожках, у нас есть все необходимые данные для его отображения и анимации. Сначала мы получим информацию об исполнителе (в частности, имя и URL-адрес изображения), используя идентификатор исполнителя.
Чтобы анимировать изображение, нам нужно вычислить значение преобразования из начальной позиции изображения. Чтобы установить значение transform я использую пользовательские свойства CSS, которые также можно сделать с помощью методов CSS-in-JS. Обратите внимание, что позиция изображения, которое мы получили через реквизит, будет относительно окна. Поэтому нам придется вычесть некоторое фиксированное смещение, вызванное заполнением контейнера
const {x, y} = this. $ Route.params.position
// padding-left
const offsetLeft = 100
// padding-top
const offsetTop = 30
// Установить значение пользовательского свойства CSS
document.documentElement.style.setProperty (
'--переведите',
`translate ($ {x - offsetLeft} px, $ {y - offsetTop} px) масштаб (0,792)`
)
Мы будем использовать это значение для создания анимации ключевых кадров для перемещения изображения:
@keyframes move-image {
от {
transform: var (- translate);
}
}
Это присваивается анимации CSS:
.image {
анимация: move-image 0.6s;
}
… и оно будет анимировать изображение из этого значения преобразования в исходное положение при загрузке компонента.
Мы можем использовать ту же технику при движении в противоположном направлении, треки к артистам. Поскольку у нас уже есть позиция изображения, по которому щелкнули мышью, в родительском компоненте, мы можем передать его реквизитам и для художников.
Шаг 5: Показать треки!
Хорошо, что теперь мы можем плавно перемещаться между нашими двумя представлениями, но в настоящий момент представление Tracks довольно редкое. Итак, давайте добавим список треков для выбранного исполнителя.
Мы создадим пустой белый прямоугольник и новый ключевой кадр, чтобы сдвинуть его вверх при загрузке страницы. Затем мы добавим к нему три подраздела: Недавние треки, Популярные треки и Плейлист. Опять же, если вы хотите забегать вперед, не стесняйтесь ссылаться или скопировать окончательный код из репозитория.
«Недавние треки» — это ряд миниатюр, расположенных чуть ниже изображения исполнителя, где каждый эскиз содержит название и длину трека под ним. Поскольку мы рассмотрим здесь анимацию, мы создадим анимацию в увеличенном масштабе, в которой изображение станет невидимым ( непрозрачность: 0 ) и немного меньше его естественного размера (масштаб (0,7) ), затем раскрывается ( непрозрачность: 1 ) и масштабируется до своего естественного размера (преобразование : нет ).
.track {
непрозрачность: 0;
преобразование: масштаб (0,7);
анимация: масштаб 1с, легкость вперед;
}
@keyframes scale-up {
к {
непрозрачность: 1;
преобразование: нет;
}
}
Список популярных треков и список воспроизведения располагаются рядом с последними треками, где популярные треки занимают большую часть пространства. Мы можем немного увеличить их на начальном экране с помощью другого набора ключевых кадров:
.track {
...
анимация: слайд 1,5 с;
}
@keyframes slide-up {
от {
transform: translateY (140px);
}
}
Чтобы сделать анимацию более естественной, мы создадим эффект ошеломления, добавив добавочную задержку анимации к каждому элементу.
@for $ i от 1 до 5 {
&: nth-child (# {$ i + 1}) {
задержка анимации: # {$ i * 0.05} с;
}
}
Приведенный выше код в основном ищет каждый дочерний элемент, а затем добавляет задержку в 0,05 секунды для каждого элемента, который он находит. Так, например, первый ребенок получает задержку в 0,05 секунды, второй ребенок получает задержку в 0,10 секунды и т. Д.
Посмотрите, как это красиво и естественно выглядит:
Бонус: микровзаимодействия!
Одна из забавных вещей в работе с анимацией — это продумывать мелкие детали, потому что они объединяют вещи и добавляют удовольствия в работу пользователя. Мы называем эти микровзаимодействия, и они служат хорошей цели, обеспечивая визуальную обратную связь при выполнении действия.
В зависимости от сложности анимации нам может понадобиться библиотека, например anime.js или GSAP. Этот пример довольно прост, поэтому мы можем выполнить все, что нам нужно, написав немного CSS.
Первое микро-взаимодействие: значок громкости
Давайте сначала получим значок громкости в формате SVG (существительные Project и Material Design — хорошие источники). При щелчке мы будем анимировать вход и выход элемента path чтобы показать уровень громкости. Для этого мы создадим метод, который переключает свой класс CSS в соответствии с уровнем громкости.
На основе этого класса мы можем показывать и скрывать некоторые элементы path как:
путь {
непрозрачность: 0;
transform-origin: слева;
transform: translateX (-5px) шкала (0,6);
переход: преобразование 0,25 с, непрозрачность 0,2 с;
}
.level-1 путь: первый ребенок,
.level-2 путь: первый ребенок,
.level-2 путь: nth-child (2),
.level-3 path {
непрозрачность: 1;
преобразование: нет;
}
Второе микро-взаимодействие: любимая иконка
Вам нравится, когда вы нажимаете на кнопку сердца Twitter? Это потому, что он чувствует себя уникальным и особенным по тому, как он оживляет при нажатии. Мы сделаем нечто подобное, но очень быстро. Для этого мы сначала получаем значок сердца SVG и добавляем его в разметку. Затем мы добавим к нему оживленную анимацию, которая срабатывает при нажатии.
@keyframes bounce {
0%, 100% {
преобразование: нет;
}
30% {
преобразование: масштаб (1,3);
}
60% {
преобразование: масштаб (0,9);
}
}
Еще одна забавная вещь, которую мы можем сделать, — добавить вокруг нее другие маленькие сердечные иконки со случайными размерами и позициями. В идеале мы добавили бы несколько абсолютных элементов HTML, которые в качестве фона являются сердцем. Давайте расположим каждый из них, как показано ниже, установив их значения слева и снизу .
Мы также добавим эффект затухания, поэтому значки будут растворяться при движении вверх, добавляя анимацию ключевого кадра в одно и то же событие щелчка.
@keyframes плавать вверх {
0%, 100% {
непрозрачность: 0;
}
50% {
непрозрачность: 0,7;
}
50%, 100% {
transform: translate (-1px, -5px);
}
}
Подведение итогов
Вот и все! Я надеюсь, что вы найдете всю эту мотивацию попробовать анимацию на своих сайтах и в своих проектах.
Во время написания этой статьи я также хотел расширить фундаментальные принципы анимации, которые мы рассмотрели ранее, потому что я считаю, что они помогают выбирать продолжительность анимации и избегать бессмысленных анимаций. Это важно обсудить, потому что делать анимации правильно лучше, чем делать их вообще. Но это звучит как целая другая тема, которая будет рассмотрена в будущей статье.
(Пока оценок нет)
Загрузка...
