Анимации композиции

API Майкрософт.UI.Composition позволяют создавать, анимировать, преобразовывать и управлять объектами композитора в едином API-слое. Анимации композиции обеспечивают мощный и эффективный способ выполнения анимаций в интерфейсе пользователя вашего приложения WinUI. Они были разработаны с нуля, чтобы гарантировать выполнение анимаций с частотой 60 FPS независимо от потока пользовательского интерфейса и предоставить вам гибкость для создания удивительных впечатлений, используя не только время, но и ввод и другие свойства для управления анимацией.

Движение в Windows

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

В качестве фундаментального элемента платформы пользовательского интерфейса Windows, CompositionAnimations предоставляет мощный и эффективный способ создания анимационных эффектов в пользовательском интерфейсе вашего приложения. Движок анимации был разработан с нуля, чтобы обеспечить выполнение вашего движения с частотой 60 FPS, независимо от потока пользовательского интерфейса. Эти анимации предназначены для обеспечения гибкости для создания инновационных возможностей движения на основе времени, ввода и других свойств.

Примеры движения

Ниже приведены некоторые примеры движения в приложении.

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

Пример подключенной анимации

Здесь визуальный эффект параллакса перемещает различные объекты с разной скоростью, когда интерфейс пользователя прокручивается или сдвигается, создавая ощущение глубины, перспективы и движения.

Пример эффекта параллакса со списком и фоновым изображением

Создание движения с помощью CompositionAnimations

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

  • Производительность— вместо традиционной анимации, связанной с потоком пользовательского интерфейса, анимации на платформе пользовательского интерфейса Windows работают на независимом потоке в 60 FPS, что обеспечивает плавное движение.
  • Модель шаблонов — анимации на уровне пользовательского интерфейса Windows являются шаблонами, то есть можно использовать одну анимацию для нескольких объектов и настройки свойств или параметров, не беспокоясь о препятствовании предыдущему использованию.
  • Настройка — уровень пользовательского интерфейса Windows не только упрощает создание красивого пользовательского интерфейса, но и с полным спектром типов анимации, что позволяет создавать новые и удивительные возможности с градиентом настроек.

Как разработчик, создающий концепции в области пользовательского интерфейса Windows, вы можете использовать различные методы анимации, чтобы оживить ваши проекты. Вы можете использовать любую из этих концепций для анимации свойства или компонента подканального канала (при необходимости) любого объекта CompositionObject.

Замечание

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

Замечание

Термин подканал относится к форме компонента свойства. Например, подканал X или XY в свойстве Vector3 Offset.

Концепция анимации Описание
Перемещение на основе времени с помощью KeyFrameAnimations KeyFrameAnimations используются для непосредственного управления всем процессом анимации в течение определенного периода времени. Разработчики описывают начало, конец, интерполяцию движения и его продолжительность в традиционной анимации, основанной на ключевых кадрах.
Относительное движение с помощью ExpressionAnimations ExpressionAnimations используются для описания того, как перемещение свойства одного объекта должно управляться относительно свойства другого объекта. Разработчики определяют математическое уравнение, определяющее связь на основе ссылок.
Неявные Анимации Эти анимации основаны на триггерах и определяются отдельно от основной логики приложения. Неявные Анимации используются для описания того, как и когда анимация возникает в качестве ответа на прямые изменения свойств. Дополнительные сведения см. в разделе ImplicitAnimationCollection
Перемещение на основе входных данных с помощью анимаций ввода Анимации ввода охватывают набор сценариев, позволяющих разработчикам описывать движение на основе манипуляций с помощью сенсорного ввода или других модальностей ввода. Эти анимации управляются на основе активного ввода пользователя или жестов.
Движение на основе физики с помощью NaturalMotionAnimations NaturalMotionAnimations используются для описания естественных и знакомых движений на основе движения, управляемого физическими силами. Вместо определения времени разработчики определяют характеристики движения (например, коэффициент деммпинга для Springs)