ReunirBringing it together

Los intervalos, la aceleración, la direccionalidad y la gravedad funcionan juntos para formar la base del movimiento fluida.Timing, easing, directionality, and gravity work together to form the foundation of Fluent motion. Cada uno tiene que considerarse en el contexto de los demás y aplicarse correctamente en el contexto de la aplicación.Each has to be considered in the context of the others, and applied appropriately in the context of your app.

A continuación se muestran tres maneras de aplicar aspectos básicos de movimiento de problemas en la aplicación.Here are 3 ways to apply Fluent motion fundamentals in your app.

Animación implícita La interpolación automática y el tiempo entre los valores de un parámetro cambian para lograr un movimiento fluida muy sencillo mediante los valores normalizados.Implicit animation Automatic tween and timing between values in a parameter change to achieve very simple Fluent motion using the standardized values.

Animación integrada Los componentes del sistema, como los controles comunes y el movimiento compartido, son "de forma predeterminada".Built-in animation System components, such as common controls and shared motion, are "Fluent by default". Los aspectos básicos se han aplicado de manera coherente con su uso implícito.Fundamentals have been applied in a manner consistent with their implied usage.

Animaciones personalizadas: recomendaciones de la guía Puede haber ocasiones en las que el sistema aún no proporcione una solución de movimiento exacta para su escenario.Custom animation following guidance recommendations There may be times when the system does not yet provide an exact motion solution for your scenario. En esos casos, use las recomendaciones fundamentales básicas como punto de partida para sus experiencias.In those cases, use the baseline fundamental recommendations as a starting point for your experiences.

Ejemplo de transiciónTransition example

animación funcional

Dirección de reenvío:Direction Forward Out:
Fundido de salida: 150m; Aceleración: aceleración predeterminada hacia delante en:Fade out: 150m; Easing: Default Accelerate Direction Forward In:
Deslizar hacia arriba 150 PX: 300 ms; Aceleración: deceleración predeterminadaSlide up 150px: 300ms; Easing: Default Decelerate

Dirección hacia atrás hacia atrás:Direction Backward Out:
Deslizar hacia abajo 150 PX: 150MS; Aceleración: acelerar la dirección predeterminada en:Slide down 150px: 150ms; Easing: Default Accelerate Direction Backward In:
Atenuación: 300 ms; Aceleración: deceleración predeterminadaFade in: 300ms; Easing: Default Decelerate

Ejemplo de objetoObject example

movimiento 300 ms

Expandir dirección:Direction Expand:
Crecimiento: 300 ms; Aceleración: estándarGrow: 300ms; Easing: Standard

Contrato de dirección:Direction Contract:
Crecimiento: 150MS; Aceleración: aceleración predeterminadaGrow: 150ms; Easing: Default Accelerate

EjemplosExamples

XAML controls gallery

Si tiene instalada la aplicación de Galería de controles de XAML , haga clic aquí para abrir la aplicación y ver las transiciones implícitas en acción.If you have the XAML Controls Gallery app installed, click here to open the app and see Implicit Transitions in action.

Animaciones IMPLÍCITASImplicit Animations

Las animaciones implícitas requieren Windows 10, versión 1809 (SDK 17763) o posterior.Implicit animations require Windows 10, version 1809 (SDK 17763) or later.

Las animaciones implícitas son una manera sencilla de lograr el movimiento fluido mediante la interpolación automática entre los valores antiguos y nuevos durante un cambio de parámetro.Implicit animations are a simple way to achieve Fluent motion by automatically interpolating between the old and new values during a parameter change.

Puede animar implícitamente los cambios en las siguientes propiedades:You can implicitly animate changes to the following properties:

Cada propiedad que puede tener cambios animados implícitamente tiene una propiedad de transición correspondiente.Each property that can have changes implicitly animated has a corresponding transition property. Para animar la propiedad, asigne un tipo de transición a la propiedad de transición correspondiente.To animate the property, you assign a transition type to the corresponding transition property. En esta tabla se muestran las propiedades de transición y el tipo de transición que se va a usar para cada una de ellas.This table shows the transition properties and the transition type to use for each one.

Propiedad animadaAnimated property Propiedad TransitionTransition property Tipo de transición implícitaImplicit transition type
UIElement. OpacityUIElement.Opacity OpacityTransitionOpacityTransition ScalarTransitionScalarTransition
UIElement.RotationUIElement.Rotation RotationTransitionRotationTransition ScalarTransitionScalarTransition
UIElement.ScaleUIElement.Scale ScaleTransitionScaleTransition Vector3TransitionVector3Transition
UIElement.TranslationUIElement.Translation TranslationTransitionTranslationTransition Vector3TransitionVector3Transition
Borde. BackgroundBorder.Background BackgroundTransitionBackgroundTransition BrushTransitionBrushTransition
ContentPresenter. BackgroundContentPresenter.Background BackgroundTransitionBackgroundTransition BrushTransitionBrushTransition
Panel. BackgroundPanel.Background BackgroundTransitionBackgroundTransition BrushTransitionBrushTransition

En este ejemplo se muestra cómo usar la propiedad Opacity y la transición para hacer que un botón se atenúe cuando el control está habilitado y se desvanece cuando está deshabilitado.This example shows how to use the Opacity property and transition to make a button fade in when the control is enabled and fade out when it's disabled.

<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;
}