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
Contenido de la página:
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.
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 . 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.
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
de la herramienta de trayectoria de movimiento
, 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
de la herramienta de trayectoria de movimiento
- Si selecciona la herramienta de trayectoria de movimiento
- 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
de la herramienta de trayectoria de movimiento
- 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 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
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.
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.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.
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 , 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.
|
| 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.
|
| Optimizar curva | Haga clic en el botón |
| 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
transformde 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.