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

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

Динамические интерфейсы на основе реляционных отношений

При создании возможностей движения в приложении иногда возникают случаи, когда движение не зависит от времени, а зависит от свойства другого объекта. KeyFrameAnimations не может выразить эти типы движений очень легко. В этих конкретных экземплярах движение больше не должно быть дискретным и предварительно определенным. Вместо этого движение может динамически адаптироваться на основе его отношений с другими свойствами объекта. Например, можно анимировать непрозрачность объекта на основе его горизонтальной позиции. Другие примеры включают в себя взаимодействие с движениями, например Колонтитулы и Параллакс.

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

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

Чтобы создать интерфейсы перемещения на основе реляций, используйте тип ExpressionAnimation. ExpressionAnimations (или Expressions for short) — это новый тип анимации, который позволяет выразить математические отношения — связь, которая используется системой для вычисления значения свойства анимации каждого кадра. Другими словами, выражения — это просто математическое уравнение, определяющее требуемое значение свойства анимации для каждого кадра. Выражения — это очень универсальный компонент, который можно использовать в различных сценариях, в том числе:

• Относительный размер, анимации смещения.
• Липкие заголовки, Parallax с ScrollViewer. (См. раздел Улучшение существующих возможностей ScrollViewer.)
• Точки привязки с инерционными модификаторами и InteractionTracker. (См. раздел Создание точек оснастки с модификаторами инерции.)

При работе с ExpressionAnimations есть несколько вещей, которые стоит упомянуть заранее:

• Никогда не заканчивается — в отличие от его брата KeyFrameAnimation, выражения не имеют конечной длительности. Поскольку выражения являются математическими связями, они являются анимациями, которые постоянно "выполняются". Вы можете остановить эти анимации при выборе.
• Выполнение, но не всегда оценка — производительность всегда связана с анимациями, которые постоянно выполняются. Нет необходимости беспокоиться, однако, система достаточно умна, чтобы выражение будет повторно оценивать, если какие-либо из его входных или параметров изменились.
• Разрешение правильного типа объекта. Так как выражения являются математическими связями, важно убедиться, что уравнение, определяющее выражение, разрешается в том же типе свойства, который предназначен для анимации. Например, если анимация смещения, выражение должно разрешаться в тип Vector3.

Компоненты выражения

При построении математической связи выражения существует несколько основных компонентов:

• Параметры — значения, представляющие постоянные значения или ссылки на другие объекты Композиции.
• Математические операторы — типичные математические операторы plus(+), минус(-), умножение(*), деление(/), которые объединяют параметры для формирования уравнения. Также включены условные операторы, такие как больше(>), equal(==), ternary operator (condition ? ifTrue: ifFalse) и т. д.
• Математические функции — математические функции и сочетания клавиш на основе System.Numerics. Полный список поддерживаемых функций см. в разделе ExpressionAnimation.

Выражения также поддерживают набор ключевых слов — специальные фразы, имеющие определенное значение только в системе ExpressionAnimation. Они перечислены (а также полный список математических функций) в документации по ExpressionAnimation .

Создание выражений с помощью ExpressionBuilder

Существует два варианта создания выражений в приложении UWP:

1. Создайте уравнение в виде строки через официальный общедоступный API.
2. Создайте уравнение в типобезопасной объектной модели с помощью средства ExpressionBuilder, включенного в набор средств сообщества Windows.

Для этого документа мы определим выражения с помощью ExpressionBuilder.

Параметры

Параметры составляют ядро выражения. Существует два типа параметров:

• Константы: это параметры, представляющие типизированные переменные System.Numeric. Эти параметры получают значения, назначенные один раз при запуске анимации.
• Ссылки: это параметры, представляющие ссылки на CompositionObjects. Эти параметры постоянно обновляют свои значения после запуска анимации.

Как правило, ссылки являются основным аспектом динамического изменения выходных данных выражения. По мере изменения этих ссылок выходные данные выражения изменяются в результате. Если вы создаете выражение со строками или используете их в сценарии шаблонов (с помощью выражения для назначения нескольких CompositionObjects), необходимо указать и задать значения параметров. См. дополнительные сведения в разделе "Пример".

Работа с KeyFrameAnimations

Выражения также можно использовать с keyFrameAnimations. В этих экземплярах необходимо использовать выражение для определения значения ключевого кадра во время места. Эти типы ключевые кадры называются ExpressionKeyFrames.

KeyFrameAnimation.InsertExpressionKeyFrame(Single, String)
KeyFrameAnimation.InsertExpressionKeyFrame(Single, ExpressionNode)

Однако, в отличие от ExpressionAnimations, ВыраженияKeyFrames оцениваются только один раз при запуске KeyFrameAnimation. Помните, что вы не передаете выражениеAnimation в качестве значения ключевого кадра, а строки (или ExpressionNode, если вы используете ExpressionBuilder).

Пример

Теперь рассмотрим пример использования выражений, в частности пример PropertySet из коллекции примеров пользовательского интерфейса Windows. Мы рассмотрим выражение, управляя поведением движения орбиты синего шара.

Существует три компонента в игре для общего опыта:

1. KeyFrameAnimation, анимируя смещение Y красного шара.
2. Свойство PropertySet со свойством поворота, которое помогает управлять орбитой, анимированной другим keyFrameAnimation.
3. ВыражениеAnimation, которое управляет смещением синего шара, ссылающегося на красный шар смещение и свойство поворота для поддержания идеальной орбиты.

Мы сосредоточимся на expressionAnimation, определенной в #3. Мы также будем использовать классы ExpressionBuilder для создания этого выражения. Копия кода, используемого для создания этого интерфейса с помощью строк, отображается в конце.

В этом уравнении есть два свойства, на которые необходимо ссылаться из PropertySet; одно — это смещение по центру, а другое — поворот.

var propSetCenterPoint =
_propertySet.GetReference().GetVector3Property("CenterPointOffset");

// This rotation value will animate via KFA from 0 -> 360 degrees
var propSetRotation = _propertySet.GetReference().GetScalarProperty("Rotation");

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

var orbitRotation = EF.Vector3(
    EF.Cos(EF.ToRadians(propSetRotation)) * 150,
    EF.Sin(EF.ToRadians(propSetRotation)) * 75, 0);

Примечание.

EF — это сокращенная нотация using для определения выраженийFunctions.

using EF = Microsoft.Toolkit.Uwp.UI.Animations.Expressions.ExpressionFunctions;

Наконец, объединить эти компоненты вместе и ссылаться на позицию Красного шара, чтобы определить математические отношения.

var orbitExpression = redSprite.GetReference().Offset + propSetCenterPoint + orbitRotation;
blueSprite.StartAnimation("Offset", orbitExpression);

В гипотетической ситуации, что если бы вы хотели использовать это же выражение, но с двумя другими визуальными элементами, то есть 2 набора орбитальных кругов. С помощью CompositionAnimations можно повторно использовать анимацию и использовать несколько объектов CompositionObjects. Единственное, что необходимо изменить при использовании этого выражения для дополнительного варианта орбиты— ссылка на визуальный элемент. Мы называем этот шаблон.

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

var orbitExpression = ExpressionValues.Reference.CreateVisualReference("orbitRoundVisual");
orbitExpression.SetReferenceParameter("orbitRoundVisual", redSprite);
blueSprite.StartAnimation("Offset", orbitExpression);
// Later on … use same Expression to assign to another orbiting Visual
orbitExpression.SetReferenceParameter("orbitRoundVisual", yellowSprite);
greenSprite.StartAnimation("Offset", orbitExpression);

Ниже приведен код, если вы определили выражение со строками через общедоступный API.

ExpressionAnimation expressionAnimation = compositor.CreateExpressionAnimation("visual.Offset + " +
    "propertySet.CenterPointOffset + " +
    "Vector3(cos(ToRadians(propertySet.Rotation)) * 150," + "sin(ToRadians(propertySet.Rotation)) * 75, 0)");
    
var propSetCenterPoint = _propertySet.GetReference().GetVector3Property("CenterPointOffset");
var propSetRotation = _propertySet.GetReference().GetScalarProperty("Rotation");
expressionAnimation.SetReferenceParameter("propertySet", _propertySet);
expressionAnimation.SetReferenceParameter("visual", redSprite);