Animações de Máscara
Crie efeitos profissionais revelar usando máscaras animadas. Máscaras clip conteúdo e pode animar para revelar itens ao longo do tempo - perfeito para sequências de título, transições e efeitos cinematográficos.
Animações de Máscara disponíveis
| Animação | Efeito | Melhor para |
|---|---|---|
| Limpar/Descer | Conteúdo revela de cima ou de baixo | Títulos de texto, aspas |
| Limpa para a esquerda/direita | Revelação horizontal | Transições, revela |
| Íris | Círculo expande do centro | Dramática revela, foco |
| Íris Fora | Círculo encolhe para o centro | Desvanecer, transições |
| Máscara Estrela | Forma de estrela revela conteúdo | Brincalhão revela |
| Máscara do Coração | Forma do coração revela conteúdo | Valentine, temas românticos |
| Cortina | Abre do centro | Efeitos de palco/teatro |
| Toalha Diagonal | Ângulo revelador | Transições dinâmicas |
| Cinematográfico | Animar as barras da caixa de cartas | Introduções de estilo cinematográfico |
Usar Modelos de Máscara
A maneira mais fácil de usar animações máscara é através de modelos:
- Abra o Painel **Templates (clique na aba Modelos ou pressione
T) - Filtro por Categoria: Mascaramento
- Clique em um modelo para visualizá-lo
- Clique em Use o Modelo para aplicá-lo
Modelos de Mascaramento Disponíveis
| Modelo | Designação das mercadorias |
|---|---|
| Texto Revelar | As linhas deslizam um por um |
| Revelar texto para baixo | As linhas descem |
| Limpeza Horizontal | Toalhas de conteúdo à esquerda |
| Iris Revelar | Círculo expande para revelar |
| Máscara Estrela | A forma das estrelas revela |
| Máscara do Coração | Forma do coração revela |
| Toalha Diagonal | Transição angular |
| Introdução cinematográfica | Caixa de correio de estilo filme |
Como as animações da máscara funcionam
Máscaras animadas funcionam cortando conteúdo com uma forma que muda ao longo do tempo:
- Forma de Máscara - O limite do clipe (rectângulo, círculo, estrela, coração)
- Tipo de animação - Como a máscara se move (wipe, íris, escala)
- Timing - Tempo de início, duração e facilidade
- Direção - Por onde acontece a revelação
Parâmetros de Tempo
- Start Time - Quando a revelação começa (em segundos)
- Duração - Quanto tempo leva a revelação
- Fácil - Curva de animação (linear, easyIn, easyOut, easyInOut)
Revela texto esboçado
Para o texto multi-linha, escalone as horas de início para um efeito em cascata:
| Linha | Hora de início | Efeito |
|---|---|---|
| Linha 1 | 0.2s | Revela primeiro |
| Linha 2 | 0.35s | Revela segundo |
| Linha 3 | 0.5s | Revela terceiro |
Isso cria o clássico “line-by-line revel” visto em gráficos de movimento profissional.
Combinando com outros efeitos
Animações de máscara funcionam bem com:
- Animações de keyframe - Mover itens enquanto eles revelam
- Simples animations - Adicionar pulso ou desaparecer após revelar
- Geradores de fundo - Revelar conteúdo sobre fundos animados
Máscara de Imagem (Estatica)
Para mascaramento de formas estáticas nas imagens:
- Selecione uma imagem importada
- No Painel de Propriedades, clique em Mask
- Escolha uma forma (círculo, estrela, coração, hexágono, etc.)
- Ajuste o tamanho e a posição da máscara
- Clique em Aplicar máscara
Isto cria uma colheita permanente para a forma (não animado).
Dicas para os melhores resultados
- Keep revela curto - 0,4-0,8 segundos funciona melhor
- Use easyOut - Parece mais natural para revelações
- Stagger consistentemente - 0,1-0,2s entre linhas
- Combine o seu conteúdo - Use íris para dramática, limpe para profissional
- Preview a toda a velocidade O tempo do teste parece certo
Modos de Máscara
Controle como a forma da máscara interage com seu conteúdo:
| Modo | Efeito | Caso de Uso |
|---|---|---|
| Clip (padrão) | Conteúdo visível apenas dentro da máscara | Padrão revela, enquadrando |
| Subtrair | Conteúdo visível em todo lugar * exceto* dentro da máscara | Efeitos de corte, furos |
| Intersect | Conteúdo visível apenas quando a máscara se sobrepõe | Efeitos do diagrama de Venn |
Para alterar o modo máscara:
- Selecione o item mascarado
- No painel Propriedades, encontre o modo máscara dropdown
- Escolha Clip, Subtrair, ou Intersect
Empilhamento de Máscara
Aplicar várias máscaras a um único item para efeitos de mascaramento complexos:
- Aplicar uma máscara inicial (por exemplo, círculo)
- Adicionar uma segunda camada de máscara com um modo diferente:
- Adicionar - Unir ambas as formas de máscara (visível em qualquer uma delas)
- Subtrato - Corta a segunda forma do primeiro
- Intersect - Apenas a área sobreposta é visível
Exemplo: Círculo com recorte de estrela
- Aplicar um círculo ** máscara (modo clip)
- Adicionar uma camada de máscara star (modo subtrair)
- Resultado: moldura circular com um buraco em forma de estrela no centro
Máscaras múltiplas Você pode empilhar tantas camadas de máscara quanto necessário. Remova as camadas individuais sem afetar outras.
Animação Vertex
Animar a própria forma da máscara, transformando seus vértices entre dois estados:
- Definir a forma da máscara inicial (posições vertex)
- Definir a forma da máscara final (posições vertex)
- A máscara se transforma suavemente entre formas durante a reprodução
Isso cria transições orgânicas, fluindo máscaras que vão além de animações de escala simples e posição.
Notas técnicas
- Máscaras usam grupos cortados Paper.js internamente
- Máscaras baseadas em escala (estrela, coração) escala do centro
- Máscaras de retângulo mudam dimensões para os efeitos de limpeza
- As máscaras são reconstruídas ao carregar modelos
- Para controle programático completo, consulte a documentação API para
applyCustomMask()
Relacionados: Animações