Compartir a través de

Sincronización y suavizado

Aunque el movimiento se basa en el mundo real, también somos un medio digital, que viene con una expectativa de velocidad y rendimiento.

Ejemplos

Abra la aplicación Galería de WinUI 3 y vea Funciones de aceleración 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.

Valores de duración de animación estándar

WinUI 3 proporciona un conjunto de duraciones de animación estándar que se usan en todos los controles de la plataforma. También puede usar estos recursos con nombre al crear animaciones de guion gráfico personalizados.

Nombre de ThemeResource Valor
DuraciónNormalDeAnimaciónDelControl 250 ms
ControlFastAnimationDuration 167 ms
ControlarDuraciónDeAnimaciónMásRápida 83 ms

Suavizado en el movimiento Fluent

El suavizado es una manera de manipular la velocidad de un objeto durante su movimiento. Es el pegamento que une todas las experiencias de movimiento Fluent. Aunque es extremo, el suavizado utilizado en el sistema ayuda a unificar la percepción física de los objetos que se mueven en todo el sistema. Esta es una manera de imitar el mundo real y hacer que los objetos en movimiento se sientan como pertenecen a su entorno.

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

Aplicar aceleración al movimiento

Estas transiciones te ayudarán a lograr una sensación más natural y son la base que utilizamos para el movimiento Fluent.

Rápida salida, lenta entrada

cubic-bezier(0, 0, 0, 1)

Se usa para objetos o interfaz de usuario que entran en la escena, ya sea navegando o generando.

Una vez en la escena, el objeto se encuentra con una fricción extrema, lo que ralentiza el reposo del objeto. La sensación resultante es que el objeto viajó desde una distancia larga y entró a una velocidad extrema, o que vuelve rápidamente a un estado de reposo.

Incluso si va precedida de un momento de falta de respuesta, la velocidad del objeto entrante tiene el efecto de sentirse rápido y con capacidad de respuesta.

desacelerar el alivio

Desaceleración hacia afuera, aceleración hacia adentro

cubic-bezier(1 , 0 , 1 , 1)

Use para la interfaz de usuario o los objetos que salen de la escena.

Los objetos adquieren poder y obtienen impulso hasta que alcanzan la velocidad de escape. La sensación resultante es que el objeto está intentando apartarse del camino del usuario y dejar espacio para que entre nuevo contenido.

acelerar la facilitación

  • Last updated on