✍️
Nota
Atenção! A Phase recebe pequenas atualizações e melhorias o tempo todo. Nossos tutoriais podem ser ligeiramente diferentes do aplicativo atual.
Corte do Caminho
O corte do caminho é uma técnica eficaz para adicionar uma sensação mais profunda de movimento a gráficos em movimento e animações baseadas em vetores. Permite animar o recorte ou desenho de um traço ao longo de um caminho através do tempo, criando a ilusão de movimento ou transformação. Esta técnica permite que partes específicas de uma forma ou linha sejam reveladas ou ocultadas, resultando em efeitos visuais dinâmicos.
Criando Cortes de Caminho
Abrindo o Menu de Corte do Caminho
- Desenhe a forma à qual o efeito Corte do Caminho deve ser aplicado. Pode ser um retângulo simples, um círculo ou um caminho vetorial personalizado.
- Clique no
símbolo próximo a Efeitos no Painel de Propriedades para acessar o recurso Corte do Caminho. Esta ação revelará a caixa de ferramentas do Corte do Caminho. - Mova o cursor de reprodução para o ponto inicial desejado. Normalmente, isso seria 0s.
- Defina o início e o fim do Corte do Caminho para 100%.
- Mova o cursor de reprodução para o ponto final desejado.
- Defina o início do Corte do Caminho como 0% e o final como 100%. Com um corte de 0%, a linha ficará visível.
- Pressione play.
✍️
Nota
Tenha cuidado ao usar o preenchimento com animações de Corte do Caminho, especialmente em animações complexas ou com determinadas formas. Dependendo do design ou da animação, podem ocorrer efeitos visuais inesperados.
Por exemplo, se o preenchimento não estiver alinhado corretamente com a animação de Corte do Caminho, poderão ocorrer alterações indesejadas na cor ou inconsistências na aparência da forma. Além disso, se a animação Corte do Caminho envolver o apagamento do caminho, a cor de preenchimento também poderá ser apagada, causando efeitos de desaparecimento não intencionais.
Sempre teste minuciosamente qualquer animação para garantir que o preenchimento se comporte conforme o esperado em toda a animação de Corte do Caminho.
Por padrão, as formas começam em 0% e terminam em 100%, mas esses valores podem ser ajustados para alterar as posições dos pontos inicial e final do corte. Definir ambos os pontos em 100% cortará completamente o caminho, tornando-o invisível na tela. Por outro lado, definir ambos os pontos em 0% tornará a linha invisível.
Deslocamento
Criando Animação do Pac-Man Usando Deslocamento
Em nossas etapas anteriores, conseguimos criar uma animação semelhante ao Pac-Man configurando o deslocamento e os keyframes. Isso nos permitiu criar padrões de repetição complexos, perfeitos para efeitos dinâmicos como movimentos de abertura e fechamento. Começamos com um deslocamento de 20%, um ponto inicial de 10% e mantivemos o ponto final em 100%. Então, para cada keyframe sucessivo, animamos de 20% a 100%, repetindo essa sequência várias vezes sem alterar o valor do deslocamento.
Para os não iniciados, a propriedade Deslocamento em um Corte do Caminho refere-se ao ponto ao longo do caminho onde a animação começa. Permite controlar a posição inicial da animação de Corte ao longo do caminho. A animação de Corte do Caminho começa neste ponto de deslocamento e depois avança ao longo do caminho à medida que a animação prossegue.
Definir o deslocamento como 0% faz com que o Corte do Caminho comece logo no início da forma. Em termos mais simples, a parte visível do caminho começa no ponto inicial da forma. Quando o valor do deslocamento é aumentado, ele move o ponto inicial do corte ao longo do caminho. Portanto, se o deslocamento estiver definido como 50%, o corte começará na metade do caminho, mostrando apenas a segunda metade da forma.
Modos de Corte do Caminho
Mostrando a Diferença Entre os Modos de Corte do Caminho
Os modos de Corte do Caminho são opções ou configurações que controlam como uma animação desse tipo se comporta ao revelar ou apagar um caminho ao longo do tempo. Esses modos determinam como os pontos inicial e final da animação mudam à medida que ela avança.
Para aplicar um Corte de Caminho, agrupe todas as formas em um container e aplique o Corte de Caminho ao contêiner. Para alternar entre os modos, use o menu suspenso.
Existem dois modos principais de Corte de Caminho: Simultâneo e Individual.
Simultâneo
Neste modo, os pontos inicial e final da animação de Corte de Caminho se movem juntos ao longo do caminho. À medida que a animação avança, a parte visível do caminho começa e termina em posições diferentes, criando um efeito de revelação ou apagamento sincronizado. Este modo é usado quando queremos que a animação revele ou apague uniformemente todo o caminho na mesma taxa.
Individual
Neste modo, temos controle separado sobre os pontos inicial e final da animação de Corte de Caminho. À medida que a animação avança, podemos ajustar independentemente onde o caminho começa e onde termina. Isso proporciona maior flexibilidade e criatividade na forma como revelamos ou apagamos o caminho. Podemos criar efeitos como desenhar o caminho de um lado para o outro ou apagá-lo em um padrão único.
Começar a animar
Comece com nossa plataforma gratuita baseada na Web.
© Phase Software GmbH 2024