Aparar Caminhos

3 min read

Trim caminhos permitem animar o quanto de um traço é visível, criando efeitos “draw-on” onde as linhas parecem ser desenhadas em tempo real. Esta é uma das técnicas mais populares em gráficos de movimento para revelar textos, ilustrações e diagramas.

Path with partial trim visible Caminho
A com apararFim definido para 0.5, mostrando apenas a primeira metade do curso

Como Funciona

Cada caminho tem três propriedades:

Propriedade Intervalo Designação das mercadorias
trimStart 0 - 1 Onde a porção visível começa (0 = início do caminho)
trimEnd 0 - 1 Onde termina a porção visível (1 = fim do caminho)
trimOffset 0 - 1 Muda a janela visível ao longo do caminho

Quando trimStart = 0 e trimEnd = 1, o caminho completo é visível (padrão). Alterar esses valores revela ou esconde porções do curso.

Efeito de Desenho

O uso mais comum: um traço que parece desenhar-se.

  1. Criar um caminho ou forma com um traço visível
  2. Adicionar animação do quadro de chaves:
    • No momento 0: trimEnd = 0 (nada visível)
    • No tempo 2: trimEnd = 1 (totalmente desenhado)
  3. Reproduzir a linha do tempo para ver o caminho em si

Isto funciona especialmente bem com:

  • Texto cursivo criado com o sistema de Fontes Cursivas
  • Ilustrações desenhadas à mão feitas com a ferramenta Desenho
  • Conectores Diagram para fluxogramas animados

Revelação Parcial

Mostrar apenas uma parte de um caminho:

  • Definir trimStart = 0.2 e trimEnd = 0.8 para mostrar os 60% médios
  • Animar ambos os valores para expandir ou contrair a secção visível
  • As porções ocultas são completamente invisíveis (não apenas transparentes)

Janela Deslizante

Criar um segmento que se move ao longo do caminho:

  1. Definir um tamanho de janela fixo: trimStart = 0, trimEnd = 0.3
  2. Animar trimOffset de 0 a 1
  3. O segmento visível desliza ao longo de todo o comprimento do caminho

Isto cria efeitos como:

  • Indicadores de carregamento
  • Digitalizar/rastrear animações
  • Efeitos da pista de corrida ou da linha de progresso

Itens Compatíveis

Trim caminhos trabalhar com:

Tipo de Item Notas
Caminhos Linhas, curvas, desenhos à mão livre
Caminhos Compostos Formas complexas com múltiplos sub- caminhos
Grupos Aplica-se a todos os caminhos dentro do grupo
Grupos Mascarados Funciona com itens que têm máscaras aplicadas

Dica: Para os melhores efeitos de draw-on com texto, use o sistema Cursive Font. Ele cria caminhos de texto de um único curso que são ideais para animação caminho de corte.

Combinando com outras características

  • Keyframe Editor - Animar propriedades de corte ao longo do tempo com a facilidade personalizada
  • Relações - Use o driven_by para vincular valores de corte a outras propriedades do item
  • Expressões de Tempo - Use expressões matemáticas para criar padrões complexos

Dicas

  1. Use easyOut para efeitos de desenho - dá uma desaceleração natural no final
  2. Mantenha traços visíveis - Trim caminhos só afetam caminhos marcados, não preenche
  3. Verificar a largura do traço - Os traços mais grossos parecem melhores para animações de desenho
  4. Stagger multiple roads - Use deslocamentos de tempo para desenhar caminhos em sequência
  5. Preview em velocidade máxima - Animações de corte podem se sentir diferentes em velocidade lenta vs. normal

Relacionado: Editor de Keyframe