Compartilhar via


Animações de composição

As APIs Windows.UI.Composition permitem criar, animar, transformar e manipular objetos compositores em uma camada de API unificada. As animações de composição fornecem uma maneira poderosa e eficiente de executar animações na interface do usuário do aplicativo. Eles foram projetados desde o início para garantir que suas animações sejam executadas a 60 FPS, independentemente do thread da interface do usuário, e para oferecer a flexibilidade de criar experiências incríveis usando não apenas o tempo, mas também a entrada e outras propriedades, para gerar 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 convidar esse sentimento para nossos designs, levando as pessoas de uma tarefa para outra com facilidade cinematográfica. O movimento é muitas vezes o fator diferenciador 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, 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 seu movimento seja executado a 60 FPS, independentemente do thread da interface do usuário. Essas animações são 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 de item à medida que ela "continua" para se tornar parte do cabeçalho da próxima página. O efeito ajuda a manter o contexto do usuário durante a transição.

Um exemplo de animação conectada

Aqui, um efeito de paralaxe visual move objetos diferentes em taxas diferentes quando a interface do usuário rola ou se move 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 movimento

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

  • Desempenho – em vez da tradicional animação 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 suaves.
  • Modelo de modelos – as animações na camada de interface do usuário do Windows são modelos, o que significa que podem usar uma única animação em vários objetos e ajustar propriedades ou parâmetros sem se preocupar em obstruir usos anteriores.
  • Personalização – a camada de interface do usuário do Windows não apenas facilita a criação de uma interface de usuário bonita, mas com uma gama completa de tipos de animação, é possível criar experiências novas e incríveis com um gradiente de personalizações

Como desenvolvedor que cria 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 de 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 é animável.

Observação

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

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 descrevendo o início, o fim, a interpolação intermediária e a duração de um movimento de maneira tradicional com quadros-chave.
Movimento relativo com ExpressionAnimations ExpressionAnimations são usados para descrever como um movimento da propriedade de um objeto deve ser orientado em relação à propriedade de outro objeto. Os desenvolvedores definem uma equação matemática que define a relação baseada em referência.
Animações implícitas 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 a alterações diretas de propriedade.
Movimento controlado por entrada com animações de entrada As animações de entrada abrangem um conjunto de cenários que permitem aos desenvolvedores descrever o movimento baseado em manipulação por meio de toque ou outras modalidades de entrada. Essas animações são orientadas com base na entrada ou nos 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 acionado por força do mundo real. Em vez de definir o tempo, os desenvolvedores definem as características do movimento (por exemplo, taxa de amortecimento para molas)