Плавная анимация состояния

Оцените материал
(0 голосов)

Проблема

Анимация не всегда запускается сразу же по завершении загрузки страницы. Гораздо чаще мы хотим использовать анимацию в ответ на действия пользователя, такие как наведение мыши на элемент или удержание кнопки мыши, когда ее указатель находится на элементе (:active ). В подобной ситуации у нас не всегда есть контроль над фактическим числом итераций, так как действия пользователя могут приводить к тому, что анимация прервется до того, как будут воспроизведены все запланированные итерации. Например, пользователь может запустить симпатичную анимацию  :hover и убрать указатель мыши с элемента до того, как анимация завершится. Что, по вашему мнению, должно происходить далее в этом случае?

Если вы ответили что-то вроде «анимация должна застыть в текущем состоянии» или «она должна плавно вернуться в изначальное состояние», то вас ждет неприятный сюрприз. По умолчанию анимация прервется и резко перескочит в изначальное состояние. Иногда, если речь идет о малозаметной анимации, такое поведение может быть допустимым. Но в большинстве случаев это значительно ухудшает впечатление пользователей от работы с интерфейсом. Можно ли это как-нибудь изменить?

Это еще одна причина, для того чтобы по возможности пользоваться переходами. Вместо того чтобы резко перепрыгивать к изначальному состоянию, переходы воспроизводятся в обратном направлении, обеспечивая плавное возвращение в исходное состояние.

 

 

Решение

Предположим, что у нас есть очень длинная фотография в альбомной ориентации, такая, как показана на рисунке, но размер доступного пространства, на котором мы можем ее отображать, ограничивается 150 × 150 пикселов.

Один   из способов решить проблему отображения — добавить анимацию: показывать по умолчанию левый край и прокручивать изображение, открывая оставшуюся часть, когда пользователь взаимодействует с ним (например, наводит на него указатель мыши). Мы будем использовать для изображения один элемент, а анимировать будем позицию его фона:

.panoramic {
width: 150px; height: 150px;
background: url("img/naxos-greece.jpg");
background-size: auto 100%;
}

Сейчас результат выглядит, как показано на рисунке выше, и никакой анимации или интерактивности здесь нет. Но если мы поэкспериментируем, то заметим, что при изменении значения  background-position вручную с исходных  0 0 до  100% 0 будет происходить прокрутка всего изображения. Мы только что нашли наши ключевые кадры!

@keyframes panoramic {
to { background-position: 100% 0; }
}
.panoramic {
width: 150px; height: 150px;
background: url("img/naxos-greece.jpg");
background-size: auto 100%;
animation: panoramic 10s linear infinite alternate;
}

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

.panoramic {
width: 150px; height: 150px;
background: url("img/naxos-greece.jpg");
background-size: auto 100%;
}
.panoramic:hover, .panoramic:focus {
animation: panoramic 10s linear infinite alternate;
}

Это действительно работает, как и ожидается, когда мы наводим указатель мыши на изображение: оно начинает медленно прокручиваться, и мы получаем возможность увидеть его правую часть. Однако когда мы убираем с него указатель мыши, оно резко возвращается к изначальному состоянию, когда на экране виден только его левый край. Мы натолкнулись на проблему, которой и посвящен этот урок!


Для того чтобы исправить это, необходимо посмотреть на желаемый результат под другим углом. Мы не должны ставить себе целью запускать анимацию по событию  :hover , ведь при этом предыдущее положение не запоминается. Нам нужно приостанавливать анимацию, когда событие  :hover не происходит.

К счастью, существует свойство, назначение которого как раз и состоит в приостановке существующей анимации:  animation-play-state! Следовательно, мы применим нашу исходную анимацию к  .panoramic , но с самого начала поставим ее на паузу до тех пор, пока не сработает событие  :hover. Поскольку теперь суть решения не в том, чтобы запускать и отменять анимацию, а всего лишь в том, чтобы приостанавливать и продолжать существующую анимацию, резкой перемотки назад не происходит. Финальная версия кода представлена далее, а результат вы можете видеть на рисунке:


@keyframes panoramic {
to { background-position: 100% 0; }
}
.panoramic {
width: 150px; height: 150px;
background: url("img/naxos-greece.jpg");
background-size: auto 100%;
animation: panoramic 10s linear infinite alternate;
animation-play-state: paused;
}
.panoramic:hover, .panoramic:focus {
animation-play-state: running;
}


ПОПРОБУЙТЕ САМИ!

http://play.csssecrets.io/state-animations

Десерт на сегодня - подборка крутых прыжков:

Прочитано 131 раз Последнее изменение Воскресенье, 25 июня 2017 13:28
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

TemplateMonster

Поиск по сайту

Связной трэвел

tezeks

Google+