Acerca de las trayectorias de movimiento

Con las trayectorias de movimiento, puede animar objetos para que se muevan trazando curvas y formas complejas. El procedimiento para definir trayectorias de movimiento es parecido al que se utiliza para dibujar líneas con la herramienta de lápiz. Debe establecer puntos de origen, que se unirán con líneas rectas o curvas.

La animación con trayectorias de movimiento se hace por aproximación mediante CSS, por lo que es posible que los elementos animados no sigan sus respectivas trayectorias de movimiento de forma exacta. Generalmente, la diferencia es imperceptible (menos de un píxel, de forma predeterminada) y se puede limitar el grado de desviación en las propiedades de la trayectoria de movimiento.

Información sobre las trayectorias de movimiento

Ver trayectorias de movimiento

Seleccione un elemento o un grupo de elementos para ver las líneas que indican hacia dónde se moverá durante la animación, así como los puntos de origen.

example motion path

Solo es posible ver una trayectoria de movimiento cada vez.

Puntos de origen

Los puntos de origen se definen de dos formas:

  • Las miniaturas o los fotogramas clave que especifican una nueva posición x o y para el elemento generan los puntos de origen de forma automática. Los puntos de origen iniciales y finales siempre están en los fotogramas.
  • Puede añadir puntos de origen a lo largo de la trayectoria de movimiento mediante la herramienta Trayectoria de movimiento.

Controles de curvatura

Los controles de curvatura se muestran cuando se selecciona la herramienta de trayectoria de movimiento Motion path tool icon. Cada uno de los segmentos que hay entre los puntos de origen tiene dos controles de curvatura, uno junto a cada punto de origen. La longitud y la dirección de los puntos de dirección de control determinarán el grado de curvatura de la trayectoria de movimiento. En las líneas rectas, los puntos de dirección de control aparecen junto al segmento o están ocultos.

example motion path with control handles

Modificar trayectorias de movimiento

Modificar la forma de una trayectoria de movimiento

Las trayectorias de movimiento pueden ser curvas, formas cerradas (p. ej., polígonos o círculos) o contornos detallados de otros objetos. Para cambiar la forma de una trayectoria de movimiento, siga estos pasos:

Añadir un punto de origen

  • Añada una miniatura o un fotograma que modifique la posición del elemento. Se añadirá un punto de origen, donde podrá cambiar el easing.
  • Con la opción Añadir punto de origen Icon for the "Add anchor point" option for the Motion path tool de la herramienta de trayectoria de movimiento Motion path tool icon, puede hacer clic en un punto de la trayectoria de movimiento para añadir un punto de origen y fijar la trayectoria en él. Tenga en cuenta que, al usar este método, no se añade ninguna miniatura ni fotograma clave.

Ajustar el grado de curvatura

  • Si selecciona la herramienta de selección o la opción predeterminada default option icon for the Motion path tool de la herramienta de trayectoria de movimiento Motion path tool icon, puede arrastrar cualquier punto (incluidos los puntos de origen) para cambiar la forma de la trayectoria.
  • Si selecciona la herramienta de trayectoria de movimiento Motion path tool icon, puede arrastrar los controles de curvatura para cambiar su longitud y ángulo, lo que modificará la curvatura de la trayectoria de movimiento. Si se añade otro control de curvatura al mismo punto de origen, el otro control de curvatura ajustará automáticamente su ángulo para hacerlo coincidir con él, salvo si mantiene pulsada la tecla Alt.
  • Haga doble clic en un punto de origen para ocultar los controles de curvatura adjuntos. Si vuelve a hacer doble clic, se mostrarán los controles de curvatura.

    Para enderezar una trayectoria de movimiento, haga doble clic en los dos puntos de origen.

Eliminar un punto de origen

  • Con la opción Eliminar punto de origen Icon for the "Delete anchor point" option for the Motion path tool de la herramienta de trayectoria de movimiento Motion path tool icon, puede eliminar un punto de origen haciendo clic en él. Si elimina un punto de origen correspondiente a una miniatura o a un fotograma clave cuya única propiedad animada sea la trayectoria de movimiento, también se eliminará la miniatura o el fotograma clave.
  • Si elimina una miniatura o un fotograma, también se eliminará el segmento de la trayectoria de movimiento que finaliza en dicha miniatura o fotograma.

Transformar trayectorias de movimiento

Puede mover, cambiar de tamaño, dar la vuelta o girar las trayectorias de movimiento. Para ello, seleccione la herramienta de trayectoria de movimiento Motion path tool icon y, a continuación, marque la casilla Control de transformación en la barra de opciones de herramienta. Si tiene esta opción habilitada, cuando seleccione un elemento con una trayectoria de movimiento, se mostrarán los controles de transformación.

Mover una trayectoria de movimiento

Arrastre la trayectoria de movimiento a otra posición de la escena.

Modificar el tamaño de la trayectoria de movimiento

  • El cuadro de modificación de tamaño enmarca en azul el trazado de la trayectoria de movimiento, e incluye controles en cada esquina y en cada lado. Arrastre un control para modificar el tamaño de la trayectoria de movimiento.
  • Mantenga pulsada la tecla Mayús y arrastre el cursor para conservar la proporción original.
  • Mantenga pulsada la tecla Alt mientras arrastra el cursor para conservar la trayectoria de movimiento centrada en un mismo punto.
  • Puede cambiar el tamaño de la trayectoria de movimiento en otra dirección girando el cuadro de modificación de tamaño. Para ello, introduzca los grados de rotación en el campo motion path rotation field de la barra de opciones de la herramienta. También puede mantener pulsada la tecla Alt (en Windows) u Opción (en un Mac) y pulsar la tecla de flecha hacia la izquierda o derecha para girar el cuadro de modificación de tamaño unos 5°. El valor del campo siempre vuelve a 0°, por lo que debe introducir la rotación deseada desde la orientación actual. Si gira el cuadro de modificación de tamaño, no se cambiará la orientación de la trayectoria de movimiento.
  • Para recuperar la orientación del cuadro de modificación de tamaño, haga doble clic en el control de rotación interior (el anillo más pequeño). Con esto, también se recupera la ubicación del centro de rotación.

Cambiar la trayectoria de movimiento

  • Arrastre un control de modificación de tamaño por encima del control opuesto.

Girar la trayectoria de movimiento

  • Arrastre el control de rotación externo (el anillo más grande) en el sentido de las agujas del reloj o en el sentido opuesto para girar la trayectoria de movimiento.
  • Si mantiene pulsada la tecla Mayús mientras arrastra el cursor, se limitará la rotación a incrementos de 45°.
  • Para mover el centro rotación, arrastre el control de rotación interno (el anillo más pequeño) hasta otro punto. Para recuperar la ubicación del centro de rotación, haga doble clic en el control de rotación interno. Con esto, también se recupera la orientación del cuadro de modificación de tamaño.

Edición de la trayectoria de movimiento

Modificar la velocidad de la animación

Para controlar la velocidad de un objeto en su trayectoria de movimiento, modifique el tiempo de las miniaturas o los fotogramas y el easing entre ambos. También puede ejecutar en bucle una animación con trayectorias de movimiento.

Los puntos de origen añadidos con la herramienta de trayectoria de movimiento no modifican la velocidad de la animación. Para ello, deberá añadir una miniatura o un fotograma.

Optimización

Cada vez que crea o modifica una trayectoria de movimiento, Google Web Designer optimiza la animación de forma automática reduciendo el número de CSS utilizadas para mostrarla y teniendo en cuenta las tolerancias que haya especificado en las propiedades de la trayectoria de movimiento. Cuanto menor sea el número de tolerancias, más seguirá la animación la trayectoria de movimiento, pero menos posibilidades habrá de realizar la optimización.

Para aplicar una mayor compresión, haga clic en Optimizar curva Optimize curve button, en las propiedades de la trayectoria de movimiento. Este proceso puede ser más lento que la optimización automática.

Google Web Designer muestra el tamaño estimado de la trayectoria de movimiento correspondiente al elemento seleccionado en el panel Propiedades, lo que refleja el espacio de disco que ocupará la trayectoria de movimiento una vez publicado el documento.

Propiedades de la trayectoria de movimiento

Las propiedades de la trayectoria de movimiento se muestran en el panel Propiedades tras añadir un punto de origen con la herramienta trayectoria de movimiento o tras modificar la trayectoria de movimiento para que trace una curva.

Propiedad Descripción
Orientar hacia la trayectoria Cuando se habilita, durante la animación el elemento gira hacia la dirección de la trayectoria de movimiento (p. ej., mientras sigue la curva hacia abajo de una trayectoria de movimiento, el elemento se inclina hacia abajo). Puede controlar la precisión de la rotación con la propiedad Tolerancia de ángulo.
Tolerancia de posición Define la distancia máxima que el elemento puede desviarse de la trayectoria de movimiento.
  • Valor predeterminado: 0,5 píxeles
  • Valor mínimo: 0,1 píxel
  • Valor máximo: 100 píxeles
Tolerancia de ángulo Controla la diferencia que puede haber entre la orientación del elemento y la de la trayectoria de movimiento. Solo puede utilizarse si se ha habilitado la opción Orientar hacia la trayectoria.
  • Valor predeterminado: 1°
  • Valor mínimo: 1°
  • Valor máximo: 360°
Optimizar curva Haga clic en el botón Optimize curve button si quiere reducir el tamaño de la CSS que se utiliza para generar la animación con trayectoria de movimiento. Después de la optimización, el botón se inhabilita hasta que la trayectoria de movimiento cambia.
Tamaño estimado Muestra el tamaño estimado de la trayectoria de movimiento. Para aplicar una mayor compresión, utilice el botón Optimizar curva.

Limitaciones

  • Posición superior/izquierda: las trayectorias de movimiento no permiten determinar la posición con las coordenadas superior e izquierda. En su lugar, deberá utilizar la propiedad transform de CSS (opción predeterminada).
  • Animación 3D: Google Web Designer no es compatible con las trayectorias de movimiento 3D. Puede aplicar traslaciones 3D individualmente al elemento.
  • Panel CSS: el panel CSS no modifica las trayectorias de movimiento, aunque los estilos siguen aplicándose al elemento.
  • Vista de código: no es posible ver ni editar trayectorias de movimiento en la vista de código.
  • Anuncios de imagen: la herramienta de trayectoria de movimiento no se puede usar con los anuncios de imagen.
¿Te ha resultado útil esta información?
¿Cómo podemos mejorar esta página?

¿Necesitas más ayuda?

Inicia sesión si quieres ver otras opciones de asistencia para solucionar tu problema.

Búsqueda
Borrar búsqueda
Cerrar búsqueda
Aplicaciones de Google
Menú principal
Buscar en el Centro de ayuda
true
5050422
false