Анимация пользовательского интерфейса (HTML)
[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. При разработке приложений для Windows 10 см. раздел последняя документация]
Внешний вид и удобство использования, присущие Windows 8, можно интегрировать в свои приложения Магазина Windows, используя предоставляемую Windows библиотеку анимации. В этой статье приводится обзор анимации и примеры стандартных сценариев, с которыми работает библиотека анимации.
Использование библиотеки анимации дает следующие преимущества:
- Движения, отвечающие принципам анимации приложений Магазина Windows.
- Быстрые, плавные переходы между состояниями пользовательского интерфейса, которые информируют, но не отвлекают пользователя.
- Более четкие визуальные элементы, показывающие пользователю переходы внутри приложения.
Например, когда пользователь добавляет элемент в список, вместо немедленного появления в списке новый элемент въезжает в список с эффектом анимации, а другие элементы в списке — также с эффектом анимации — передвигаются на новые места, освобождая место для добавленного элемента. В результате действие становится более понятным пользователю по сравнению с мгновенными переходами.
Обратите внимание, что все элементы управления, представленные в Windows 8, такие как ListView, FlipView, Flyout и AppBar, используют библиотеку анимации. Используя эти элементы управления в своих приложениях, вы сможете получить внешний вид интерфейса и удобную анимацию приложений Магазина Windows, не программируя их при этом самостоятельно.
В библиотеке анимации нет анимации для любого сценария. Бывают случаи, когда вам может потребоваться настройка анимации для отражения вашей символики. Необходимо серьезно отнестись к тому, в каких случаях для приложений можно отступить от элементов библиотеки анимации. Это допустимо, только когда имеется четко определенная причина, например: особый фирменный стиль или отсутствие в библиотеке анимации элементов, подходящих данному сценарию.
Пример кода с использованием API, рассмотренных в данной теме, см. в разделе Пример библиотеки анимации HTML.
Анимации, доступные в библиотеке
Анимации, предоставляемые библиотекой анимации, перечислены ниже. Щелкните название анимации для получения дополнительных сведений об основных сценариях ее использования и функциях, обеспечивающих их выполнение, а также для просмотра примера анимации.
- Переход страницы: анимирует отображение или прекращение отображения содержимого страницы.
- Переход содержимого: анимирует отображение или прекращение отображения одного элемента содержимого или их набора.
- Появление и исчезновение: показывает промежуточные элементы или элементы управления.
- Плавный переход между элементами: обновляет область содержимого.
- Касание и отрыв указателя: дает визуальный отзыв на касание или щелчок плитки.
- Разворачивание и сворачивание: показывает дополнительную встроенную информацию.
- Перемещение: перемещает элемент на новое место.
- Показ и скрытие всплывающих окон: отображает или скрывает контекстно-зависимые элементы пользовательского интерфейса поверх представления.
- Показ и скрытие элементов пользовательского интерфейса по краям: выдвигает элементы пользовательского интерфейса по краям экрана или задвигает их.
- Показ и скрытие панелей: выдвигает крупные панели по краям или задвигает их.
- Добавление и удаление элементов списка: добавляет к списку или удаляет из него элемент.
- Добавление и удаление элементов списка поиска: добавляет к списку или удаляет из него элемент при фильтрации результатов поиска.
- Считывание: обновляет содержимое плитки.
- Обновление индикатора событий: обновляет числовой индикатор событий.
- Начало и окончание перетаскивания или перетаскивание между началом и окончанием: дает визуальную обратную связь во время операции перетаскивания.
- Подсказка прокрутки: показывает, что плитка поддерживает взаимодействие прокрутки.
- Выбор и отмена выбора прокруткой: переводит плитку в выбранное прокруткой состояние.
Переход страницы
Переходы страницы анимируют отображение или прекращение отображения содержимого страницы. Она включает как показ первой страницы приложения после экрана-заставки, так и переход между страницами приложения.
Следующее видео демонстрирует анимацию, с помощью которой отображается страница содержимого:
В следующем видео показаны анимации перехода между двумя страницами содержимого:
Подробную информацию о взаимодействии с пользователем и руководство по использованию этой анимации см. в разделе Руководство и контрольный список для анимации перехода между страницами.
Для исполнения этой анимации на JavaScript используйте следующие API:
Переход содержимого
Используйте анимационные эффекты перехода содержимого при перемещении элемента или набора элементов содержимого в текущее представление или из него. Переход содержимого, затрагивающий элементы на странице, не следует путать с переходом страниц, касающимся целых страниц. Например, анимации перехода содержимого используются для показа содержимого, которое не было готово к отображению при первом показе страницы или при изменении содержимого раздела страницы.
В следующем видео показаны анимации, удаляющие существующее содержимое и отображающие новое:
Подробную информацию о взаимодействии с пользователем и руководство по использованию этой анимации см. в разделе Руководство и контрольный список для анимации перехода от одного содержимого к другому.
Для исполнения этой анимации на JavaScript используйте следующие API:
Появление и исчезновение
Используйте анимации появления или исчезновения для показа или скрытия промежуточных элементов пользовательского интерфейса или элементов управления. Одним из примеров этой анимации может послужить панель приложения, в которой могут появляться новые элементы управления благодаря действиям пользователя. Другим примером является промежуточная полоса прокрутки или индикатор сдвига, исчезающий, если пользователь не вводит данные в течение определенного периода времени. Приложениям также следует использовать анимацию появления при переходе от элемента-заполнителя к итоговому элементу при динамической загрузке содержимого.
В следующем видео показаны анимации, которые показывают или скрывают содержимое: Обратите внимание на полосу прокрутки, появляющуюся и исчезающую в нижней части экрана:
Подробную информацию о взаимодействии с пользователем и руководство по использованию этой анимации см. в разделе Руководство и контрольный список для анимации плавного перехода.
Для исполнения этой анимации на JavaScript используйте следующие API:
Плавный переход между элементами
Используйте эту анимацию, чтобы сделать более плавным переход, когда состояние элемента изменяется, например при обновлении приложением текущего содержимого представления.
Следующее видео демонстрирует анимацию плавного перехода между элементами:
Подробную информацию о взаимодействии с пользователем и руководство по использованию этой анимации см. в разделе Руководство и контрольный список для анимации плавного перехода.
JavaScriptДля исполнения этой анимации используйте следующий API:
Касание и отрыв указателя
Используйте анимации касания и отрыва указателя, чтобы показать пользователю реакцию на успешное касание или щелчок плитки. Например, когда пользователь щелкает плитку или касается ее, отображается анимация касания указателя. После того как пользователь отпускает щелчок или касание, отображается анимация отрыва указателя.
В следующем видео показаны анимации касания и отрыва указателя:
Подробнее о взаимодействии с пользователем и руководство по использованию этой анимации см. в разделе Руководство и контрольный список для анимации касания.
Для исполнения этой анимации на JavaScript используйте следующие API:
Разворачивание и сворачивание
Используйте анимацию разворачивания, чтобы добавить пространство для содержимого представления и отобразить дополнительную встроенную информацию. Например, при появлении сообщения об ошибке требуется пространство для отображения дополнительного содержимого представления. Анимация сворачивания скрывает дополнительное содержимое и отображает меньше сведений о конкретном элементе. Обычно анимация сворачивания инициируется действием пользователя.
В следующем видео показаны анимации сворачивания и разворачивания:
Для исполнения этой анимации на JavaScript используйте следующие API:
Перемещение
Используйте анимацию перемещения для перемещения элемента в новое положение. Например, эту анимацию будет использовать перемещение заголовков в панорамном представлении.
В следующем видео показана анимация перемещения:
Подробную информацию о взаимодействии с пользователем и руководство по использованию этой анимации см. в разделе Руководство и контрольный список для анимации изменения положения.
JavaScriptДля исполнения этой анимации используйте следующий API:
Показ и скрытие всплывающих элементов пользовательского интерфейса
Используйте анимации показа или скрытия всплывающих элементов для отображения или скрытия контекстно-зависимых элементов пользовательского интерфейса поверх текущего представления. Например, всплывающий элемент может отобразить более подробную информацию об элементе. Используйте такие анимации при показе настраиваемого контекстного меню или всплывающего элемента.
В следующем видео показаны анимации, показывающие или скрывающие пользовательский интерфейс со всплывающими элементами:
Подробную информацию о взаимодействии с пользователем и руководство по использованию этой анимации см. в разделе Руководство и контрольный список для анимации всплывающих окон.
Для исполнения этой анимации на JavaScript используйте следующие API:
Показ и скрытие элементов пользовательского интерфейса по краям
Используйте анимации показа или скрытия элементов по краям для отображения и скрытия мелких элементов пользовательского интерфейса по краям. Например, они понадобятся при отображении собственной панели приложения внизу экрана или поверхности интерфейса для вывода сообщений об ошибках и предупреждениях в верхней части экрана.
В следующем видео показаны анимации, показывающие и скрывающие элементы пользовательского интерфейса по краям экрана:
Подробнее о взаимодействии с пользователем и руководство по использованию этой анимации см. в разделе Руководство и контрольный список для анимации показа и скрытия элементов пользовательского интерфейса по краям.
Для исполнения этой анимации на JavaScript используйте следующие API:
Показ и скрытие панелей
Используйте анимацию показа и скрытия панелей для показа или скрытия панели, то есть крупного элемента пользовательского интерфейса на краю экрана, такого как настраиваемая клавиатура или область задач. Не путайте эти анимации с анимациями показа и скрытия элементов пользовательского интерфейса по краям, которые используются для мелких элементов интерфейса, использующих края как точки входа и выхода.
В следующем видео показаны анимации отображения и скрытия панелей:
Подробнее о взаимодействии с пользователем и руководство по использованию этой анимации см. в разделе Руководство и контрольный список для анимации показа и скрытия элементов пользовательского интерфейса по краям.
Для исполнения этой анимации на JavaScript используйте следующие API:
Добавление и удаление элементов списка
Используйте анимации добавления и удаления элементов списка при добавлении к существующему одно- или двумерному списку либо удалении из него элементов. Анимация добавления в список сперва переместит существующие элементы в списке, чтобы освободить место для новых элементов, затем добавит новые элементы. Анимация удаления из списка позволит удалить элементы из списка и при необходимости изменить положение остающихся элементов после удаления.
В следующем видео показаны анимации добавления и удаления элементов из списка:
Подробнее о взаимодействии с пользователем и руководство по использованию этой анимации см. в разделе Руководство и контрольный список для анимации добавления и удаления элементов списка.
Для исполнения этой анимации на JavaScript используйте следующие API:
Добавление и удаление элементов списка поиска
Используйте анимацию добавления в список поиска и удаления из него элементов в тех случаях, когда во время поиска элементы списка быстро меняются. Обратите внимание, что для выполнения анимации списка поиска требуется меньше времени, чем для стандартной анимации списка. Например, если пользователь вводит термин для поиска, и список фильтрует результаты в режиме реального времени, отфильтрованные элементы должны быть удалены с использованием анимации удаления из списка поиска. С другой стороны, пользователь может искать строку и использовать клавишу BACKSPACE для удаления символа. В результате этого элементы снова добавляются в список результатов поиска, поэтому для этого вам нужно использовать анимацию добавления в поиск в списке.
В следующем видео показаны анимации добавления и удаления элементов из списка поиска:
Подробнее о взаимодействии с пользователем и руководство по использованию этой анимации см. в разделе Руководство и контрольный список для анимации добавления и удаления элементов списка.
Для исполнения этой анимации на JavaScript используйте следующие API:
Считывание
Используйте анимацию считывания для обновления плитки, если она поочередно отображает изображение и текст и недостаточно велика, чтобы отображать их одновременно. Также используйте эту анимацию, чтобы циклически отображать на плитке набор изображений.
В следующем видео показана анимация считывания:
JavaScriptДля исполнения этой анимации используйте следующий API:
Обновление индикатора событий
Используйте обновление индикатора событий для обновления индикатора событий, отображающего числа. Например, почтовое приложение, отображающее количество непрочитанных писем, может использовать анимацию обновления индикатора событий для обновления этого значения.
В следующем видео показана анимация обновления индикатора событий:
JavaScriptДля исполнения этой анимации используйте следующий API:
Начало и окончание перетаскивания или перетаскивание между началом и окончанием
Используйте анимацию перетаскивания для предоставления визуальной обратной связи во время перетаскивания элемента пользователем. Используйте анимацию начала при начале перетаскивания элемента. Используйте анимацию окончания, когда пользователь перетащил элемент.
При желании анимации между началом и окончанием перетаскивания можно использовать для показа пользователю того, что список может перестроиться вокруг перемещенного в него элемента. Пользователям может быть полезно знать, где элемент окажется в списке, если его в этот момент отпустить. Анимации ввода или вывода с перетаскиванием между элементами дают пользователю визуальную подсказку о том, что перетаскиваемый элемент можно поместить между двумя другими элементами в списке, которые тогда раздвинутся.
В следующем видео показаны анимации, связанные с действиями перетаскивания:
Подробнее о взаимодействии с пользователем и руководство по использованию этой анимации см. в разделе Руководство и контрольный список для анимации перетаскивания.
Для исполнения этой анимации на JavaScript используйте следующие API:
Подсказка прокрутки
С помощью подсказки прокрутки можно показать, что плитка поддерживает взаимодействие прокрутки. Пользователи могут прокрутить вниз, чтобы выбрать плитку. Если пользователь не знает, можно ли прокручивать плитку, жест нажатия и удерживания плитки выведет анимацию подсказки прокрутки, сообщающую, что с плиткой можно взаимодействовать через прокрутку.
В следующем видео показана анимация прокрутки:
JavaScriptДля исполнения этой анимации используйте следующий API:
Выбор и отмена выбора прокруткой
Используйте анимацию выбора прокруткой при выборе элемента с помощью взаимодействия с прокруткой, чтобы показать переход плитки в выбранное состояние и возвратить ее в обычное положение. Используйте операцию отмены выбора прокруткой при отмене выбора плитки с помощью жеста прокрутки.
В видео ниже показана анимация, отображаемая при выборе и отмене выбора с помощью прокрутки:
Для исполнения этой анимации на JavaScript используйте следующие API:
Использование анимаций для пользовательских элементов управления
Далее приведена сводная таблица с рекомендациями по использованию анимации при создании пользовательских версий системных элементов управления:
| Тип пользовательского интерфейса | Рекомендованная анимация |
|---|---|
| Диалоговое окно | fadeIn и fadeOut |
| Всплывающий элемент | showPopup и hidePopup |
| Подсказка | fadeIn и fadeOut |
| Контекстное меню | showPopup и hidePopup |
| Панель команд | showEdgeUI и hideEdgeUI |
| Панель задач или панель, привязанная к границам экрана | showPanel и hidePanel |
| Содержимое любого контейнера пользовательского интерфейса | enterContent и exitContent |
| Для элементов управления или если другая анимация не применяется | fadeIn и fadeOut |
Связанные разделы
Пример библиотеки анимации HTML
WinJS.Элементы пользовательского интерфейса. Пространство имен анимации