Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Chrome DevTools

Cómo usar el inspector de animación en Chrome Developer Tools

by
Length:ShortLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

La próxima vez que estés organizando algunas animaciones basadas en CSS3, es posible que te resulte útil usar Chrome Developer Tools y aprovechar sus funciones de inspección y ajuste de animación. En este rápido consejo te proporcionamos un resumen sobre las herramientas de desarrollo de animación que están disponibles en Chrome, cómo acceder a ellas y qué pueden hacer por ti.

A medida que avances, si necesitas algunas animaciones CSS3 para probar cada una de las herramientas puedes utilizar este pen de nuestro curso 10 Proyectos CSS3: Interfaz de usuario y maquetación:

Aquí tienes la versión de página completa.

Abrir la pestaña Animations

En una página con una animación CSS3 en ejecución, primero abre las Herramientas de desarrollo de Chrome dirigiéndote al menú Ver > Opciones para desarrolladores > Herramientas para desarrolladores. Alternativamente, puedes usar un método abreviado de teclado, ya sea F12 o CTRL + SHIFT + I.

Una vez que las herramientas para desarrolladores están abiertas, dirígete al menú simbolizado por tres puntos verticales en la esquina superior derecha, luego elige More tools > Animations como se muestra a continuación:

Animations menu item in Chrome Dev Tools

La primera vez que abras la pestaña de animación no verás ningún contenido relacionado con tus animaciones, solo verás un mensaje que dice Listening for animations... La razón de esto es que, para funcionar, la pestaña necesita estar ya abierta cuando se carga la página por primera vez.

Listening for animations message

Para permitir que el panel capture información sobre tus animaciones, actualiza la página y verás lo siguiente:

Animations tab ready for action

El pequeño icono de gráfico de color en la parte superior izquierda representa las animaciones de la página. Haz clic en ese icono para abrir las herramientas de inspección de animación:

animation inspection tools the playhead

El cabezal de reproducción y los fotogramas clave

A medida que se reproducen las animaciones, verás al cabezal de reproducción rojo moviéndose a través de la línea de tiempo. Este cabezal de reproducción se puede controlar y arrastrar manualmente con el ratón, o colocarlo en un punto concreto.

Cada línea de la interfaz representa una animación individual en la página. Notarás que cada línea tiene una porción con un color más oscuro y saturado. Esto indica la longitud de la animación y los segmentos más claros que vienen a continuación representan la animación que se repite.

También verás diversos pequeños círculos a lo largo de cada línea de animación. Estos corresponden a los fotogramas clave o "keyframes" de la animación. Los círculos de color oscuro representan el principio y el final de la animación, y los círculos huecos representan fotogramas clave intersticiales en cualquier lugar de la línea temporal de la animación.

Fotogramas clave intersticiales

Los fotogramas clave intersticiales (fotogramas clave entre el principio y el final de cada ciclo de animación) en cada línea se pueden arrastrar a diferentes posiciones y a medida que los muevas verás que la animación en la ventana del navegador cambia su sincronización. Esto puede ser ideal para experimentar y determinar con exactitud en qué punto porcentual debe estar situado un fotograma clave intersticial.

Lo complicado, sin embargo, es que no verás ninguna actualización en el código de la pestaña Styles mientras llevas a cabo estos experimentos. En lugar de eso, cuando tengas los fotogramas clave intersticiales colocados en el punto correcto, podrás averiguar manualmente qué valor porcentual debería establecerse en un fotograma clave.

Coloca el cabezal de reproducción directamente sobre el fotograma clave en cuestión y verás una marca de tiempo en la parte superior izquierda del panel que te indica lo lejos que se encuentra en segundos. A continuación, puedes averiguar cuál es este porcentaje en relación a la duración total de la animación. En el ejemplo siguiente el cabezal de reproducción está en aproximadamente 1s de una animación de 2s, por lo que sabemos que este fotograma clave está al 50%.

working out interstitial keyframe positions

Retraso y duración de la animación

Hay otros cambios que puedes hacer en la pestaña Animations que actualizarán tu código en la pestaña Styles para que puedas ver exactamente qué valores trasladar a tu CSS. El primero de ellos es el retraso antes de que una animación comience a reproducirse, y el segundo es su duración.

Para ajustar el retardo antes de que se reproduzca una animación, mantén el puntero sobre tu línea hasta que veas un cursor en forma de mano y, a continuación, arrástralo horizontalmente. Verás que el valor de retardo de la pestaña Styles se actualiza en consecuencia:

adjust the delay before an animation plays

Para modificar la duración de la animación, mantén el puntero sobre tu último fotograma clave hasta que veas un cursor en forma de doble flecha y, a continuación, arrástralo horizontalmente. De nuevo, el valor se irá actualizando en la pestaña Styles.

modify the animations duration

Función de temporización de animación

También puedes usar las herramientas de desarrollo de Chrome para modificar la curva de aceleración que controla el tiempo de una animación. Comienza inspeccionando un elemento que tenga una animación aplicada. A la izquierda de la función de sincronización especificada actualmente verás una pequeña caja con un "garabato" dentro. Haz clic en él para abrir el editor de bezier cúbico:

cubic bezier editor button

Se abrirá un cuadro que muestra una curva de bezier que ilustra la función de sincronización actual. Desde aquí puedes elegir un ajuste preestablecido existente haciendo clic sobre una de las miniaturas de la izquierda, o puedes arrastrar hacia cualquier lado los manejadores sobre la imagen de la curva principal para crear un valor de bezier cúbico personalizado que posteriormente podrás copiar en tu CSS:

bezier curve that illustrates the current timing function

A medida que avances verás una pequeña bola púrpura animada de izquierda a derecha a través de la parte superior del editor, que te proporciona una vista previa de tu función de sincronización en acción.

Aprende más sobre las curvas de bezier y las funciones de temporización en este curso que dura lo mismo que un descanso para un café:

Visualización de capas giratorias

Otra característica útil es la posibilidad de visualizar las capas utilizadas en la animación, incluida la opción de rotar dicha visualización y mirarla desde varios ángulos para comprender mejor cómo funcionan las cosas.

Para abrir el panel Layers (capas), dirígete al menú Herramientas para desarrolladores de Chrome y elige More tools > Layers.

Rotatable Layers Visualization

Una vez abierta la pestaña Layers, elige la herramienta Rotate mode situada en la parte superior izquierda:

Layers tab

Ahora puedes usarla para rotar la visualización de las capas en cualquier ángulo que necesites para ver mejor cómo funcionan las distintas partes de la animación:

rotate the layers visualization onto any angle you need

Resumen

Hagamos una rápido recopilación de las herramientas de desarrollo de animación de Chrome:

  • Abre las herramientas de animación abriendo primero Chrome Dev Tools y, a continuación, en el menú de herramientas para desarrolladores, selecciona More tools > Animations.
  • El panel Animations ya debe estar abierto al cargarse la página de manera que se capture la información sobre las animaciones: actualiza la página para lograrlo.
  • Haz clic en la pequeña miniatura del gráfico de color para ver la información de la animación.
  • Cada línea representa una animación.
  • Los círculos rellenos representan los fotogramas clave iniciales y finales.
  • Los círculos huecos representan fotogramas clave intersticiales.
  • Los fotogramas clave intersticiales se pueden mover, pero no verás la actualización de código correspondiente en la pestaña Styles, en su lugar, calcula manualmente el punto porcentual en el que se encuentran.
  • Modifica el valor de retardo de una animación pasando el cursor sobre su línea hasta que veas un cursor de mano y, a continuación, arrástralo en sentido horizontal.
  • Modifica el valor de duración de una animación colocando el cursor sobre su último fotograma clave hasta que veas un cursor de flecha de doble extremo y arrástralo en sentido horizontal.
  • En la pestaña Styles, haz clic sobre el icono situado a la izquierda de la función de temporización existente para abrir el editor de bezier cúbico.
  • Aquí elige entre los ajustes preestablecidos de la función de temporización, o crea los tuyos propios modificando la imagen de la curva principal.
  • Abre el panel Layers desde el menú de Herramientas para desarrolladores de Chrome y selecciona More tools > Layers.
  • En este panel, utiliza Rotate mode para ver las capas de la animación desde cualquier ángulo.

A veces conseguir que una animación tenga buen aspecto puede ser un proceso muy preciso y meticuloso. Estas herramientas proporcionan una visión de tus animaciones muy necesaria, así como comentarios en tiempo real, para ayudarte a conseguir que todo quede perfecto.

Aprende más sobre las herramientas para desarrolladores del navegador:

Más sobre animaciones CSS3:

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.