Анимации на основе ввода

В этой статье приведены общие сведения об API InputAnimation в приложениях Пакета SDK для приложений WinUI и Windows App SDK, и рекомендуется использовать эти типы анимаций в пользовательском интерфейсе.

Необходимые условия

Здесь предполагается, что вы знакомы с понятиями, описанными в следующих статьях:

• Анимации на основе реляционных данных

Плавное движение, управляемое от взаимодействия с пользователем

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

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

Выход за рамки простого касания

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

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

Пространство InputAnimation предоставляет несколько различных вариантов для создания динамически реагирующего движения. Как и остальная часть системы анимации композиции пакета SDK для приложений Windows, эти входные анимации работают на независимом потоке, что способствует созданию динамичного опыта движения. Однако в некоторых случаях, когда интерфейс использует существующие элементы управления и компоненты XAML, части этих интерфейсов по-прежнему привязаны к потоку пользовательского интерфейса.

При создании динамических анимаций движения на основе входных данных существует три основных интерфейса:

1. Повышение существующих возможностей ScrollView— позволяет использовать положение XAML ScrollViewer для управления динамическими анимациями.
2. Опыт, основанный на позиции указателя — используйте позицию указателя на элементах пользовательского интерфейса для создания динамических анимационных эффектов.
3. Создание индивидуальных впечатлений от манипуляций с использованием InteractionTracker — разработайте полностью настраиваемые, без использования потоков манипуляции с использованием InteractionTracker (например, холста с возможностью прокрутки и масштабирования).

Улучшение существующих возможностей ScrollViewer

Одним из распространенных способов создания дополнительных динамических возможностей является создание на основе существующего элемента управления XAML ScrollViewer. В таких ситуациях используется положение прокрутки ScrollViewer для создания дополнительных компонентов пользовательского интерфейса, которые делают простой процесс прокрутки более динамическим. Некоторые примеры включают в себя закрепленные/скрывающиеся заголовки и параллакс.

При создании этих типов интерфейсов существует общая формула:

1. Получите доступ к свойству ScrollManipulationPropertySet из элемента XAML ScrollViewer, который вы хотите использовать для управления анимацией.
   • Выполнено с помощью API ElementCompositionPreview.GetScrollViewerManipulationPropertySet(UIElement element)
   • Возвращает объект CompositionPropertySet, содержащий свойство с именем Translation
2. Создайте анимацию выражений Composition с уравнением, ссылающимся на свойство Translation.
3. Запустите анимацию в свойстве CompositionObject.

Дополнительные сведения о создании этих возможностей см. в статье "Улучшение существующих возможностей ScrollViewer".

Опыт взаимодействия, основанный на положении указателя

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

При создании этих типов интерфейсов существует общая формула:

1. Получите доступ к PointerPositionPropertySet в XAML UIElement, через который вы хотите определить положение курсора при тестировании.
   • Выполнено с помощью API ElementCompositionPreview.GetPointerPositionPropertySet(UIElement element)
   • Возвращает объект CompositionPropertySet, содержащий свойство с именем Position
2. Создайте CompositionExpressionAnimation с уравнением, содержащим ссылку на свойство Position.
3. Запустите анимацию в свойстве CompositionObject.

Пользовательский опыт взаимодействия с помощью InteractionTracker

Одна из проблем с использованием XAML ScrollViewer заключается в том, что он привязан к потоку пользовательского интерфейса. В результате процесс прокрутки и масштабирования часто может отставать и дрожать, если поток пользовательского интерфейса становится занятым, что приводит к неприятному опыту. Кроме того, невозможно настроить множество аспектов интерфейса ScrollViewer. InteractionTracker был создан для решения обеих проблем, предоставив набор строительных блоков для создания пользовательских сценариев манипулирования, которые выполняются в отдельном потоке.

При создании впечатлений с помощью InteractionTracker существует общая формула:

1. Создайте объект InteractionTracker и определите его свойства.
2. Создайте VisualInteractionSources для любого объекта CompositionVisual, который должен перехватывать входные данные для использования в InteractionTracker.
3. Создайте выражение композиции с уравнением, ссылающимся на свойство Position объекта InteractionTracker.
4. Запустите анимацию для свойства визуального элемента композиции, которое вы хотите управлять с помощью InteractionTracker.