Compartilhar via

Reunindo tudo

  • Artigo

Tempo, flexibilização, direcionalidade e gravidade trabalham juntos para formar a base do movimento fluente. Cada um deve ser considerado no contexto dos outros e aplicado adequadamente no contexto do seu aplicativo.

Aqui estão 3 maneiras de aplicar os fundamentos de movimento fluente em seu aplicativo.

  • Animação implícita
    A interpolação automática e o tempo entre os valores em um parâmetro mudam para obter um movimento fluente muito simples usando os valores padronizados.
  • Animação integrada
    Os componentes do sistema, como controles comuns e movimento compartilhado, são "Fluentes por padrão". Os fundamentos foram aplicados de maneira consistente com seu uso implícito.
  • Animação personalizada seguindo as recomendações de orientação
    Pode haver momentos em que o sistema ainda não fornece uma solução de movimento exata para o seu cenário. Nesses casos, use as recomendações fundamentais da linha de base como ponto de partida para suas experiências.

Exemplo de transição

animação funcional

Direção para a frente:
Fade out: 150m; Atenuação: Direção de aceleração padrão para frente em:
Deslize para cima 150px: 300ms; Flexibilização: Desaceleração padrão

Direção para trás:
Deslize para baixo 150px: 150ms; Easing: Direção de aceleração padrão para trás em:
Enfraquecer: 300ms; Flexibilização: Desaceleração padrão

Exemplo de objeto

Movimento de 300ms

Direção Expandir:
Crescimento: 300ms; Flexibilização: Padrão

Contrato de Direção:
Crescimento: 150ms; Flexibilização: Aceleração padrão

Exemplos

Abra o aplicativo Galeria do WinUI 3 e veja Transições Implícitas em ação.

O aplicativo Galeria da WinUI 3 inclui exemplos interativos da maioria dos controles, recursos e funcionalidades da WinUI 3. Obtenha o aplicativo na Microsoft Store ou o código-fonte no GitHub

Animações implícitas

As animações implícitas são uma maneira simples de obter o movimento fluente interpolando automaticamente entre os valores antigos e novos durante uma alteração de parâmetro.

Você pode animar implicitamente as alterações nas seguintes propriedades:

Cada propriedade que pode ter alterações animadas implicitamente tem uma propriedade de transição correspondente. Para animar a propriedade, atribua um tipo de transição à propriedade de transição correspondente. Esta tabela mostra as propriedades de transição e o tipo de transição a ser usado para cada uma.

Propriedade animada Propriedade de transição Tipo de transição implícito
UIElement.Opacity Transição de opacidade ScalarTransition
UIElement.Rotation Transição de rotação ScalarTransition
UIElement.Scale Transição de escala Vector3Transition
UIElement.Translation Transição de Tradução Vector3Transition
Border.Background Transição de fundo BrushTransition
ConteúdoApresentador.Background Transição de fundo BrushTransition
Painel.Plano de fundo Transição de fundo BrushTransition

Este exemplo mostra como usar a propriedade Opacity e a transição para fazer com que um botão apareça gradualmente quando o controle estiver habilitado e desapareça quando estiver desabilitado.

<Button x:Name="SubmitButton"
        Content="Submit"
        Opacity="{x:Bind OpaqueIfEnabled(SubmitButton.IsEnabled), Mode=OneWay}">
    <Button.OpacityTransition>
        <ScalarTransition />
    </Button.OpacityTransition>
</Button>

public double OpaqueIfEnabled(bool IsEnabled)
{
    return IsEnabled ? 1.0 : 0.2;
}

UWP e WinUI 2

Importante

As informações e exemplos neste artigo são otimizados para aplicativos que usam o SDK do Aplicativo Windows e o WinUI 3, mas geralmente são aplicáveis a aplicativos UWP que usam o WinUI 2. Consulte a referência de API da UWP para obter informações e exemplos específicos da plataforma.

Esta seção contém informações necessárias para usar o controle em um aplicativo UWP ou WinUI 2.

As animações implícitas exigem Windows 10, versão 1809 (SDK 17763) ou posterior.