Прерывание анимаций

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

Стандартное поведение анимаций

По умолчанию, когда Unpoly выполняет анимацию перехода между состояниями страницы, она обрабатывает анимации в последовательности. В случае если событие происходит до завершения текущей анимации (например, пользователь кликает на другую ссылку, или выполняется новый запрос), новая анимация будет проигрываться только после завершения предыдущей. Это может создавать ненужные задержки и ощущение “застревающей” страницы.

Прерывание анимаций

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

Настройка прерывания анимаций

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

  1. Опция up.animate Опция up.animate управляет тем, как анимации будут выполняться при переходах между состояниями. Если установить эту опцию в значение false, анимация будет игнорироваться, и переходы будут происходить мгновенно. Если true, то анимация будет выполняться как обычно, но можно будет прервать её, если потребуется.

  2. Опция up.fragment Эта опция позволяет указать, какой фрагмент страницы должен быть обновлён с анимацией. Если текущий фрагмент страницы не совпадает с новым, текущая анимация будет прервана. Это полезно для создания интерактивных интерфейсов, где части страницы могут обновляться независимо друг от друга.

  3. Прерывание анимаций через колбэки Unpoly также позволяет использовать колбэки для более гибкого контроля над процессом прерывания анимаций. С помощью колбэков можно определить, когда анимация должна быть прервана. Например, можно добавить условие для прерывания анимации при выполнении определённого действия.

Прерывание анимаций на основе событий

Иногда возникает необходимость прервать анимацию на основе пользовательских действий, например, при клике на кнопку, изменении состояния формы или других взаимодействиях с интерфейсом. Unpoly позволяет привязать обработчики событий для этих случаев, чтобы в момент наступления события отменить текущие анимации.

up.on('up:before-update', function() {
  up.animate(false);  // Прерывание анимации перед обновлением
});

В данном примере событие up:before-update вызывается перед обновлением контента на странице, и оно отключает анимацию. Этот код позволяет избежать ненужных анимаций при обновлении данных на странице.

Прерывание анимаций при отмене запроса

Если запрос был отменён или не завершился должным образом (например, из-за ошибки сети), можно использовать механизм для отмены анимации, связанный с запросом. В случае ошибки или отмены запроса Unpoly автоматически отменяет все активные анимации, связанные с этим запросом.

Пример:

up.on('up:fail', function(event) {
  // Останавливаем все анимации при ошибке
  up.animate(false);
});

Этот подход позволяет быстро восстанавливать пользовательский интерфейс в случае ошибки или других проблем с запросом.

Прерывание анимаций при переходе к новой странице

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

up.on('up:before-transition', function() {
  up.animate(false);  // Прерывание анимаций перед переходом
});

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

Управление приоритетами анимаций

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

Каждая анимация может быть присвоена уникальный приоритет с помощью опции up.animation. Анимации с более низким приоритетом будут отменены, если начнётся анимация с более высоким приоритетом.

up.animate({
  priority: 10  // Пример установки приоритета для анимации
});

Прерывание анимаций с помощью пользовательских триггеров

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

document.querySelector('#cancelAnimations').addEventListener('click', function() {
  up.animate(false);  // Отменить все анимации
});

Этот подход позволяет пользователю самостоятельно контролировать анимации, например, при необходимости мгновенно перейти к другому разделу интерфейса или выполнить другие действия.

Заключение

Прерывание анимаций в Unpoly является мощным инструментом для улучшения взаимодействия с пользователем, обеспечивая более быстрые и отзывчивые переходы. Правильная настройка прерывания анимаций позволяет избежать ненужных задержек, а использование различных опций и колбэков даёт гибкость в управлении анимационными процессами.

Оглавление