Compartir a través de

Animaciones en Windows app

El tiempo, la aceleración, la direccionalidad y la gravedad funcionan juntos para formar la base del movimiento fluent. Cada uno debe tenerse en cuenta en el contexto de los demás y aplicarse adecuadamente en el contexto de la aplicación.

Estas son 3 maneras de aplicar los aspectos básicos de fluent motion en la aplicación.

  • Animación implícita
    Interpolación automática y temporización entre valores en un cambio de parámetro para lograr un movimiento muy sencillo y fluido mediante los valores estandarizados.
  • Animación integrada
    Los componentes del sistema, como los controles comunes y el movimiento compartido, son parte de "Fluent" por defecto. Los aspectos básicos se han aplicado de forma coherente con su uso implícito.
  • Animación personalizada siguiendo las recomendaciones de instrucciones
    Puede haber ocasiones en las que el sistema aún no proporciona una solución de movimiento exacta para su escenario. En esos casos, use las recomendaciones fundamentales de línea base como punto de partida para sus experiencias.

Ejemplo de transición

animación funcional

Dirección hacia delante:
Desvanecimiento: 150m; Suavizado: Aceleración Predeterminada Dirección Hacia Adelante:
Deslizar hacia arriba 150px: 300 ms; Aceleración: Deceleración predeterminada

Dirección hacia atrás:
Deslizar 150 px hacia abajo: 150 ms; Progresión: Aceleración predeterminada Dirección en dirección hacia atrás:
Atenuar en: 300 ms; Aceleración: Deceleración predeterminada

Ejemplo de objeto

Movimiento de 300 ms

Dirección de expansión:
Crecimiento: 300 ms; Suavizado: Estándar

Contrato de dirección:
Crecer: 150 ms; Aceleración: Aceleración predeterminada

Animaciones implícitas

Las animaciones implícitas son una manera sencilla de lograr el movimiento fluent mediante la interpolación automática entre los valores antiguos y nuevos durante un cambio de parámetro.

Abra la aplicación Galería de WinUI 3 y vea Transiciones implícitas en acción.

Icono de la galería de WinUI 3 La aplicación Galería de WinUI 3 incluye ejemplos interactivos de características y controles winUI. Obtenga la aplicación del Microsoft Store o examine el código fuente en GitHub.

Puede animar implícitamente los cambios en las siguientes propiedades:

Cada propiedad que puede tener cambios animados implícitamente tiene una propiedad de transición correspondiente. Para animar la propiedad, asigne un tipo de transición a la propiedad de transición correspondiente. En esta tabla se muestran las propiedades de transición y el tipo de transición que se va a usar para cada una.

Propiedad animada Transition (propiedad) Tipo de transición implícita
UIElement.Opacity OpacidadTransición ScalarTransition
UIElement.Rotation RotaciónTransición ScalarTransition
UIElement.Scale scaleTransition de Vector3Transición
UIElement.Translation TranslationTransition Vector3Transición
border.background TransiciónDeFondo BrushTransition (Transición de pincel)
contentPresenter.Background de TransiciónDeFondo BrushTransition (Transición de pincel)
Panel de fondo TransiciónDeFondo BrushTransition (Transición de pincel)

En este ejemplo se muestra cómo usar la propiedad Opacity y la transición para hacer que un botón se desvanezca cuando el control está habilitado y se desvanezca cuando el control está deshabilitado.

<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