Sincronización y aceleraciónTiming and easing

Aunque el movimiento se basa en el mundo real, también somos un medio digital, que viene con una expectativa de velocidad y rendimiento.While motion is based in the real world, we are also a digital medium, which comes with an expectation of speed and performance.

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 funciones de aceleración en acción.If you have the XAML Controls Gallery app installed, click here to open the app and see Easing Functions in action.

Cómo el movimiento fluida usa el tiempoHow Fluent motion uses time

El control de tiempo es un elemento importante para hacer que el movimiento parezca natural en los objetos que entran, salen o se mueven dentro de la interfaz de usuario.Timing is an important element to making motion feel natural for objects entering, exiting, or moving within the UI.

  1. Los objetos o escenas que entran en la vista son rápidos, pero celebrated.Objects or scenes entering the view are quick, but celebrated. Estas animaciones suelen durar más tiempo que las salidas para permitir la creación jerárquica de una escena.These animations are typically longer in duration than exits to allow for hierarchical build-up of a scene.
  2. Los objetos o las escenas que salen de la vista son muy rápidas.Objects or scenes exiting the view are very quick. El usuario debe ser capaz de comprender dónde fue la interfaz de usuario.The user should be able to understand where the UI went. Sin embargo, una vez descartada la interfaz de usuario, debería salir del camino.However, once the UI is dismissed, it should get out of the way.
  3. Los objetos que se traducen en una escena deben tener una duración adecuada para la cantidad de distancia que viajan.Objects translating across a scene should have a duration appropriate to the amount of distance they travel.

Temporización en movimiento fluidaTiming in Fluent motion

El tiempo del movimiento en Fluent usa 500 ms (o una segunda mitad) como línea base, ya que se trata de la cantidad máxima de tiempo que un usuario percibe como instantáneo.The timing of motion in Fluent uses 500ms (or one-half second) as a baseline because this is the maximum amount of time that a user perceives as instant.

Vídeo corto que muestra tres círculos, apilados verticalmente, que se mueven a la izquierda y a la derecha con diferentes velocidades: 150 milisegundos, 300 milisegundos y 500 milisegundos.

150MS (salir)150ms (Exit)

Se usa para los objetos o las páginas que salen de la escena o el cierre.Use for objects or pages that are exiting the scene or closing. Permite una retroalimentación muy rápida de la salida de la interfaz de usuario, donde el tiempo no impide la velocidad de fotogramas para lograr una animación fluida.Allows for very quick directional feedback of exiting UI where timing does not impede upon framerate to achieve a smooth animation.

movimiento 150MS

300 ms (Enter)300ms (Enter)

Se usa para los objetos o las páginas que entran en la escena o se abren.Use for objects or pages that are entering the scene or opening. Permite un período de tiempo razonable para celebrar el contenido a medida que entra en la escena.Allows a reasonable amount of time to celebrate content as it enters the scene.

movimiento 300 ms

≤ 500 ms (Move)≤500ms (Move)

Se usa para los objetos que se traducen en una sola escena o en varias escenas.Use for objects which are translating across a single scene or multiple scenes.

movimiento 500 ms

Aceleración en movimiento fluidaEasing in Fluent motion

La aceleración es una manera de manipular la velocidad de un objeto a medida que se desplaza.Easing is a way to manipulate the velocity of an object as it travels. Es el pegado que reúne todas las experiencias de movimiento fluida.It's the glue that ties together all the Fluent motion experiences. Mientras que Extreme, la aceleración utilizada en el sistema ayuda a unificar la sensación física de los objetos que se mueven por todo el sistema.While extreme, the easing used in the system helps unify the physical feel of objects moving throughout the system. Esta es una manera de imitar el mundo real y hacer que los objetos en movimiento parezcan que pertenecen a su entorno.This is one way to mimic the real world, and make objects in motion feel like they belong in their environment.

Un breve vídeo que muestra un círculo aparece en la esquina inferior derecha del fotograma y se detiene cerca de la esquina superior izquierda del marco.

Aplicar aceleración al movimientoApply easing to motion

Estas entradas y salidas lentas le ayudarán a lograr un funcionamiento más natural y son la línea base que usamos para el movimiento fluida.These easings will help you achieve a more natural feel, and are the baseline we use for Fluent motion.

En los ejemplos de código se muestra cómo aplicar los valores de aceleración recomendados a las animaciones de guion gráfico (XAML) o a las animaciones de composición (C#).The code examples show how to apply recommended easing values to Storyboard animations (XAML) or Composition animations (C#).

Acelerar (salir)Accelerate (Exit)

Se usa para la interfaz de usuario u objetos que salen de la escena.Use for UI or objects that are exiting the scene.

Los objetos se encienden y obtienen impulsos hasta que alcanzan la velocidad de escape.Objects become powered and gain momentum until they reach escape velocity. El resultado es que el objeto está intentando sacar provecho del camino del usuario y dejar espacio para que el nuevo contenido se ponga en marcha.The resulting feel is that the object is trying its hardest to get out of the user's way and make room for new content to come in.

acelere la aceleración

cubic-bezier(0.7 , 0 , 1 , 0.5)
<!-- Use for XAML Storyboard animations. -->
<Storyboard x:Name="Storyboard">
    <DoubleAnimation Storyboard.TargetName="Translation" Storyboard.TargetProperty="X" From="0" To="200" Duration="0:0:0.15">
        <DoubleAnimation.EasingFunction>
            <ExponentialEase Exponent="4.5" EasingMode="EaseIn" />
        </DoubleAnimation.EasingFunction>
    </DoubleAnimation>
</Storyboard>
// Use for Composition animations.
CubicBezierEasingFunction accelerate =
    _compositor.CreateCubicBezierEasingFunction(new Vector2(0.7f, 0.0f), new Vector2(1.0f, 0.5f));
_exitAnimation = _compositor.CreateScalarKeyFrameAnimation();
_exitAnimation.InsertKeyFrame(0.0f, _startValue);
_exitAnimation.InsertKeyFrame(1.0f, _endValue, accelerate);
_exitAnimation.Duration = TimeSpan.FromMilliseconds(150);

Deceleración (entrar)Decelerate (Enter)

Use para objetos o la interfaz de usuario que entra en la escena, navegando o generando.Use for objects or UI entering the scene, either navigating or spawning.

Una vez en la escena, el objeto se cumple con la fricción extrema, lo que ralentiza el objeto.Once on-scene, the object is met with extreme friction, which slows the object to rest. El resultado es que el objeto viaja desde una distancia larga y entra en una velocidad extrema, o bien se vuelve rápidamente a un estado de REST.The resulting feel is that the object traveled from a long distance away and entered at an extreme velocity, or is quickly returning to a rest state.

Incluso si está precedido por un momento de falta de respuesta, la velocidad del objeto entrante tiene el efecto de la sensación rápida y la capacidad de respuesta.Even if it's preceded by a moment of unresponsiveness, the velocity of the incoming object has the effect of feeling fast and responsive.

deceleración lenta

cubic-bezier(0.1 , 0.9 , 0.2 , 1)
<!-- Use for XAML Storyboard animations. -->
<Storyboard x:Name="Storyboard">
    <DoubleAnimation Storyboard.TargetName="Translation" Storyboard.TargetProperty="X" From="0" To="200" Duration="0:0:0.3">
        <DoubleAnimation.EasingFunction>
            <ExponentialEase Exponent="7" EasingMode="EaseOut" />
        </DoubleAnimation.EasingFunction>
    </DoubleAnimation>
</Storyboard>
// Use for Composition animations.
CubicBezierEasingFunction decelerate =
    _compositor.CreateCubicBezierEasingFunction(new Vector2(0.1f, 0.9f), new Vector2(0.2f, 1.0f));
_enterAnimation = _compositor.CreateScalarKeyFrameAnimation();
_enterAnimation.InsertKeyFrame(0.0f, _startValue);
_enterAnimation.InsertKeyFrame(1.0f, _endValue, decelerate);
_enterAnimation.Duration = TimeSpan.FromMilliseconds(300);

Aceleración estándar (movimiento)Standard Easing (Move)

Esta es la aceleración de línea de base para cualquier cambio de parámetro animado dentro del sistema.This is the baseline easing for any animated parameter change inside of the system. Use la aceleración estándar para los objetos que cambian de estado en pantalla, como un cambio de posición simple.Use standard easing for objects that change from state to state on-screen, such as a simple position change. Además, Úsela para objetos que se transforman en escena, como un objeto que crece.Also, use it for objects morphing in-scene, like an object that grows.

El resultado es que los objetos que cambian el estado de a a B están llegando y se han tomado por las fuerzas naturales.The resulting feel is that objects changing state from A to B are overcoming, and taken over by, natural forces.

aceleración estándar

cubic-bezier(0.8 , 0 , 0.2 , 1)
<!-- Use for XAML Storyboard animations. -->
<Storyboard x:Name="Storyboard">
    <DoubleAnimation Storyboard.TargetName="Translation" Storyboard.TargetProperty="X" From="0" To="200" Duration="0:0:0.5">
        <DoubleAnimation.EasingFunction>
            <CircleEase EasingMode="EaseInOut" />
        </DoubleAnimation.EasingFunction>
    </DoubleAnimation>
</Storyboard>
// Use for Composition animations.
CubicBezierEasingFunction standard =
    _compositor.CreateCubicBezierEasingFunction(new Vector2(0.8f, 0.0f), new Vector2(0.2f, 1.0f));
 _moveAnimation = _compositor.CreateScalarKeyFrameAnimation();
 _moveAnimation.InsertKeyFrame(0.0f, _startValue);
 _moveAnimation.InsertKeyFrame(1.0f, _endValue, standard);
 _moveAnimation.Duration = TimeSpan.FromMilliseconds(500);