Animações de composição

As APIs Windows.UI.Composition permitem criar, animar, transformar e manipular os objetos do compositor em uma camada de API unificada. As animações de composição fornecem uma maneira avançada e eficiente de executar animações na interface do usuário do aplicativo. Elas foram projetadas desde o início para garantir que suas animações sejam executadas em 60 FPS independente do thread da interface do usuário e para oferecer a você a flexibilidade para criar experiências incríveis usando não só propriedades de tempo, mas também de entrada e outras propriedades, para ativar as animações.

Movimento no Windows

Pense no design de movimento como um filme. As transições perfeitas mantêm você focado na história e trazem vida às suas experiências. Podemos incorporar essa sensação nos nossos projetos, levando as pessoas a fazer a transição de uma tarefa para a outra com facilidade cinematográfica. O movimento geralmente é o fator diferencial entre uma Interface do Usuário e uma Experiência do Usuário.

Como um bloco de construção fundamental da Plataforma de Interface do Usuário do Windows, o CompositionAnimations fornece uma maneira poderosa e eficiente de criar experiências de movimento na interface do usuário do aplicativo. O mecanismo de animação foi projetado desde o início para garantir que o movimento seja executado a 60 FPS, independentemente do thread da interface do usuário. Essas animações foram projetadas para fornecer flexibilidade para criar experiências de movimento inovadoras com base no tempo, na entrada e em outras propriedades.

Exemplos de movimento

Aqui estão alguns exemplos de movimento em um aplicativo.

Aqui, um aplicativo usa uma animação conectada para animar uma imagem conforme ela "continua" a fazer parte do cabeçalho da próxima página. O efeito ajuda a manter o contexto de usuário entre a transição.

Um exemplo de Animação Conectada

Aqui, um efeito de paralaxe visual move objetos diferentes em diferentes taxas quando a interface de usuário rola ou faz um movimento panorâmico para criar uma sensação de profundidade, perspectiva e movimento.

Um exemplo de paralaxe com uma lista e uma imagem de fundo

Usando CompositionAnimations para criar o Motion

Para gerar movimento na interface do usuário, os desenvolvedores podem acessar animações no XAML ou na Camada Visual. As animações na Camada Visual fornecem aos desenvolvedores uma série de benefícios:

  • Desempenho – em vez da animação tradicional associada ao thread da interface do usuário, as animações na plataforma de interface do usuário do Windows operam em um thread independente a 60 FPS, permitindo experiências de movimento suave.
  • Modelo de modelagem – animações na camada de interface do usuário do Windows são modelos, o que significa que pode usar uma única animação em vários objetos e ajustar propriedades ou parâmetros sem se preocupar em obstruir os usos anteriores.
  • Personalização – a camada de interface do usuário do Windows não só facilita a criação de uma interface do usuário bonita, mas com uma gama completa de tipos de animação, possível para criar experiências novas e incríveis com um gradiente de personalizações

Como desenvolvedor criando experiências na camada de interface do usuário do Windows, você tem acesso a uma variedade de conceitos de animação para dar vida aos seus designs. Você pode usar qualquer um desses conceitos para animar uma propriedade ou componente subcanal (quando aplicável) de qualquer CompositionObject.

Observação

Nem todas as propriedades de um CompositionObject são animáveis. Consulte a documentação do CompositionObject individual para determinar se uma propriedade é animatável.

Observação

O termo subcanal refere-se a uma forma de componente de uma propriedade. Por exemplo, o subcanal X ou XY de uma propriedade Offset vector3.

Conceito de animação Descrição
Movimento baseado em tempo com KeyFrameAnimations KeyFrameAnimations são usados para controlar diretamente a totalidade de uma experiência de movimento durante um período de tempo. Desenvolvedores que descrevem o início, o fim, a interpolação entre um movimento e a duração de uma forma tradicional.
Movimento relativo com ExpressionAnimations ExpressionAnimations são usados para descrever como um movimento da propriedade de um objeto deve ser conduzido em relação à propriedade de outro objeto. Os desenvolvedores definem uma equação matemática que define a relação baseada em referência.
ImplicitAnimations Essas animações são baseadas em gatilho e são definidas separadamente da lógica principal do aplicativo. ImplicitAnimations são usados para descrever como e quando as animações ocorrem como uma resposta às alterações de propriedade diretas.
Movimento controlado por entrada com animações de entrada As Animações de Entrada abrangem um conjunto de cenários que permitem que os desenvolvedores descrevam o movimento baseado em manipulação por meio de toque ou outras modalidades de entrada. Essas animações são controladas com base na entrada ou gestos ativos do usuário.
Movimento baseado em física com NaturalMotionAnimations NaturalMotionAnimations são usados para descrever experiências de movimento naturais e familiares com base no movimento controlado pela força do mundo real. Em vez de definir o tempo, os desenvolvedores definem características do movimento (por exemplo, taxa de umidade para Springs)