Animações em Windows app

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 do Fluent muito simples usando os valores padronizados.
  • Animação integrada
    Os componentes do sistema, como controles comuns e movimento compartilhado, são "Fluent 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:
Esmaecimento: 150m; Suavização: Aceleração padrão Direção: Para frente em:
Deslize para cima 150px: 300ms; Suavização: Desaceleração padrão

Direção para trás para saída:
Deslize para baixo 150px: 150ms; Suavização: Aceleração Padrão Direção para trás para entrada
Esmaecimento de entrada: 300ms; Suavização: Desaceleração padrão

Exemplo de objeto

Movimento de 300ms

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

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

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.

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

Ícone da Galeria do WinUI 3 O aplicativo Da Galeria do WinUI 3 inclui exemplos interativos de controles e recursos do WinUI. Obtenha o aplicativo na Microsoft Store ou navegue pelo código-fonte em GitHub.

Você pode animar as alterações nas seguintes propriedades de forma implícita:

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 BackgroundTransition BrushTransition
ContentPresenter.Background BackgroundTransition BrushTransition
Panel.Background BackgroundTransition 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;
}
  • Last updated on