Пользовательские манипуляции с помощью InteractionTracker

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

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

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

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

Зачем создавать индивидуализированные возможности управления?

В большинстве случаев использование предварительно разработанных элементов управления манипуляцией достаточно для создания пользовательских интерфейсов. Но что если вы хотите отличаться от стандартных элементов управления? Что делать, если вы хотите создать определенный интерфейс, управляемый входными данными или иметь пользовательский интерфейс, где традиционное движение манипуляции недостаточно? Вот где создание уникальных пользовательских впечатлений становится актуальным. Они позволяют разработчикам приложений и дизайнерам быть более творческими — воплотить в жизнь анимации, которые лучше демонстрируют их брендинг и индивидуальный язык дизайна. С нуля вы получите доступ к правильному набору стандартных блоков, чтобы полностью настроить опыт манипуляции — от того, как движение должно откликаться пальцем на экране и вне его, до точек привязки и объединения ввода.

Ниже приведены некоторые распространенные примеры создания пользовательского опыта манипуляции:

• Добавление пользовательского свайпа, поведения удаления и закрытия.
• Эффекты, зависящие от ввода (панорамирование приводит к размытию содержимого)
• Настраиваемые элементы управления с настраиваемыми движениями манипуляций (custom ListView, ScrollViewer и т. д.)

Зачем использовать InteractionTracker?

InteractionTracker доступен в пространстве имен Microsoft.UI.Composition.Interactions для приложений WinUI и Windows App SDK. InteractionTracker включает:

• Полная гибкость — мы хотим, чтобы вы могли настраивать и адаптировать каждый аспект взаимодействия с манипуляциями; в частности, точные движения, возникающие во время или в ответ на входные данные. При создании кастомизированного интерфейса взаимодействия с помощью InteractionTracker все необходимые программные элементы управления находятся в вашем распоряжении.
• Smooth Performance — одна из проблем с взаимодействием с манипуляциями заключается в том, что их производительность зависит от потока пользовательского интерфейса. Это может негативно повлиять на любой опыт манипуляции при занятом пользовательском интерфейсе. InteractionTracker был создан для использования нового обработчика анимации, который работает на независимом потоке на 60 FPS, что приводит к плавному движении.

Обзор: InteractionTracker

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

• InteractionTracker — основной объект, поддерживающий компьютер состояния, свойства которого управляются активными входными данными пользователя или прямыми обновлениями и анимациями. Затем он предназначен для привязки к CompositionAnimation для создания пользовательского движения манипуляции.
• VisualInteractionSource — объект дополнения, определяющий, когда и при каких условиях входные данные отправляются в InteractionTracker. Он определяет как CompositionVisual, используемый для хит-тестирования, так и другие свойства входной конфигурации.

В качестве компьютера состояния свойства InteractionTracker можно управлять любым из следующих элементов:

• Прямое взаимодействие с пользователем — конечный пользователь напрямую манипулирует в области VisualInteractionSource hit-test region
• Инерция — будь то от программной скорости или жеста пользователя, свойства InteractionTracker анимируют по кривой инерции.
• CustomAnimation — настраиваемая анимация непосредственно для свойства InteractionTracker

Машина состояний InteractionTracker

Как упоминалось ранее, InteractionTracker — это компьютер с 4 состояниями, каждый из которых может перейти к любому из остальных четырех состояний. (Дополнительные сведения о переходе InteractionTracker между этими состояниями см. в документации по классу InteractionTracker .)

Государство	Описание
Бездействие	Нет активных, управляющих вводных данных или анимаций
Взаимодействие	Обнаружены активные входные данные пользователя
Инерции	Активное движение, полученное от активного ввода данных или скорости, определенной программой
CustomAnimation	Динамическое движение, являющееся результатом пользовательской анимации

В каждом из случаев, когда состояние InteractionTracker изменяется, создается событие (или обратный вызов), которое можно прослушивать. Чтобы вы могли отслеживать эти события, они должны реализовать интерфейс IInteractionTrackerOwner и создать объект InteractionTracker с помощью метода CreateWithOwner. На следующей схеме также описывается, когда активируются различные события.

Использование VisualInteractionSource

Чтобы InteractionTracker управлялся входом, необходимо подключить к нему VisualInteractionSource (VIS). Vis создается как объект дополнения с помощью CompositionVisual для определения:

1. Область тестирования на попадание, за которой будут отслеживаться входные данные, и в которой обнаруживаются жесты в пространстве координат.
2. Ниже перечислены некоторые конфигурации входных данных, которые будут обнаруживаться и направляться:
   • Обнаруживаемые жесты: положение X и Y (горизонтальное и вертикальное сдвигание), масштабирование (щипок)
   • Инерции
   • Рельсы и сцепление
   • Режимы перенаправления: какие входные данные перенаправляются автоматически в InteractionTracker

Замечание

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

Замечание

Вы можете использовать несколько экземпляров VisualInteractionSource с одним и тем же InteractionTracker, если существует несколько областей попадания. Однако наиболее распространенным случаем является использование только одного VIS.

VisualInteractionSource также отвечает за управление входными данными из различных модальностей (касание, PTP, перо), которые направляются в InteractionTracker. Это поведение определяется свойством ManipulationRedirectionMode. По умолчанию все сигналы указателя отправляются в поток пользовательского интерфейса, а сигналы Precision Touchpad передаются в VisualInteractionSource и InteractionTracker.

Таким образом, если требуется использовать touch and Pen (Creators Update) для управления манипуляцией с помощью VisualInteractionSource и InteractionTracker, необходимо вызвать метод VisualInteractionSource.TryRedirectForManipulation. В кратком фрагменте ниже из приложения XAML метод вызывается при нажатии сенсорного события в верхней части сетки UIElement:

private void root_PointerPressed(object sender, PointerRoutedEventArgs e)
{
    if (e.Pointer.PointerDeviceType == Windows.Devices.Input.PointerDeviceType.Touch)
    {
        _source.TryRedirectForManipulation(e.GetCurrentPoint(root));
    }
}

Интеграция с ExpressionAnimations

При использовании InteractionTracker для управления процессом манипуляции вы взаимодействуете главным образом со свойствами Scale и Position. Как и другие свойства CompositionObject, эти свойства могут быть как целевыми, так и ссылаться на них в CompositionAnimation, чаще всего ExpressionAnimations.

Чтобы использовать InteractionTracker в выражении, обратитесь к свойству Position (или Scale) средства отслеживания, как показано в приведенном ниже примере. Поскольку свойство InteractionTracker изменяется из-за каких-либо условий, описанных ранее, выходные данные выражения также изменяются.

// With Strings
var opacityExp = _compositor.CreateExpressionAnimation("-tracker.Position");
opacityExp.SetReferenceParameter("tracker", _tracker);

// With ExpressionBuilder
var opacityExp = -_tracker.GetReference().Position;

Замечание

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

Начать сейчас

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

1. Создайте объект InteractionTracker с помощью InteractionTracker.Create или InteractionTracker.CreateWithOwner.
   • (Если вы используете CreateWithOwner, убедитесь, что вы реализуете интерфейс IInteractionTrackerOwner.)
2. Задайте минимальную и максимальную позицию нового элемента InteractionTracker.
3. Создайте VisualInteractionSource с помощью CompositionVisual.
   • Убедитесь, что передаваемый вами визуальный элемент имеет ненулевой размер. В противном случае он не будет проверен правильно.
4. Задайте свойства VisualInteractionSource.
   • ВизуальныйИсточникПеренаправленияVisualInteractionMode
   • Режим источника для позиции X, Режим источника для позиции Y, Режим источника для масштаба
   • Рельсы и Связывание
5. Добавьте VisualInteractionSource в InteractionTracker с помощью InteractionTracker.InteractionSources.Add.
6. Настройка TryRedirectForManipulation для перенаправления при обнаружении ввода с помощью касания и пера.
   • Для XAML это обычно выполняется в событии PointerPressed uiElement.
7. Создайте анимацию выражения, которая ссылается на положение InteractionTracker и задаёт цель — свойство объекта CompositionObject.

Ниже приведен краткий фрагмент кода, показывающий #1 – 5 в действии:

private void InteractionTrackerSetup(Compositor compositor, Visual hitTestRoot)
{ 
    // #1 Create InteractionTracker object
    var tracker = InteractionTracker.Create(compositor);

    // #2 Set Min and Max positions
    tracker.MinPosition = new Vector3(-1000f);
    tracker.MaxPosition = new Vector3(1000f);

    // #3 Setup the VisualInteractionSource
    var source = VisualInteractionSource.Create(hitTestRoot);

    // #4 Set the properties for the VisualInteractionSource
    source.ManipulationRedirectionMode =
        VisualInteractionSourceRedirectionMode.CapableTouchpadOnly;
    source.PositionXSourceMode = InteractionSourceMode.EnabledWithInertia;
    source.PositionYSourceMode = InteractionSourceMode.EnabledWithInertia;

    // #5 Add the VisualInteractionSource to InteractionTracker
    tracker.InteractionSources.Add(source);
}

Дополнительные сведения об использовании InteractionTracker см. в следующих статьях:

• Создание точек привязки с помощью инерционных модификаторов
• Извлечение и обновление с помощью SourceModifiers