Inspeccionar animaciones

Inspeccione y modifique las animaciones con el Inspector de animaciones de Microsoft Edge DevTools.

inspector de animación

Resumen

  • Captura animaciones abriendo el Inspector de animación. El Inspector de animación detecta y ordena automáticamente las animaciones en grupos.
  • Inspeccione las animaciones ralentizando cada una, reprobando cada una o viendo el código fuente.
  • Modifique las animaciones cambiando el tiempo, el retraso, la duración o los desplazamientos de fotograma clave.

Introducción

El Inspector de animación de Microsoft Edge DevTools tiene dos propósitos principales.

  • Inspeccionar animaciones. Quieres ralentizar, reproducir o inspeccionar el código fuente de un grupo de animación.
  • Modificar animaciones. Desea modificar los desplazamientos de tiempo, retraso, duración o fotograma clave de un grupo de animación. Actualmente, no se admite la edición de bezier ni la edición de fotogramas clave.

El Inspector de animación admite animaciones CSS, transiciones CSS y animaciones web. requestAnimationFrame actualmente no se admiten animaciones.

¿Qué es un grupo de animación?

Un grupo de animaciones es un grupo de animaciones que pueden estar relacionadas entre sí. Actualmente, la web no tiene un concepto real de una animación de grupo, por lo que los diseñadores y desarrolladores de movimiento tienen que componer y dar tiempo a animaciones individuales para que las animaciones se representen como un efecto visual coherente. El Inspector de animación predice qué animaciones están relacionadas en función de la hora de inicio (excluyendo retrasos, y así sucesivamente). El Inspector de animación también agrupa las animaciones en paralelo.
En otras palabras, un conjunto de animaciones que se desencadenan en el mismo bloque de script se agrupan. Si una animación es asincrónica, se coloca en un grupo independiente.

Introducción

Hay dos formas de abrir el Inspector de animación:

El Inspector de animación se abre junto a la herramienta Consola. Dado que el Inspector de animación es una herramienta de cajón, puedes usar el Inspector de animación desde cualquier panel DevTools.

Inspector de animación vacío

El Inspector de animación se agrupa en cuatro secciones principales (o panes). Esta guía hace referencia a cada panel de la siguiente manera:

Índice Panel Descripción
1 Controles Desde aquí, puedes borrar todos los grupos de animación capturados actualmente o cambiar la velocidad del grupo de animación seleccionado actualmente.
2 Introducción Elija un grupo de animación aquí para inspeccionarlo y modificarlo en el panel Detalles.
3 Línea de tiempo Pausa e inicia una animación desde aquí, o salta a un punto específico de la animación.
4 Detalles Inspeccione y modifique el grupo de animaciones seleccionado actualmente.

Inspector de animación anotado

Para capturar una animación, simplemente realiza la interacción que desencadena la animación mientras el Inspector de animación está abierto. Si se desencadena una animación al cargar la página, actualice la página con el Inspector de animación abierto para detectar la animación.

Inspeccionar animaciones

Después de capturar una animación, hay varias maneras de reproducirla:

  • Mantenga el mouse en la miniatura del panel Información general para ver una vista previa de ella.
  • Elija el grupo de animación en el panel Información **** general (para que se muestre en el panel Detalles) y elija el icono de reproducción ( icono de reproducción  ). La animación se reproduce en la ventanilla. Elige los iconos de velocidad de animación ( iconos de velocidad de animación ) para cambiar la velocidad de vista previa del grupo de  animaciones seleccionado actualmente. Puede usar la barra vertical roja para cambiar la posición actual.
  • Elija y arrastre la barra vertical roja para limpiar la animación de la ventanilla.

Ver detalles de animación

Después de capturar un grupo de animación, elige en él en el panel Información general para ver los detalles. En el panel Detalles, se asigna una fila a cada animación individual.

Detalles del grupo de animación

Mantenga el mouse sobre una animación para resaltarla en la ventanilla. Elija la animación para seleccionarla en la herramienta Elementos.

Mantenga el mouse sobre la animación para resaltarla en la ventanilla

La sección más izquierda y más oscura de una animación es la definición. La sección derecha más atenuada representa iteraciones. Por ejemplo, en la siguiente figura, las secciones dos y tres representan iteraciones de la sección uno.

Diagrama de iteraciones de animación

Si se aplica la misma animación a dos elementos, el Inspector de animación asigna el mismo color a los elementos. El color es aleatorio y no tiene importancia. Por ejemplo, en la siguiente figura, los dos elementos y tienen la misma animación div.cwccw.earlier div.cwccw.later ( spinrightleft ) aplicada, al igual que los elementos div.ccwcw.earlier div.ccwcw.later and.

Animaciones codificadas por colores

Modificar animaciones

Hay tres formas de modificar una animación con el Inspector de animación.

  • Duración de animación.
  • Intervalos de fotogramas clave.
  • Retraso de tiempo de inicio.

En la siguiente figura, se representa la animación original.

Animación original antes de la modificación

Para cambiar la duración de una animación, elija y arrastre el primer o último círculo.

Duración modificada

Si la animación define alguna regla de fotograma clave, estas se representan como círculos interiores blancos. Elija y arrastre uno de estos para cambiar el tiempo del fotograma clave.

Fotograma clave modificado

Para agregar un retraso a una animación, elige y arrástrala en cualquier lugar excepto en los círculos.

Retraso modificado

Contactar al equipo de Microsoft Edge DevTools

Use las siguientes opciones para discutir las nuevas características y cambios de la publicación, o cualquier otro tema relacionado con DevTools.

  • Envíe sus comentarios con el icono Enviar comentarios o seleccione Alt + Shift + I \ (Windows, Linux ) o Option + Shift + I \ (MacOS ) en DevTools.
  • Tweet a @EdgeDevTools.
  • Enviar una sugerencia a la webque queremos.
  • Para archivar errores sobre este artículo, use la siguiente sección de comentarios .

El icono enviar comentarios en el DevTools de Microsoft Edge

Nota

Algunas partes de esta página son modificaciones basadas en el trabajo creado y compartido por Google y se usan según los términos descritos en la Licencia internacional de Creative Commons Attribution 4.0.
La página original se encuentra aquí y está redactada por Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).

Licencia de Creative Commons
Este trabajo dispone de licencia conforme a Licencia internacional de Creative Commons Attribution 4.0.