✍️
Nota
Atenção! O Phase recebe pequenas atualizações e melhorias o tempo todo. Nossos tutoriais podem ser ligeiramente diferentes do aplicativo atual.
Animação
Traga vida aos designs com as ferramentas de animação simples, mas poderosas, do Phase! Tudo o que você precisa fazer é entrar no Modo Animar, ir para um ponto na linha do tempo e editar. O Phase cuidará do resto.
Modo Animar
Mudando para o Modo Animar
Pressione o botão Animar
na parte inferior da tela para começar. Alternativamente, ative ou desative o Modo Animar pressionando o botão .
na parte inferior da tela para começar. Alternativamente, ative ou desative o Modo Animar pressionando o botão A
No Modo Animar, alguns ícones adicionais aparecem ao lado do controle deslizante Animar:
- Reproduzir/Pausar
: O controle básico para reprodução de vídeo. Ou use para iniciar e parar.Espaço - Loop
: A animação reiniciará quando chegar ao fim. - Velocidade de reprodução
: Clique para alternar entre x0.25, x0.5, x1.0, x1.25, x1.5 e x2.0.
Embora os ícones sejam importantes, a maior mudança no Modo Animar é que o painel da Linha do Tempo aparece na parte inferior da tela. O fluxo de trabalho típico de animação no Phase usa extensivamente a Linha do Tempo, então aqui está uma visão geral básica.
Interface da Linha do Tempo
Ao criar uma animação do zero, a linha do tempo estará vazia, com exceção de uma linha vertical branca. Esse é o cursor de reprodução, o marcador de tempo para a animação. Ele pode ser arrastado ou movido para um tempo específico digitando no campo acima da parte mais à esquerda da linha do tempo.
Por outro lado, quando uma Lottie é importada, vários formatos de diamante aparecerão na linha do tempo. Estes são keyframes, os pontos onde as camadas mudam na animação. Se uma camada tiver keyframes definidos, ela aparecerá em um novo painel de camadas no lado esquerdo da linha do tempo.
Cada keyframe representa um ponto em que pelo menos uma propriedade foi ajustada. Aninhadas em cada camada estão todas as propriedades que foram alteradas. As camadas podem ser expandidas para revelar uma lista de todas as propriedades que possuem keyframes.
✍️
Nota
Se não houver keyframes em 0 segundos, as propriedades nesse momento serão as mesmas de quando o Modo Animar estiver desativado.
A maior parte do trabalho na criação de uma animação envolve a definição de keyframes, então vamos direto ao assunto.
Criando Keyframes
Adicionar keyframes no Phase é tão intuitivo quanto construir o design estático. A única diferença é que antes de fazer qualquer alteração, o cursor de reprodução precisa ser movido para o momento desejado em que a alteração deve ocorrer.
Existem dois métodos para criar keyframes, listados abaixo.
Método A: Criando Keyframes ao Alterar Propriedades
Criando Keyframes Automaticamente ao Ajustar a Posição dos Elementos
- Mova o cursor de reprodução para um ponto na linha do tempo.
- Selecione um elemento e mova-o ou altere qualquer uma de suas propriedades.
- O Phase cria automaticamente um keyframe com as novas configurações.
O Método A é o mesmo que redesenhar ao longo do tempo. Não requer muitos cliques, então pode ser mais fácil de usar. No entanto, há momentos em que será necessário criar keyframes manualmente.
Método B: Adicionando Keyframes Manualmente
Adicionando Keyframes Manualmente
- Mova o cursor de reprodução para um ponto na linha do tempo.
- Passe o mouse sobre qualquer propriedade. Um indicador de keyframe em forma de diamante aparecerá.
- Clique no ícone.
- O Phase cria um keyframe naquele momento, mesmo que nenhuma propriedade tenha sido alterada.
O Método B é mais útil ao atrasar uma animação. Por exemplo, se uma animação deve permanecer a mesma de 0 segundos até um ponto posterior, crie um keyframe que mantenha essa propriedade ao longo do tempo. Isso pode funcionar como um novo primeiro keyframe, mesmo que não esteja no início da animação.
Ajustes de Keyframe
Snap para Keyframe
Sempre que clicamos em um keyframe, o cursor de reprodução se ajusta automaticamente a ele. Existem outras maneiras de selecionar e modificar nossos keyframes:
- Arraste o keyframe para movê-lo ao longo da linha do tempo, alterando o tempo da animação.
- Altere qualquer parâmetro no momento do keyframe para atualizar a animação naquele momento.
- Pressione para remover keyframes.ou⌫ BackspaceDelete
- Selecione um keyframe, mude para um momento posterior e pressione ouCommand ⌘Cpara copiá-lo.CtrlC
Ao clicar com o botão direito em um keyframe, o Phase apresentará as seguintes opções:
- Duplicar para o Tempo Atual: Cria uma cópia do keyframe no tempo atual. A duplicação só terá efeito se o cursor de reprodução estiver definido para um tempo diferente do que o keyframe está atualmente. Por exemplo: para criar um novo keyframe baseado em um no segundo 1, defina o tempo para um pouco depois (como 1,2 segundos) antes de duplicar. Pressionar ouCommand ⌘Dtambém duplicará keyframes.CtrlD
- Redefinir para o Valor Inicial: Altera a propriedade do keyframe selecionado para ser igual ao valor quando o Modo Animar está desativado. Isso é útil para criar animações em loop.
- Excluir Keyframe: Remove o keyframe. A animação é recalculada como se não estivesse lá, incluindo a conexão dos keyframes em ambos os lados do que foi removido.
No lado direito da linha do tempo, ao clicar em um keyframe, é possível visualizar as configurações de Easing. Estas permitem ajustar a aceleração e suavidade da animação.
Interpolação
Interpolação de Forma em 2 Segundos
Quando animamos, keyframes podem ser definidos em vários intervalos para decidir como a animação ficará nesses pontos no tempo. Entre cada keyframe, a Phase calcula automaticamente a animação por meio de um processo chamado interpolação.
Aqui temos uma animação simples. Em 0 segundos, não há keyframe. O desenho padrão de um círculo amarelo é usado então. Então, na marca de 1 segundo, a animação é definida como um diamante vermelho. A animação também está configurada para girar 180 graus nesse ponto.
Entre 0 e 1 segundos, não há keyframe. No entanto, a Phase faz a estimativa da posição da borda e das cores de preenchimento entre cada ponto. Portanto, olhando para a forma entre 0 segundos e 1 segundo, ela aparecerá como uma espécie de quadrado arredondado com preenchimento laranja.
📖
Read More
A Phase é capaz de criar interpolações elaboradas que podem acelerar ou desacelerar gradualmente. Este processo é denominado Easing, ao qual dedicamos um artigo separado.
Começar a animar
Comece com nossa plataforma gratuita baseada na Web.
Aprender
Recursos
© Phase Software GmbH 2024