Пружинные анимации
В статье показано, как использовать spring NaturalMotionAnimations.
Необходимые компоненты
Здесь предполагается, что вы знакомы с понятиями, описанными в следующих статьях:
Почему весной?
Springs — это общий опыт движения, который мы все испытали в какой-то момент в нашей жизни; начиная от склюковых игрушек до физики занятий опыт с весенним блоком. Колебающееся движение весной часто вызывает игривый и легкий эмоциональный ответ от тех, кто его наблюдает. В результате движение весны хорошо преобразуется в пользовательский интерфейс приложения для тех, кто стремится создать динамический процесс движения, который "всплывает" больше для конечного пользователя, чем традиционный Кубическая Bezier. В таких случаях весеннее движение не только создает динамический опыт движения, но и может помочь привлечь внимание к новому или текущему анимации содержимого. В зависимости от фирменной символики приложения или языка движения колебания более выраженные и видимые, но в других случаях это более тонко.
Использование springs в пользовательском интерфейсе
Как упоминалось ранее, springs может быть полезным движением для интеграции в приложение, чтобы представить очень знакомый и игривый пользовательский интерфейс. Распространенные варианты использования springs в пользовательском интерфейсе:
| Описание использования Spring | Визуальный пример |
|---|---|
| Создание опыта движения "pop" и смотреть livelier. (Анимация масштабирования) |  |
| Создание опыта движения немного чувствует себя более энергичным (анимация смещения) | |
В каждом из этих случаев весеннее движение может быть активировано либо путем "спрингинга к" и колебания вокруг нового значения или колебания вокруг его текущего значения с некоторой начальной скоростью.
Определение весеннего движения
Вы создаете весенний интерфейс с помощью API NaturalMotionAnimation. В частности, вы создаете SpringNaturalMotionAnimation с помощью методов Create* вне Compositor. Затем вы можете определить следующие свойства движения:
- ДемпирингРатио — выражает уровень оглушения весеннего движения, используемого в анимации.
| Значение коэффициента демпфирования | Description |
|---|---|
| ДемпирингРатио = 0 | Безумно - весной будет колебаться в течение длительного времени |
| 0 < ДемпирингРатио < 1 | Недоумеченный - весной будет колебаться от немного до много. |
| ДемпирингРатио = 1 | Критично прибавлено - весной не будет выполняться колебания. |
| Демпирация > 1 | Переполнено - весна быстро достигнет своего назначения с резким замедлением и без колебаний |
- Период — время, затрачаемое на весну, чтобы выполнить одно колебание.
- Окончательное или начальное значение — определенное начальное и конечное позиции спрингового движения (если оно не определено, начальное значение и/или конечное значение будет текущим).
- Начальная скорость — программная начальная скорость движения.
Можно также определить набор свойств движения, которые совпадают с keyFrameAnimations:
- Поведение задержки и задержки
- StopBehavior
В распространенных случаях анимации смещения и масштабирования и размера следующие значения рекомендуется командой Windows Design для демпирингаRatio и 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? Более важно, если пользователь проводит пальцем сложнее или быстрее, движение адаптируется на основе скорости от конечного пользователя.
Для этого вы можете взять ту же спринговую анимацию и передать ее в инерционныйmodifier с помощью InteractionTracker. Дополнительные сведения о InputAnimations и InteractionTracker см. в разделе "Пользовательские манипуляции" с помощью InteractionTracker. Предположим, что в этом примере кода вы уже настроили InteractionTracker и VisualInteractionSource. Мы сосредоточимся на создании инерционныхmodifiers, которые будут принимать в NaturalMotionAnimation, в этом случае весной.
// 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);
}
Теперь в пользовательском интерфейсе есть как программная, так и весна анимация на основе входных данных!
В итоге действия по использованию весенней анимации в приложении:
- Создайте SpringAnimation с помощью Compositor.
- Определите свойства SpringAnimation, если вы хотите, чтобы значения, отличные от значений по умолчанию:
- ДемпингРатио
- Период
- Окончательное значение
- Начальное значение
- Начальная скорость
- Назначение целевому объекту.
- Если вы анимируете свойство CompositionObject, передайте springAnimation в качестве параметра в StartAnimation.
- Если вы хотите использовать с входными данными, задайте для свойства NaturalMotion для инерционногоmodifier значение SpringAnimation.