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

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

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

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

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

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

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

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

• Анимация цветового ключевого кадра
• QuaternionKeyFrameAnimation
• ScalarKeyFrameAnimation
• Анимация ключевых кадров Vector2
• Vector3KeyFrameAnimation
• Vector4KeyFrameAnimation

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

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

• Ключевые кадры — это отдельные "моментальные снимки", через которые проходит анимация.
  • Определяется как пары "ключ и значение". Ключ представляет прогресс от 0 до 1, также известное как положение этого «моментального снимка» в течение анимации. Другой параметр представляет значение свойства в настоящее время.
• Свойства KeyFrameAnimation — параметры настройки, которые можно применить для удовлетворения потребностей пользовательского интерфейса.
  • DelayTime — время до начала анимации после вызова StartAnimation.
  • Длительность — длительность анимации.
  • IterationBehavior — количество или режим бесконечного повторения для анимации.
  • 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> за 1 секунду. Кроме того, вы хотите увидеть визуальную анимацию между этими позициями 10 раз.

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

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

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

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

    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);
}