Анимации естественных движений

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

Как сделать движения естественными и натуральными

Потрясающие приложения притягивают и удерживают внимание пользователя, а их интерфейс максимально упрощает выполнение любых задач. Движение — это ключевой фактор, отличающий пользовательский интерфейс от взаимодействия с пользователем: последнее подразумевает тесную связь между пользователем и приложением, с которым он взаимодействует. Чем теснее эта связь, тем активнее взаимодействие и выше удовлетворенность конечных пользователей.

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

В результате пользователи активнее взаимодействуют с приложением и более лояльны по отношению к нему.

Баланс контроля и динамичности

В традиционном пользовательском интерфейсе движение, в основном, описывается с помощью анимаций KeyFrameAnimation. Объекты KeyFrame обеспечивали максимальный контроль и позволяли дизайнерам и разработчикам определять начало, окончание и интерполяцию движения. Несмотря на то что это очень полезно во многих случаях, анимации KeyFrame не отличаются динамичностью; движение не адаптивно и выглядит одинаково в любых условиях.

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

Анимации NaturalMotionAnimation устраняют это противоречие и позволяют найти баланс между возможностью контролировать важные элементы анимации (начало и окончание) и естественностью и динамичностью движения.

Примечание

Анимации NaturalMotionAnimation не предназначены для замены анимаций KeyFrame: в системе проектирования Fluent по-прежнему есть сценарии, в которых рекомендуется использовать анимации KeyFrame. Анимации NaturalMotionAnimation предполагается использовать в сценариях, Где требуется передать движение, но анимации KeyFrame недостаточно динамичны.

Использование анимаций NaturalMotionAnimations

Начиная с Fall Creators Update доступен новый инструмент воссоздания движения: пружинные анимации. См. более подробные пошаговые инструкции по использованию пружин в разделе Пружинные анимации.

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

• Определение начальных и конечных значений.
• Определение параметра InitialVelocity и привязка к входному значению с помощью InteractionTracker.
• Определение характерных исключительно для движения свойств (например, DampingRatio для пружин).

Общее правило для начала работы:

1. Создайте анимацию NaturalMotionAnimation вне компоновщика, воспользовавшись одним из методов Create.
2. Определите свойства анимации.
3. Передайте анимацию NaturalMotionAnimation в качестве параметра вызову StartAnimation вне объекта CompositionObject.
   • Либо задайте значение для свойства Motion объекта InertiaModifier в InteractionTracker.

Простой пример использования пружинной анимации NaturalMotionAnimation для создания визуальной "пружины" в новом расположении со смещением по оси X:

_springAnimation = _compositor.CreateSpringScalarAnimation();
_springAnimation.Period = TimeSpan.FromSeconds(0.07);
_springAnimation.DelayTime = TimeSpan.FromSeconds(1);
_springAnimation.EndPoint = 500f;
sectionNav.StartAnimation("Offset.X", _springAnimation);