Recorte de Trazado

Producto

✍️

Nota

Ten en cuenta que Phase recibe pequeñas actualizaciones y mejoras constantemente. Nuestros tutoriales podrían ser un poco diferentes de la versión actual de la aplicación.

El Recorte de Trazado es una técnica efectiva para agregar un sentido más profundo de movimiento a gráficos en movimiento y animaciones basadas en vectores. Permite animar el recorte o dibujo de un trazo a lo largo de un camino con el tiempo, creando la ilusión de movimiento o transformación. Esta técnica permite revelar u ocultar porciones específicas de una forma o línea, resultando en efectos visuales dinámicos.

Creación de Recortes de Trazado

Abrir el Menú de Recorte de Trazado

Dibuja la forma a la que se aplicará el efecto de Recorte de Trazado. Esto puede ser un rectángulo simple, un círculo o una trayectoria vectorial personalizada.
Haz clic en el símbolo junto a Efectos en el Panel de Propiedades para acceder a la función de Recorte de Trazado. Esta acción revelará la caja de herramientas de Recorte de Trazado.
Mueve el cabezal de reproducción al punto de inicio deseado. Normalmente, sería 0s.
Ajusta el inicio y el final del Recorte de Trazado al 100%.
Mueve el cabezal de reproducción al punto final deseado.
Ajusta el inicio del Recorte de Trazado al 0% y el final al 100%. Con un recorte del 0%, la línea se volverá visible.
Presiona reproducir.

✍️

Nota

Ten cuidado al usar relleno con animaciones con recorte de trazo especialmente en casos complejos o con ciertas formas. Dependiendo del diseño o la animación, pueden ocurrir efectos visuales inesperados.

Por ejemplo, si el relleno no está alineado correctamente con la animación con recorte de trazo, podrían aparecer cambios no deseados en el color o inconsistencias en la apariencia de la forma. Además, si la animación con recorte de trazo implica borrar el camino, el color de relleno podría borrarse junto con el camino, llevando a efectos de desaparición no intencionados.

Siempre prueba a fondo cualquier animación para asegurar que el relleno se comporte como se espera durante toda la animación con recorte de trazo

Por defecto, las formas comienzan en 0% y terminan en 100%, pero estos valores se pueden ajustar para cambiar las posiciones de los puntos de Inicio y Fin del recorte. Configurar ambos puntos en 100% recortará completamente el camino, haciéndolo invisible en el lienzo. Por otro lado, configurar ambos puntos en 0% hará que la línea sea invisible.

Desfase del Movimiento

Creando Animación de Pac-Man Usando Desfase

En los pasos anteriores, pudimos crear una animación similar a Pac-Man configurando el desfase del movimiento y los fotogramas. Esto nos permitió crear patrones repetitivos intrincados, perfectos para efectos dinámicos como movimientos de apertura y cierre. Comenzamos con un desfase de 20%, un punto de inicio de 10% y mantuvimos el punto final en 100%. Luego, para cada fotograma sucesivo, animamos de 20% a 100%, repitiendo esta secuencia varias veces sin cambiar el valor del offset.

Para los principiantes, la propiedad de desfase en un recorte de trazo se refiere al punto a lo largo del camino donde comienza la animación. Permite controlar la posición de inicio de la animación de recorte a lo largo del trazado. La animación recorte de trazo comienza en este punto de desfase y luego progresa a lo largo del camino a medida que avanza la animación.

Establecer el desfase al 0% hace que el recorte comience justo al principio de la forma. En términos más simples, la parte visible del trazo comienza desde el punto de inicio de la forma. Cuando se incrementa el valor del desfase, se mueve el punto de inicio del recorte a lo largo del camino. Por lo tanto, si el desfase se establece en 50%, el recorte comenzará a mitad del camino, mostrando solo la segunda mitad de la forma.

Tipos de Recorte de Trazo

Mostrando la Diferencia Entre Modos de Recorte de Trazado

Los tipos de recorte de trazo son opciones o configuraciones que controlan cómo se comporta una animación Trim Path al revelar o borrar un camino con el tiempo. Estos modos determinan cómo cambian los puntos de inicio y final de la animación a medida que avanza.

Para aplicar un recorte de trazo, agrupa todas las formas en un contenedor y aplica el recorte de trazado al contenedor. Para cambiar entre modos, usa el menú desplegable.

Hay dos modos principales de Recorte de Trazado:

Simultáneamente

En este modo, tanto los puntos de inicio como los de final de la animación de Recorte de Trazado se mueven juntos a lo largo del trazado. A medida que avanza la animación, la porción visible del trazado comienza y termina en diferentes posiciones, creando un efecto de revelado o borrado sincronizado. Este modo se usa cuando se desea que la animación descubra o borre uniformemente todo el trazado a la misma velocidad.

Individualmente

En este modo, tenemos control independiente sobre los puntos de inicio y final de la animación de Recorte de Trazado. A medida que avanza la animación, podemos ajustar de manera independiente dónde comienza y dónde termina el trazado. Esto proporciona mayor flexibilidad y creatividad en cómo se revela o borra el trazado. Podemos crear efectos como dibujar el trazado de un lado a otro o borrarlo en un patrón único.