Reunirla
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 tiempo entre los valores de un cambio de parámetro para lograr un movimiento fluent muy sencillo mediante los valores estandarizados. - Animación integrada
Los componentes del sistema, como los controles comunes y el movimiento compartido, son "Fluent de forma predeterminada". 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
Dirección hacia delante:
Atenuación: 150m; Aceleración: Dirección de aceleración predeterminada hacia adelante en:
Deslizar hacia arriba 150px: 300 ms; Aceleración: Deceleración predeterminada
Dirección hacia atrás:
Deslizar hacia abajo 150px: 150 ms; Aceleración: dirección de aceleración predeterminada hacia atrás en:
Atenuar en: 300 ms; Aceleración: Deceleración predeterminada
Ejemplo de objeto
Dirección Expanda:
Crecer: 300 ms; Aceleración: Estándar
Contrato de dirección:
Crecer: 150 ms; Aceleración: Aceleración predeterminada
Ejemplos
La aplicación WinUI 3 Gallery incluye ejemplos interactivos de la mayoría de los controles, características y funcionalidades de WinUI 3. Obtenga la aplicación de Microsoft Store u obtenga el código fuente en GitHub.
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.
Puede animar implícitamente los cambios en las siguientes propiedades:
-
- Opacity
- Rotación
- Escala
- Traducción
Borde, ContentPresenter o Panel
- Fondo
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.
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 atenuado cuando 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;
}
UWP y WinUI 2
Importante
La información y los ejemplos de este artículo están optimizados para aplicaciones que usan el SDK de Aplicaciones para Windows y WinUI 3, pero generalmente son aplicables a las aplicaciones para UWP que usan WinUI 2. Consulte el material de referencia de las API de UWP para obtener información y ejemplos específicos de la plataforma.
Esta sección contiene información que necesita para usar el control en una aplicación para UWP o WinUI 2.
- API de UWP: Espacio de nombres Windows.UI.Xaml.Media.Animation, Espacio de nombres Windows.UI.Xaml.Controls
- Api de WinUI 2: espacio de nombres Microsoft.UI.Xaml.Controls
- Abra la aplicación Galería de WinUI 2 y vea Transiciones implícitas en acción. La aplicación WinUI 2 Gallery incluye ejemplos interactivos de la mayoría de los controles, características y funcionalidades de WinUI 2. Obtenga la aplicación en Microsoft Store u obtenga el código fuente en GitHub.
Las animaciones implícitas requieren Windows 10, versión 1809 (SDK 17763) o posterior.
