Шаблоны анимации для приложений Магазина Windows

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

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

Запустите ваше приложение

Переместите на передний план первую страницу вашего приложения.

|

JavaScript: используйте enterPage

Язык XAML: используйте EntranceThemeTransition

См. также раздел Анимация переходов с помощью библиотеки анимации

Переход между страницами

Переход с одной страницы приложения на другую.

|

JavaScript: используйте exitPage, а затем enterPage

Язык XAML: используйте EntranceThemeTransition

См. также раздел Анимация переходов с помощью библиотеки анимации

Переход между содержимым

Переход между содержимым области в пределах страницы.

|

JavaScript: используйте exitContent, а затем enterContent

XAML: используйте ContentThemeTransition

См. также раздел Анимация переходов с помощью библиотеки анимации

Отклик на касание или щелчок

Продемонстрируйте визуальную реакцию на касание или щелчок плитки пользователем.

|

JavaScript: используйте pointerDown и pointerUp

Язык XAML: используйте PointerDownThemeAnimation и PointerUpThemeAnimation

См. также раздел Анимация переходов с помощью библиотеки анимации

Отображение переходных элементов пользовательского интерфейса или элементов управления

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

|

JavaScript: используйте fadeIn и fadeOut

Язык XAML: используйте FadeInThemeAnimation и FadeOutThemeAnimation

См. также раздел Анимация элементов пользовательского интерфейса с помощью библиотеки анимации

Обновление

Обновите содержимое или анимируйте изменение шаблона на существующей странице.

|

JavaScript: используйте crossFade

Язык XAML: используйте FadeOutThemeAnimation и FadeInThemeAnimation

См. также раздел Анимация элементов пользовательского интерфейса с помощью библиотеки анимации

Покажите дополнительные элементы управления или содержимое внутренне

Освободите пространство и покажите дополнительные элементы управления или содержимое в существующем пользовательском интерфейсе.

|

JavaScript: используйте createExpandAnimation и createCollapseAnimation

Язык XAML: нет

Добавление и удаление элементов списка

Добавьте или удалите один или несколько элементов существующего списка.

|

JavaScript: используйте createAddToListAnimation и createDeleteFromListAnimation

Язык XAML: используйте AddDeleteThemeTransition

См. также раздел Анимация списков и элементов списков с помощью библиотеки анимации

Фильтрация списка при поиске

Быстро добавьте или удалите несколько элементов списка во время поиска.

|

JavaScript: используйте createAddToSearchListAnimation и createDeleteFromSearchListAnimation

Язык XAML: нет

См. также раздел Анимация списков и элементов списков с помощью библиотеки анимации

Отображение панели команд или панели сообщений

Покажите и скройте панель команд или сообщений на краю экрана.

|

JavaScript: используйте showEdgeUI и hideEdgeUI

Язык XAML: используйте EdgeUIThemeTransition

См. также Анимация поверхностей пользовательского интерфейса с помощью библиотеки анимации

Отображение области задач

Покажите и скройте область задач или другой крупный контейнер элементов пользовательского интерфейса на краю экрана.

|

JavaScript: используйте showPanel и hidePanel

Язык XAML: используйте PaneThemeTransition

См. также раздел Анимация поверхностей пользовательского интерфейса с помощью библиотеки анимации

Отображение всплывающих элементов пользовательского интерфейса

Покажите и скройте всплывающие элементы пользовательского интерфейса, например всплывающие элементы или контекстные меню.

|

JavaScript: используйте showPopup и hidePopup

Язык XAML: используйте PopInThemeAnimation и PopOutThemeAnimation

См. также раздел Анимация поверхностей пользовательского интерфейса с помощью библиотеки анимации

Перетаскивание

Перетащите элементы для изменения порядка списка.

|

JavaScript: используйте dragSourceStart, dragSourceEnd, dragBetweenEnter, а затем dragBetweenLeave

Язык XAML: используйте DragItemThemeAnimation, DropTargetItemThemeAnimation и DragOverThemeAnimation

См. также раздел Анимация списков и элементов списков с помощью библиотеки анимации

Прокрутка — выбор плитки

После того как пользователь выполнил жест прокрутки, с помощью анимации верните плитку в прежнее положение.

|

JavaScript: используйте swipeSelect и swipeDeselect

Язык XAML: используйте SwipeBackThemeAnimation

Продемонстрируйте возможность прокрутки

Используйте анимацию, чтобы показать, что плитка поддерживает жест прокрутки.

|

JavaScript: используйте swipeReveal

Язык XAML: используйте SwipeHintThemeAnimation

Обновление плитки

Обновите все содержимое плитки, чтобы временно показать дополнительную информацию на плитке.

|

JavaScript: используйте createPeekAnimation

Язык XAML: нет

Обновление индикатора событий

Обновите значение числового индикатора событий.

|

JavaScript: используйте updateBadge

Язык XAML: нет

Изменение положения

Изменение положения элемента пользовательского интерфейса или содержимого.

|

JavaScript: используйте createRepositionAnimation

Язык XAML: используйте RepositionThemeTransition

См. также раздел Анимация элементов пользовательского интерфейса с помощью библиотеки анимации

Связанные разделы

Рекомендации по взаимодействию с пользователем для приложений Магазина Windows
Анимация пользовательского интерфейса

 

 

Показ:
© 2015 Microsoft