Анимации на основе времени для

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

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

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

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

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

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

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

• Анимация цветового ключевого кадра (ColorKeyFrameAnimation)
• QuaternionKeyFrameAnimation
• ScalarKeyFrameAnimation
• Vector2KeyFrameAnimation
• 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 0,0> более 1 секунды. Кроме того, вы хотите увидеть визуализированную анимацию между этими позициями 10 раз.

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

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

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

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

    animation.Duration = TimeSpan.FromSeconds(2);
    animation.Direction = Microsoft.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 = Microsoft.UI.Composition.AnimationDirection.Alternate;
    // Run animation for 10 times
    animation.IterationCount = 10;
    redVisual.StartAnimation("Offset", animation);
}