Весенние анимации

В этой статье показано, как использовать spring NaturalMotionAnimations в WinUI.

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

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

• Анимации естественного движения

Почему пружины?

Пружины — это обычный опыт, который мы все переживали в какой-то момент нашей жизни; от игрушек-пружинок до занятий по физике с блоками на пружинах. Осциллирующее движение пружины часто вызывает у наблюдателей игривую и легкую эмоциональную реакцию. В результате движение пружины хорошо интегрируется в пользовательский интерфейс приложения для тех, кто стремится создать более заметное и яркое движение, чем традиционная кривая Безье. В таких случаях использование пружинной анимации не только создает более живой анимационный опыт, но и может помочь привлечь внимание к новому или текущему анимированному содержимому. В зависимости от брендинга приложения или языка анимации, колебания более выраженные и заметные, но в других случаях оно более тонкое.

Использование пружин в интерфейсе пользователя

Как упоминалось ранее, springs может быть полезным движением для интеграции в приложение WinUI, чтобы представить очень знакомый и игривый пользовательский интерфейс. Распространенные варианты использования пружин в пользовательском интерфейсе:

Описание использования Spring	Визуальный пример
Создание более выразительного и живого ощущения от анимации. (Анимация масштабирования)
Управление восприятием движения, чтобы оно казалось более энергичным (анимация смещения)

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

Определение движения пружины

Вы создаете весенний интерфейс с помощью API NaturalMotionAnimation. В частности, вы создаете SpringNaturalMotionAnimation с помощью методов Create*, доступных в Compositor. Затем вы можете определить следующие свойства движения:

• Коэффициент демпфирования — выражает уровень демпфирования пружинного движения, используемого в анимации.

Значение коэффициента демпфирования	Описание
Коэффициент демпфирования = 0	Без затухания - пружина будет колебаться долгое время
0 < Коэффициент демпфирования < 1	Недобронированный – пружина будет колебаться с амплитудой от небольшой до значительной.
ДемпфирующийКоэффициент = 1	Критически затухающий – пружина не будет выполнять колебаний.
Коэффициент демпфирования > 1	Переторможенное – пружина быстро достигнет своего положения с резким замедлением и без колебаний

• Период — время, необходимое пружине для выполнения одного колебания.
• Окончательное или начальное значение — это определенные начальные и конечные позиции пружинного движения (если они не определены, то начальные и/или конечные значения будут текущими значениями).
• Начальная скорость — программная начальная скорость движения.

Можно также определить набор свойств движения, которые совпадают с keyFrameAnimations:

• Время задержки / Поведение задержки
• StopBehavior

В распространенных случаях анимации смещения, масштабирования и изменения размера команда Windows Design рекомендует следующие значения для коэффициента демпфирования и Period для различных типов пружин.

Недвижимость	Обычная весна	Амортизированная пружина	Менее демпфированная пружина
Смещение	Коэффициент деммпинга = 0,8 Период = 50 мс	Коэффициент деммпинга = 0,85 Период = 50 мс	Коэффициент демортизации = 0,65 Период = 60 мс
Масштабирование и размер	Коэффициент деммпинга = 0,7 Период = 50 мс	Коэффициент деммпинга = 0,8 Период = 50 мс	Коэффициент деммпинга = 0,6 Период = 60 мс

Определив свойства, вы можете передать spring NaturalMotionAnimation в метод StartAnimation объекта CompositionObject или свойства Motion объекта InteractionTracker InertiaModifier.

Пример

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

Начните с определения пружинной анимации в событии нажатия, когда появляется панель навигации. Затем вы определяете свойства анимации, используя функцию InitialValueExpression для определения FinalValue. Вы также следите за тем, открывается ли панель и когда она будет готова, запустите анимацию.

private void Button_Clicked(object sender, RoutedEventArgs e)
{
    _springAnimation = _compositor.CreateSpringScalarAnimation();
    _springAnimation.DampingRatio = 0.75f;
    _springAnimation.Period = TimeSpan.FromSeconds(0.5);

    if (!_expanded)
    {
        _expanded = true;
        _propSet.InsertBoolean("expanded", true);
        _springAnimation.InitialValueExpression["FinalValue"] = "this.StartingValue + 250";
    }
    else
    {
        _expanded = false;
        _propSet.InsertBoolean("expanded", false);
        _springAnimation.InitialValueExpression["FinalValue"] = "this.StartingValue - 250";
    }

    _naviPane.StartAnimation("Offset.X", _springAnimation);
}

А что, если вы хотите связать это движение с вводом? Так что если конечный пользователь проводит пальцем по экрану, панели выходят с движением Spring? Что более важно, если пользователь проводит пальцем сильнее или быстрее, движение адаптируется в зависимости от скорости действия конечного пользователя.

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

// InteractionTracker and the VisualInteractionSource were previously set up.
// The open and close ScalarSpringAnimations were defined earlier.
private void SetupInput()
{
    // Define the InertiaModifier to manage the open motion.
    var openMotionModifier = InteractionTrackerInertiaNaturalMotion.Create(_compositor);

    // Use the open animation if the pane is not expanded.
    openMotionModifier.Condition = _compositor.CreateExpressionAnimation(
        "propSet.expanded == false");
    openMotionModifier.Condition.SetReferenceParameter("propSet", _propSet);
    openMotionModifier.NaturalMotion = _openSpringAnimation;

    // Define the InertiaModifier to manage the close motion.
    var closeMotionModifier = InteractionTrackerInertiaNaturalMotion.Create(_compositor);

    // Use the close animation if the pane is expanded.
    closeMotionModifier.Condition = _compositor.CreateExpressionAnimation(
        "propSet.expanded == true");
    closeMotionModifier.Condition.SetReferenceParameter("propSet", _propSet);
    closeMotionModifier.NaturalMotion = _closeSpringAnimation;

    _tracker.ConfigurePositionXInertiaModifiers(new InteractionTrackerInertiaNaturalMotion[]
    {
        openMotionModifier,
        closeMotionModifier,
    });

    // Take the InteractionTracker output and assign it to the pane.
    var exp = _compositor.CreateExpressionAnimation("-tracker.Position.X");
    exp.SetReferenceParameter("tracker", _tracker);

    ElementCompositionPreview.GetElementVisual(pageNavigation)
        .StartAnimation("Translation.X", exp);
}

Теперь в пользовательском интерфейсе есть как программная анимация, так и анимация, основанная на входных данных!

Вкратце, шаги по использованию пружинной анимации в приложении:

1. Создайте SpringAnimation с помощью Compositor.
2. Определите свойства SpringAnimation, если хотите использовать другие значения вместо значений по умолчанию.
   • Коэффициент демпфирования
   • Период
   • Окончательное значение
   • Начальное значение
   • Начальная скорость
3. Назначить целевой объект
   • Если вы анимируете свойство CompositionObject, передайте springAnimation в качестве параметра в StartAnimation.
   • Если вы хотите использовать с данными ввода, задайте для свойства NaturalMotion объекта InertiaModifier значение SpringAnimation.