Máscara Animaciones

6 min read

Crear efectos profesionales revelando usando máscaras animadas. Máscaras clip content y puede animar a revelar elementos con el tiempo - perfecto para secuencias de título, transiciones y efectos cinematográficos.

Animaciones de máscaras disponibles

Animación Efecto Mejor
Wipe Up/Down El contenido revela desde arriba o abajo Títulos de texto, citas
Izquierda/derecha Revelación horizontal Transiciones, revela
Iris Circle se expande desde el centro Revelaciones dramáticas, enfoque
Iris Out Círculo encoge al centro Fade outs, transitions
Star Mask La forma estrella revela contenido Revelaciones juguetonas
Máscara de corazón Forma cardíaca revela contenido San Valentín, temas románticos
Curtain Abre del centro Efectos de estadio/teater
Esposa diagonal Revelación enraizada Transiciones dinámicas
Cinetic Letterbox bars animate Film-style intros

Usando plantillas de máscaras

La forma más fácil de usar animaciones de máscaras es a través de plantillas:

  1. Abrir el panel Templates (Haz clic en la pestaña Plantillas o pulsa T)
  2. Filtro por Categoría: Masking
  3. Haga clic en una plantilla para verla
  4. Haga clic en Use Plantilla para aplicarla

Plantillas de Masking disponibles

Plantilla Descripción
Revelación de texto Las líneas se deslizan una por una
Revelación de texto Las líneas se deslizan hacia abajo
Espejo horizontal Toallitas de contenido de la izquierda
Iris Reveal El círculo se expande para revelar
Star Mask La forma de estrella revela
Máscara de corazón La forma del corazón revela
Esposa diagonal Transición enraizada
Cinematic Intro Buzón de carta de estilo cinematográfico

Cómo funcionan las animaciones de la máscara

Las máscaras animadas funcionan cortando contenido con una forma que cambia a lo largo del tiempo:

  1. Mask Shape - El límite del clip (rectángulo, círculo, estrella, corazón)
  2. Tipo de animación - Cómo se mueve la máscara (wipe, iris, escala)
  3. Timing - Hora de inicio, duración y alivio
  4. Dirección - ¿Cómo sucede la revelación

Parámetros de tiempo

  • Hora de inicio - Cuando la revelación comienza (en segundos)
  • Duración - ¿Cuánto dura la revelación
  • Easing - Curva de animación (linear, facilidadIn, easeOut, easeInOut)

Revelaciones de texto estancadas

Para el texto multilínea, escenifique los tiempos de inicio para un efecto de cascada:

Línea Hora de inicio Efecto
Línea 1 0.2s Primero revelaciones
Línea 2 0.35s Revela segundo
Línea 3 0.5s Revela tercero

Esto crea el clásico “revelación línea por línea” visto en gráficos de movimiento profesional.

Combinación con otros efectos

Las animaciones de máscara funcionan bien con:

  • Animaciones de claves - Mover elementos mientras que revelan
  • Animaciones simples - Añadir pulso o desvanecimiento después de revelar
  • Generadores de fondo - Contenido de reverencia sobre los fondos animados

Máscara de imagen (estático)

Para la forma estática enmascarando las imágenes:

  1. Seleccione una imagen importada
  2. En el Panel de Propiedades, haga clic en Mask
  3. Elige una forma (círculo, estrella, corazón, hexágono, etc.)
  4. Ajuste el tamaño y la posición de la máscara
  5. Haga clic en Apply Mask

Esto crea un cultivo permanente a la forma (no animado).

Consejos para los mejores resultados

  1. Keep revela breve - 0.4-0.8 segundos funciona mejor
  2. Use easyOut - Se siente más natural para las revelaciones
  3. Stagger consistentemente - 0.1-0.2 entre líneas
  4. Conseguir su contenido - Usar el iris para el dramático, limpiar para el profesional
  5. Avance a toda velocidad Tiempo de prueba se siente bien

Modos de máscara

Controla cómo la forma de la máscara interactúa con tu contenido:

Modo Efecto Caso de uso
Clip (por defecto) Contenido visible sólo en forma de máscara Revelaciones estándar, encuadre
Subtract Contenido visible en todas partes excepto en forma de máscara Efectos de corte, agujeros
Intersect Contenido visible sólo donde se superpone la máscara Efectos del diagrama de veneno

Para cambiar el modo de máscara:

  1. Seleccione el elemento enmascarado
  2. En el panel Propiedades, encontrar el modo máscara desplegable
  3. Elija Clip, Subtract, o Intersect

Mask Stacking

Aplica múltiples máscaras a un solo elemento para efectos complejos de enmascaramiento:

  1. Aplicar una máscara inicial (por ejemplo, círculo)
  2. Añadir una segunda capa de máscara con un modo diferente:
    • Añadir - Unidades ambas formas de máscara (visible en ambos)
    • Sutracto - Corta la segunda forma de la primera
    • Intersect - Sólo el área de superposición es visible

Ejemplo: Círculo con corte de estrellas

  1. Aplicar una máscara circle (modo clip)
  2. Añadir una capa de máscara star (modo subtracto)
  3. Resultado: marco circular con un agujero en forma de estrella en el centro
Multiple masks stacked Máscaras
Multiple combinadas: una máscara de círculo con una estrella restringida

Puedes apilar tantas capas de máscara como sea necesario. Eliminar capas individuales sin afectar a otros.

Animación de Vertex

Animar la forma de la máscara por morder sus vértices entre dos estados:

  1. Defina la forma de máscara de inicio (posiciones de versión)
  2. Definir la forma de máscara final ( posiciones de vertido)
  3. La máscara morphs suavemente entre formas durante la reproducción

Esto crea transiciones de máscaras orgánicas que van más allá de la escala simple y animaciones de posición.

Mask modes comparison
El mismo artículo con modos Clip, Subtract y Máscara Intersect

Notas técnicas

  • Las máscaras usan grupos de clipped Paper.js internamente
  • Máscaras (estrella, corazón) desde el centro
  • Las máscaras rectángulos cambian las dimensiones para los efectos de la toallita
  • Las máscaras se reconstruyen cuando se cargan plantillas
  • Para el control programático completo, consulte la documentación API para applyCustomMask()

Related: Animations Silencio Keyframe Editor Silencio Plantillas