Поделиться через


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

API Microsoft.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 используются для описания того, как перемещение свойства одного объекта должно управляться относительно свойства другого объекта. Разработчики определяют математическое уравнение, определяющее связь на основе ссылок.
Неявные Анимации Эти анимации основаны на триггерах и определяются отдельно от основной логики приложения. Неявные Анимации используются для описания того, как и когда анимация возникает в качестве ответа на прямые изменения свойств.
Перемещение на основе входных данных с помощью анимаций ввода Анимации ввода охватывают набор сценариев, позволяющих разработчикам описывать движение на основе манипуляций с помощью сенсорного ввода или других модальностей ввода. Эти анимации управляются на основе активного ввода пользователя или жестов.
Движение на основе физики с помощью NaturalMotionAnimations NaturalMotionAnimations используются для описания естественных и знакомых движений на основе движения, управляемого физическими силами. Вместо определения времени разработчики определяют характеристики движения (например, коэффициент деммпинга для Springs)