Caminos Trim

3 min read

Los caminos del Trim te permiten animar cuánto de un trazo es visible, creando efectos de “draw-on” donde las líneas parecen ser dibujadas en tiempo real. Esta es una de las técnicas más populares en gráficos en movimiento para revelar texto, ilustraciones y diagramas.

Path with partial trim visible
A camino con trimEnd fijado a 0.5, mostrando sólo la primera mitad del trazo

Cómo funciona

Cada camino tiene tres propiedades de trim:

Propiedad Rango Descripción
trimStart 0 - 1 Donde comienza la porción visible (0 = inicio de la ruta)
trimEnd 0 - 1 Donde la porción visible termina (1 = final de ruta)
trimOffset 0 - 1 Cambia la ventana visible a lo largo del camino

Cuando trimStart = 0 y trimEnd = 1, el camino completo es visible (por defecto). Cambiar estos valores revela o oculta porciones del derrame.

Efecto de Dibujo

El uso más común: un golpe que parece dibujarse.

  1. Crear un camino o forma con un golpe visible
  2. Añada la animación del marco clave:
    • En el momento 0: trimEnd = 0 (nada visible)
    • At time 2: trimEnd = 1 (fully drawn)
  3. Juega el cronograma para ver el camino dibujarse

Esto funciona especialmente bien con:

  • Texto interesante creado con el sistema de Fuentes Cursivas
  • Ilustraciones de mano hechas con la herramienta de dibujo
  • Conectores de diálogo para diagramas de flujo animados

Revelación parcial

Mostrar sólo una porción de un camino:

  • Establecer trimStart = 0.2 y trimEnd = 0.8 para mostrar el 60% medio
  • Animar ambos valores para ampliar o contraer la sección visible
  • Las porciones ocultas son completamente invisibles (no sólo transparentes)

Ventana deslizante

Crear un segmento que se mueve por el camino:

  1. Establece una ventana fija tamaño: trimStart = 0, trimEnd = 0.3
  2. Animate trimOffset de 0 a 1
  3. El segmento visible se desliza por toda la longitud de la ruta

Esto crea efectos como:

  • Indicadores de carga
  • Escaneando/trazando animaciones
  • Rastreo o efectos de la línea de progreso

Artículos compatibles

Los caminos del Trim funcionan con:

Tipo de artículo Notas
Senderos Líneas, curvas, dibujos de mano libre
Caminos compuestos Formas complejas con múltiples sub-patos
Grupos Aplica a todos los caminos dentro del grupo
Masked Groups Obras con elementos que tienen máscaras aplicadas

Tip: Para los mejores efectos con el texto, utilice el sistema Cursive Font. Crea sendas de texto de un solo paso que son ideales para la animación trim path.

Combinar con otras características

  • Keyframe Editor - Animate trim properties over time with custom elasing
  • Relaciones - Utilizar driven_by para vincular valores de borde a otras propiedades del elemento
  • Expresiones de tiempo - Use expresiones de matemáticas para crear patrones de borde complejos

Consejos

  1. Use easyOut para efectos desenrollados - da una desaceleración natural al final
  2. Herramientas visibles - Los caminos del Trim sólo afectan los caminos trazados, no llenan
  3. Verificar el ancho de la carrera - Los golpes delgados lucen mejor para las animaciones del sorteo
  4. Stagger múltiples caminos - Usar compensaciones de tiempo para dibujar caminos en secuencia
  5. Avance a toda velocidad - Las animaciones del Trim pueden sentirse diferentes a velocidad lenta vs. normal

Related: Keyframe Editor Silencio Font Studio Silencio Animations