salida, entrada; facilidad de entrada, salida | Programar Plus

Empezamos a hablar sobre la relajación en un episodio reciente de ShopTalk con Val Head y Sarah Drasner. La relajación es algo importante cuando se trata de animaciones y transiciones. Combinado con la duración, tiene un efecto enorme en la sensación de cambio. Si se está tomando la animación en serio como parte de la marca en un proyecto, debe definir y utilizar las facilidades de manera constante.

Dicho esto, es un equilibrio entre:

• Elaboración / uso de easings que coincidan con su marca
• Adherirse a “reglas” suaves sobre qué tipo de flexibilizaciones son apropiadas cuando

Veamos una práctica recomendada en particular, tal como yo la entiendo. Pero primero, otra observación.

El valor por defecto transition-timing-function en CSS (el easing) es ease.

.thing {

  /* The default, as in, you get this without defining anything */
  transition-timing-function: ease;

  /* Also the same as */
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  
}

¡Es muy bonito! Soy culpable de casi nunca cambiarlo. Establezco y modifico las duraciones y, en general, lo dejo ease. ¿Demasiado agradable, quizás? Me pregunto si seríamos más proactivos a la hora de elegir facilidades que se ajusten bien si CSS cambiara por defecto a las más aburridas / sin vida. linear alivio. A pesar de que linear He descubierto que puede ser bastante útil cuando el cambio es muy pequeño, como mover solo unos pocos píxeles o un tono que cambia de color.

El ease La función de temporización es tan agradable, tal vez, porque es una variante de ease-in-out. Es decir, el cambio ocurre lentamente tanto al principio como al final, y se acelera solo en el medio en algún lugar. Esto le da bordes suaves (metafóricamente) al cambio y, en general, se siente bien.

facilidad frente a facilidad de entrada y salida. Se ven bastante diferentes pero están en la misma línea. De cubic-bezier.com

Hay otras dos funciones de sincronización CSS integradas:

• ease-in: lento al principio, rápido / abrupto al final
• ease-out: rápido / abrupto al principio, lento al final

Si bien tienen un cierto sentido intuitivo visto de esa manera, la “regla” general (entre comillas) es usarlos en sentido opuesto a cómo se denominan:

• ease-in: cuando las cosas se están moviendo.
• ease-out: cuando las cosas se están moviendo.

Piense en el escudero de un caballero. Cuando el caballero los llame, será mejor que corran y se detengan. Cuando el caballero los despida, será mejor que se pongan en marcha rápidamente.

Eso se siente como una mejor práctica. Como si la animación fuera cortés y obediente por ambos lados. Llega rápido, pero compórtate. Sal de aquí aún más rápido y sin demora.

Aquí está el CSS que acompaña a ese tipo de pensamiento. Esto cambia la función de aceleración dependiendo de si el elemento en cuestión se muestra o se oculta, así como el tiempo.

.container .alert {

  /* This timing applies on the way OUT */
  transition-timing-function: ease-in;

  /* Quick on the way out */
  transition: 0.2s;

  /* Hide thing by pushing it outside by default */
  transform: translateY(130%);

}

.container.alert-is-shown .alert {

  /* This timing applies on the way IN */
  transition-timing-function: ease-out;

  /* A litttttle slower on the way in */
  transition: 0.25s;
  
  /* Move into place */
  transform: translateY(0);

}

Vea las facilidades de Pen Different para “entrar” y “salir” de Chris Coyier (@chriscoyier) en CodePen.

Reuní esta demostración basada en CSS en función de las cosas inteligentes de las que hablaban Val y Sarah, así como también de ver recientemente las especificaciones de diseño de Google para este movimiento exacto.

Google dice que no ease-out en el camino de salida, presumiblemente ya que parece que se está quedando atrás para salir de tu camino. Además, ingresa más de 0.225 segundos y sale más de 0.195 segundos.

Los tiempos de animación que estamos usando aquí también están en territorio de “reglas”, como Val generalmente describió: 0.1-0.2s para movimientos de interfaz simples y hasta 0.5s para movimientos más complejos o más grandes.

En resumen:

• ease es bastante agradable, pero es posible que desee personalizar algunas facilidades que se sientan adecuadas para su marca
• ease y ease-in-out tienen bordes suaves en ambos lados, pero a veces es más apropiado usar la facilidad de entrada o la salida
• No es necesario que utilice un suavizado único para ambas direcciones de una animación, puede cambiarlo
• También puedes cambiar la duración

Además, aquí hay una referencia práctica a los valores predeterminados y su cúbico-bezier correspondiente en caso de que desee comenzar con uno de ellos y personalizar desde allí:

.examples {

  transition-timing-function: linear;
  transition-timing-function: cubic-bezier(0, 0, 1, 1);

  transition-timing-function: ease;
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

  transition-timing-function: ease-in-out;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);

  transition-timing-function: ease-in;
  transition-timing-function: cubic-bezier(0.42, 0, 1, 1);

  transition-timing-function: ease-out;
  transition-timing-function: cubic-bezier(0, 0, 0.58, 1);

}