Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Цикл уроков об анимациях CSS3. Часть 4. Анимации и программный интерфейс JavaScript

28 марта 2015 | Опубликовано в css | Нет комментариев »

Анимации дают много возможностей, но нередко бывает необходимо добавить взаимодействие или задать определенную последовательность ключевых кадров, которые будут воспроизведены один за другим. Например, анимация может запускаться в ответ на нажатии клавиши или движение мыши.

 

Типы событий 

Анимированный элемент вызывает событие трех типов:

  • animationstart — событие вызывается, когда анимация начинается в первый раз.
  • animationiteration — событие вызывается в начале каждого цикла, кроме первого раза.
  • animationend — событие вызывается, когда анимация завершена, если она вообще заканчивается.

Поддержка браузерами 

Эти три типа событий поддерживаются браузерами Firefox, Internet Explorer от версии 10 и Opera версии 12.

К сожалению, браузерам Chrome, Safari и Opera от версии 15 требуется приставка производителя webkit, а также запись в стиле ВерблюжьегоРегистра: webkitAnimationStart, webkitAnimationIteration и webkitAnimationEnd.

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

// анимируемый элемент
var anim = document.getElementById("myelement");

// обработчики событий для браузеров на движке Webkit
anim.addEventListener("webkitAnimationStart", AnimationListener);
anim.addEventListener("webkitAnimationIteration", AnimationListener);
anim.addEventListener("webkitAnimationEnd", AnimationListener);
// стандартные обработчики событий
anim.addEventListener("animationstart", AnimationListener);
anim.addEventListener("animationiteration", AnimationListener);
anim.addEventListener("animationend", AnimationListener); 

Объект события 

В примере кода выше обработчик событий AnimationListener вызывается каждый раз, когда происходит событие анимации. Объект события передается как одиночное значение. Кроме стандартных свойств и методов, он также содержит:

  • animationName: название анимации CSS3.
  • elapsedTime: время в секундах от начала анимации.

Свойства с этими же названиями доступны во всех браузерах.

Т.е., мы можем предпринять соответствующие действия, например, когда анимация под названием «flash» (вспышка) заканчивается для элемента с идентификатором «myelement»:

function AnimationListener(e) {
    var
        t = e.target,
        name = e.animationName,
        end = (e.type.toLowerCase().indexOf("animationend") >= 0);
    if (end && name == "flash" && t.id == "myelement") {
        // do something
    }
} 

Посмотрите демонстрацию работы событий анимации.

На странице с демонстрацией работы находится кнопка. При нажатии на кнопку класс под названием «enable» (включено) будет переключен, что запустит анимацию под названием «flash».  Название анимации, тип и время от начала анимации будут показаны в консоли, когда вызывается событие анимации. Когда анимация заканчивается, класс под названием «enable» у кнопки удаляется, чтобы ее снова можно было нажать.

Если вы изучили все уроки этих серий, Вы узнали все о переходах и анимациях CSS3.

Автор урока Craig Buckler

Перевод — Дежурка

Смотрите также:




Оставить ответ


+ четыре = 6

Вставить изображение