La próxima vez que cree animaciones regulares basadas en CSS3, puede ser útil que acceda a las herramientas de desarrollador de Chrome y aproveche las funciones de verificación y personalización de animación. En este breve artículo, le diremos qué herramientas de animación están disponibles en Chrome, cómo acceder a ellas y cómo pueden ayudarlo.
Si desea probar sus animaciones CSS3 usando estas herramientas, puede usar el código listo de nuestro curso:
10 proyectos CSS3: interfaz y diseño .
Aquí está la versión completa de la página.Abrir la pestaña Animaciones
En la página con la animación CSS3 en ejecución, primero abra las "Herramientas para desarrolladores de Chrome" yendo a
Ver> Desarrollador> Herramientas para desarrolladores. Alternativamente, puede usar el método abreviado de teclado:
F12 o
CTRL + MAYÚS + I.Cuando las herramientas de desarrollador estén abiertas, vaya al menú indicado por tres puntos verticales en la esquina superior derecha, luego seleccione
Más herramientas> Animaciones, como se muestra a continuación:
Cuando abra la pestaña de animación por primera vez, no verá ningún contenido relacionado con su animación, solo verá el mensaje
Escuchando animaciones ... La razón de esto es que la herramienta ha ganado la pestaña ya debería estar abierta cuando la página se carga por primera vez.
Para que el panel lea información sobre sus animaciones, actualice la página y verá lo siguiente:
El pequeño icono de color en la esquina superior izquierda es una animación de los elementos de su página. Haga clic en este icono para abrir las herramientas de verificación de animación:
Cursor de reproducción y fotogramas clave
A medida que se reproduce la animación, verá un cursor rojo de reproducción moviéndose a lo largo de la línea de tiempo. Este cursor se puede mover a la ubicación deseada con el mouse.
Cada línea de la interfaz representa un elemento separado de animación en la página. Puede notar que cada línea tiene una sección con un color saturado más oscuro. Muestra la duración de la animación, y los segmentos más claros que la siguen representan una repetición de la animación.
También verá varios círculos pequeños a lo largo de cada línea de animación. Corresponden a los fotogramas clave de la animación. Las ojeras representan el principio y el final de la animación, y las ojeras representan fotogramas clave intermedios entre ellas.
Fotogramas clave intermedios
Los fotogramas clave intermedios (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 mueva, verá cómo cambia el tiempo de animación en la ventana del navegador. Esta es una buena herramienta para experimentar con qué porcentaje debe ser para cada fotograma clave intermedio.
Sin embargo, la dificultad radica en el hecho de que no verá actualizaciones de código en la pestaña Estilos durante estos experimentos. En cambio, cuando coloca sus fotogramas clave intermedios en el punto correcto, puede determinar manualmente qué valor porcentual usar para el fotograma clave.
Coloque el cursor de reproducción directamente sobre el cuadro clave en cuestión, y verá una marca de tiempo en la esquina superior izquierda del panel que le indica qué tan lejos en segundos está en la animación. Luego puede averiguar qué porcentaje esta vez es la duración total de la animación. En el siguiente ejemplo, el cursor de reproducción está aproximadamente a 1 segundo de una animación de 2 segundos, por lo que sabemos que este fotograma clave es del 50%.
Retraso de animación y duración
Puede realizar otros cambios en la pestaña
Animaciones que actualizarán su código en la pestaña
Estilos para que pueda ver exactamente qué valores hacer en su CSS. El primero de ellos es el retraso antes de que la animación comience a reproducirse, y el segundo es su duración.
Para aplicar un retraso antes de comenzar una animación, desplace el cursor sobre su línea hasta que vea un cursor con forma de mano y luego arrástrelo horizontalmente. Verá la actualización del valor de retraso en la pestaña
Estilos :
Para cambiar la duración de la animación, desplace el cursor sobre su último fotograma clave hasta que vea el cursor bidireccional y luego arrástrelo horizontalmente. Nuevamente, el valor será visible en la pestaña
Estilos .
Función de sincronización de animación
También puede usar las herramientas de desarrollador de Chrome para cambiar la curva de velocidad que controla el tiempo de animación. Comience marcando el elemento al que se aplica la animación. A la izquierda de la función de temporización actualmente especificada, verá un pequeño icono con una "tilde". Haga clic en él para abrir el editor de curvas bezier:
Se abre una ventana que muestra la curva de Bezier, que muestra la función de temporización actual. Aquí puede seleccionar un ajuste preestablecido existente haciendo clic en una de las miniaturas a la izquierda, o puede arrastrar los marcadores de la imagen principal de la curva para crear un valor personalizado para las curvas bezier, que luego puede copiar a su CSS:
A medida que cambie, verá una pequeña bola púrpura moviéndose de izquierda a derecha en la parte superior del editor, mostrando los cambios actuales en su función de sincronización.
Renderizado de capas giratorias
Otra característica útil es la capacidad de visualizar las capas utilizadas en su animación, incluida la capacidad de rotar la visualización especificada y verla desde diferentes puntos de vista para comprender mejor cómo funciona todo.
Para abrir el panel
Capas, vaya al menú Herramientas de desarrollo de Chrome y seleccione
Más herramientas> Capas.
Cuando la pestaña
Capas esté abierta, seleccione la herramienta
Modo de rotación en la esquina superior izquierda:
Ahora puede usar esta herramienta para rotar la visualización de la capa a cualquier ángulo que necesite para ver mejor cómo funcionan las partes de su animación:
Finalización
Echemos un vistazo rápido a las herramientas de animación de Chrome:
- Abra las herramientas de animación abriendo primero las Herramientas de desarrollo de Chrome, luego desde el menú de herramientas de desarrollo, seleccione Más herramientas> Animaciones.
- El panel Animaciones debe estar abierto cuando la página se carga para mostrar información de animación. Actualice la página para lograrlo.
- Haga clic en la miniatura del gráfico de color pequeño para ver la información de la animación.
- Cada línea representa una animación.
- Los círculos rellenos representan los fotogramas clave de inicio y fin.
- Los círculos huecos representan cuadros clave intermedios.
- Los fotogramas clave intermedios se pueden mover, pero no verá la actualización del código correspondiente en la pestaña Estilos , sino que calculará manualmente el punto porcentual en el que se encuentran.
- Cambie el valor de retraso de animación pasando el cursor sobre la línea hasta que vea el cursor de la mano y luego arrástrelo horizontalmente.
- Cambie el valor de la duración de la animación moviendo el cursor sobre su último fotograma clave hasta que vea el cursor del cursor con un doble contorno y luego arrástrelo horizontalmente.
- En la pestaña Estilos , haga clic en el icono a la izquierda de la función de temporización existente para abrir el editor de curvas bezier.
- Elija entre los preajustes la función de tiempo de la configuración o cree la suya propia cambiando la imagen de la curva principal.
- Abra el panel Capas yendo al menú Herramientas de desarrollador de Chrome y seleccionando Más herramientas> Capas.
- En este panel, use el modo Rotar para ver capas de su animación desde cualquier ángulo.
A veces, crear la animación perfecta puede ser un proceso muy preciso y sutil. Estas herramientas pueden proporcionar información muy necesaria sobre sus animaciones, así como comentarios en tiempo real para ayudarlo a alcanzar la excelencia.