Animación Animation
Una animación es un cambio visual planeado en el tiempo. Puede tener varios pasos, estados o repeticiones.
↗Movimiento
Aprende cómo el movimiento puede mostrar un cambio, guiar la atención y aún así mantener una pantalla fácil de usar.
01 / Atlas
Todos los términos de Movimiento
Abrir un término para un significado simple, un ejemplo, cuándo usarlo, cuán oficial es y su nombre en código.
-
01 · Núcleo -
02 · Más detalle Animación de resorte Spring Animation
La animación de resorte sigue un modelo físico. La rigidez, amortiguación, masa y velocidad inicial controlan cómo se mueve.
↗ -
03 · Núcleo Arrastrar y soltar Drag & Drop
Arrastrar y soltar permite a la gente mover, reordenar o transferir un elemento directamente. Debe mostrar cuándo se coge el elemento y dónde puede soltarse.
↗ -
04 · Más detalle Desplazamiento Parallax Parallax Scrolling
El desplazamiento parallax hace que las capas se muevan a diferentes velocidades mientras se desplaza una página. La diferencia de velocidad crea una sensación de profundidad.
↗ -
05 · Más detalle Entrar, Salir y Fundido cruzado Enter, Exit & Crossfade
Entrar, salir y fundido cruzado añaden, eliminan o reemplazan contenido. Ayudan a que el cambio se vea suave y conectado.
↗ -
06 · Núcleo Fotogramas clave Keyframes
Los fotogramas clave son puntos nombrados en una animación. Cada punto establece valores de propiedades para un momento elegido.
↗ -
07 · Más detalle Marquee Marquee
Una tira de contenido que se repite y no para de moverse. Debe ofrecer controles o una versión quieta para las personas sensibles al movimiento.
↗ -
08 · Más detalle Microinteracción Microinteraction
Una microinteracción es un pequeño ciclo de respuesta para una acción. Tiene un disparador, una regla, una respuesta y un estado que continúa.
↗ -
09 · Núcleo Movimiento reducido Reduced Motion
Movimiento reducido es una configuración de accesibilidad y modo de diseño. Elimina o simplifica los movimientos que las personas no necesitan.
↗ -
10 · Núcleo Suavizado Easing
El suavizado es la curva de tiempo que define cómo una animación acelera y frena.
↗ -
11 · Más detalle Texto encriptado Text Scramble
Un cambio decorativo de texto que muestra símbolos al azar por un momento y luego muestra las palabras reales.
↗ -
12 · Núcleo Transición Transition
Una transición mueve entre dos estados visuales conocidos durante un tiempo definido.
↗