Анимации на основе времени

  • Статья

При изменении компонента или всего взаимодействия с пользователем конечные пользователи часто наблюдают его двумя способами: с течением времени или мгновенно. На платформе Windows первый предпочтителен по сравнению с последним — взаимодействие с пользователями, которые мгновенно изменяются, часто путают и удивляют конечных пользователей, потому что они не могут следовать тому, что произошло. Затем конечный пользователь воспринимает интерфейс как jarring и ненатуральный.

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

Типы анимаций на основе времени

Существует две категории анимаций на основе времени, которые можно использовать для создания красивых пользовательских возможностей в Windows:

Явные анимации — как имя означает, вы явно запускаете анимацию для внесения обновлений. Неявные анимации — эти анимации запускаются системой от вашего имени при выполнении условия.

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

Для явных и неявных анимаций на основе времени существуют различные типы, соответствующие различным типам свойств CompositionObjects, которые можно анимировать.

  • ColorKeyFrameAnimation
  • QuaternionKeyFrameAnimation
  • ScalarKeyFrameAnimation
  • Vector2KeyFrameAnimation
  • Vector3KeyFrameAnimation
  • Vector4KeyFrameAnimation

Создание анимаций на основе времени с помощью KeyFrameAnimations

Прежде чем описывать, как создавать явные анимации на основе времени с помощью KeyFrameAnimations, давайте рассмотрим несколько концепций.

  • Ключевые кадры — это отдельные "моментальные снимки", через которые анимация будет анимироваться.
    • Определяется как пары "ключ и значение". Ключ представляет ход выполнения от 0 до 1, ака, где в течение времени существования анимации этот "моментальный снимок" происходит. Другой параметр представляет значение свойства в настоящее время.
  • Свойства KeyFrameAnimation — параметры настройки, которые можно применить для удовлетворения потребностей пользовательского интерфейса.
    • DelayTime — время до начала анимации после вызова StartAnimation.
    • Длительность — длительность анимации.
    • ИтерацияBehavior — количество или бесконечное поведение повторения для анимации.
    • IterationCount — число конечных раз, когда будет повторяться анимация ключевого кадра.
    • Счетчик ключевых кадров— чтение количества ключевых кадров в определенной анимации ключевых кадров.
    • StopBehavior — указывает поведение анимируемого значения свойства при вызове StopAnimation.
    • Направление — указывает направление анимации для воспроизведения.
  • Группа анимаций — запуск нескольких анимаций одновременно.
    • Часто используется при одновременном анимации нескольких свойств.

Дополнительные сведения см. в разделе CompositionAnimationGroup.

Учитывая эти понятия, давайте рассмотрим общую формулу для создания keyFrameAnimation:

  1. Определите CompositionObject и соответствующее свойство, которое необходимо анимировать.
  2. Создайте шаблон типа KeyFrameAnimation для компостатора, который соответствует типу свойства, которое необходимо анимировать.
  3. С помощью шаблона анимации начните добавлять ключевые кадры и определять свойства анимации.
    • Требуется по крайней мере один ключевой кадр (100 % или 1f).
    • Также рекомендуется определить длительность.
  4. После того как вы будете готовы запустить эту анимацию, вызовите StartAnimation(...) в CompositionObject, нацелив свойство, которое требуется анимировать. Конкретно:
    • visual.StartAnimation("targetProperty", CompositionAnimation animation);
    • visual.StartAnimationGroup(AnimationGroup animationGroup);
  5. Если у вас есть запущенная анимация и вы хотите остановить анимацию или группу анимаций, можно использовать следующие API:
    • visual.StopAnimation("targetProperty");
    • visual.StopAnimationGroup(AnimationGroup AnimationGroup);

Давайте рассмотрим пример, чтобы увидеть эту формулу в действии.

Пример

В этом примере необходимо анимировать смещение визуального элемента с <0,0 0> до <200 0 0 0,0> более 1 секунды. Кроме того, вы хотите увидеть визуальный анимацию между этими позициями 10 раз.

Анимация ключевых кадров

Сначала необходимо определить свойство CompositionObject и свойство, которое вы хотите анимировать. В этом случае красный квадрат представлен визуальным элементом redVisualкомпозиции. Вы запускаете анимацию из этого объекта.

Далее, так как вы хотите анимировать свойство Offset, необходимо создать Vector3KeyFrameAnimation (Offset имеет тип Vector3). Вы также определяете соответствующие ключевые кадры для KeyFrameAnimation.

    Vector3KeyFrameAnimation animation = compositor.CreateVector3KeyFrameAnimation();
    animation.InsertKeyFrame(1f, new Vector3(200f, 0f, 0f));

Затем вы определяете свойства KeyFrameAnimation, чтобы описать его длительность вместе с поведением, чтобы анимировать между двумя позициями (текущий и <200 00 00>) 10 раз.

    animation.Duration = TimeSpan.FromSeconds(2);
    animation.Direction = Windows.UI.Composition.AnimationDirection.Alternate;
    // Run animation for 10 times
    animation.IterationCount = 10;

Наконец, чтобы запустить анимацию, необходимо запустить ее в свойстве CompositionObject.

redVisual.StartAnimation("Offset", animation);

Вот полный код.

private void AnimateSquare(Compositor compositor, SpriteVisual redVisual)
{ 
    Vector3KeyFrameAnimation animation = compositor.CreateVector3KeyFrameAnimation();
    animation.InsertKeyFrame(1f, new Vector3(200f, 0f, 0f));
    animation.Duration = TimeSpan.FromSeconds(2);
    animation.Direction = Windows.UI.Composition.AnimationDirection.Alternate;
    // Run animation for 10 times
    animation.IterationCount = 10;
    redVisual.StartAnimation("Offset", animation);
}