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

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

Предпосылки

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

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

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

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

кубической анимации Bezier

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

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

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

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

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

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

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

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

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

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

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

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

Недвижимость	Обычная весна	Угасшая весна	Менее демпфированная пружина
Смещение	Коэффициент деммпинга = 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? Гораздо важнее: если пользователь проводит пальцем сильнее или быстрее, движение адаптируется на основе скорости, задаваемой пользователем.

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

// InteractionTracker and the VisualInteractionSource previously setup
// The open and close ScalarSpringAnimations defined earlier
private void SetupInput()
{
 // Define the InertiaModifier to manage the open motion
 var openMotionModifer = InteractionTrackerInertiaNaturalMotion.Create(compositor);

 // Condition defines to use open animation if panes in non-expanded view
 // Property set value to track if open or closed is managed in other part of code
 openMotionModifer.Condition = _compositor.CreateExpressionAnimation(
"propset.expanded == false");
 openMotionModifer.Condition.SetReferenceParameter("propSet", _propSet);
 openMotionModifer.NaturalMotion = _openSpringAnimation;

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

 // Condition defines to use close animation if panes in expanded view
 // Property set value to track if open or closed is managed in other part of code
 closeMotionModifier.Condition = 
_compositor.CreateExpressionAnimation("propSet.expanded == true");
 closeMotionModifier.Condition.SetReferenceParameter("propSet", _propSet);
 closeMotionModifier.NaturalMotion = _closeSpringAnimation;

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

 // Take output of InteractionTracker and assign 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 инерционного модификатора значение SpringAnimation.