⭐ 0
🔍
Texto Imagen PDF y Docs Audio Música Electrónica Tiempo Utilidades Validadores Esoterismo Juegos

Curva de flexibilización estándar de diseño de materiales

Diseñe una función de sincronización CSS cúbica-bezier() personalizada arrastrando dos puntos de control, obtenga una vista previa en vivo con una referencia lineal y luego copie el valor listo.

Arrastre el controlador naranja (P1) y el controlador rojo (P2) para remodelar la curva; las teclas de flecha también funcionan. X permanece fijado entre 0 y 1 según lo requiera CSS; arrastre un controlador encima o debajo del cuadro para enviar y más allá de ese rango para efectos de sobrepaso y rebote.

tu curva

Lineal (para comparación)

Procesando... 0%

Resultado

Esta página abre el generador con x1=0.4, y1=0, x2=0.2, y2=1 ya cargado: la curva de relajación estándar publicada en las pautas de movimiento de Material Design de Google. Arrastre el control o edite los números y la curva, la vista previa en vivo y el CSS copiable se actualizan juntos.

Material Design llama a esta curva "flexibilización estándar" y la recomienda para la mayoría de las transiciones en pantalla: elementos que ya son visibles y simplemente se mueven, cambian de tamaño o se desvanecen dentro de la misma pantalla. Su forma se acelera rápidamente y luego desacelera suavemente hasta su lugar, razón por la cual tantas aplicaciones de Android y UI web con estilo Material comparten la misma sensación de transición sin que nadie se dé cuenta de que están usando los mismos cuatro números.

Colóquelo directamente en la función de sincronización de transición o en la función de sincronización de animación para obtener una sensación consistente con el Material, o úselo como punto de referencia: las pautas de Material también definen curvas separadas de "desaceleración" y "aceleración" para elementos que entran o salen de la pantalla, que esta única curva estándar no pretende reemplazar.

🛡️
Ejecutado en el navegador

Tus archivos y datos nunca salen de este dispositivo. El procesamiento se realiza completamente sin conexión. 100% seguro.

Formatos y reglas aceptados

  • Editor de curvas SVG arrastrable con dos controladores (P1 y P2) además de entradas numéricas x1/y1/x2/y2 editables para valores con precisión de píxeles.
  • Vista previa de la animación en bucle que compara su sincronización cúbica-bezier() personalizada con una bola de referencia lineal, para que pueda ver la relajación, no solo leerla.
  • Cadena copiable de bézier cúbico (x1, y1, x2, y2) lista para la función de sincronización de transición o función de sincronización de animación, además de páginas preestablecidas para facilitar la entrada, el rebote y la curva estándar de Material Design.

Beneficios clave

✓ Arrastre cualquiera de los controladores de punto de control y observe cómo la curva, la vista previa de la animación en vivo y la cadena CSS copiable se actualizan juntas, sin necesidad de memorizar las coordenadas matemáticas.
✓ Y puede sobrepasar 0 y 1 para efectos de resorte y rebote, mientras que X permanece sujeto al rango 0-1 que CSS realmente requiere, por lo que cada valor que copie es válido en el momento en que lo pegue.
✓ La vista previa en paralelo compara su curva personalizada con una referencia lineal simple para que la diferencia en la sensación de movimiento (la razón principal para usar la aceleración) sea obvia de un vistazo, no solo una salida de código.

Casos de uso

  • • ¿Necesita un valor personalizado de función de sincronización de transición de CSS o de función de sincronización de animación en lugar de una de las palabras clave de facilidad integradas?
  • • ¿Quiere ver exactamente cómo se ve en movimiento cubic-bezier(0.42, 0, 0.58, 1), los números reales detrás de la propia palabra clave de entrada y salida de CSS, antes de enviarlo?
  • • ¿Está creando una animación de botón, modal o de tarjeta que rebota y necesita una curva de relajación excesiva lista para copiarla directamente en su hoja de estilo?