Zero Block: Animação passo a passo
Como configurar uma animação complexa em Zero Block
Tutorial em vídeo
Animação passo a passo
Assista a este tutorial em vídeo sobre a criação de animação passo a passo em Zero Block ou leia um guia detalhado de como fazer abaixo.
Há dois modos de animação em Zero Block:
1) A animação básica é uma animação simples. São efeitos prontos e mais comumente usados, como o efeito de aparência (por meio de opacidade, de baixo para cima, da direita para a esquerda etc.), paralaxe e fixação. Esses efeitos são suficientes em 90% dos casos.
Guia para animação básica →
2) A animação passo a passo permite que você transforme ideias brilhantes e criativas em realidade - da maneira que desejar.
Confira diferentes exemplos do que você pode conseguir usando a animação passo a passo.
1) A animação básica é uma animação simples. São efeitos prontos e mais comumente usados, como o efeito de aparência (por meio de opacidade, de baixo para cima, da direita para a esquerda etc.), paralaxe e fixação. Esses efeitos são suficientes em 90% dos casos.
Guia para animação básica →
2) A animação passo a passo permite que você transforme ideias brilhantes e criativas em realidade - da maneira que desejar.
Confira diferentes exemplos do que você pode conseguir usando a animação passo a passo.
Primeiros passos com animação passo a passo
A ferramenta de animação passo a passo está disponível em Zero Block, um editor da Web destinado a designers profissionais. Adicione um Zero Block à página selecionando-o na Biblioteca de blocos (logo abaixo da categoria "Outros") ou clique em Zero Block na parte inferior da página.
Clique em Edit Block (Editar bloco) no canto superior esquerdo do site Zero Block para personalizá-lo.
Adicione um novo elemento, selecione-o, abra o painel Settings (Configurações), role para baixo até a seção "Step by Step Animation" (Animação passo a passo) e clique em Add (Adicionar).
Adicione um novo elemento, selecione-o, abra o painel Settings (Configurações), role para baixo até a seção "Step by Step Animation" (Animação passo a passo) e clique em Add (Adicionar).
A criação de uma animação passo a passo para um elemento cancelará todas as configurações de Animação básica para esse elemento.
Como selecionar um evento para iniciar uma animação
Comece a criar uma animação passo a passo selecionando um evento - uma condição para que a animação comece a ser reproduzida. Há cinco condições para escolher:
- Element on Screen (Elemento na tela) - uma animação começa a ser reproduzida assim que um determinado elemento aparece na tela;
- Block on Screen (Bloco na tela) - uma animação começa a ser reproduzida quando um bloco inteiro aparece na tela;
- On Scroll (Na rolagem) - uma animação começa a ser reproduzida e continua a ser reproduzida durante a rolagem;
- On Hover - uma animação começa a ser reproduzida ao passar o mouse;
- On Click (Ao clicar) - uma animação começa a ser reproduzida ao clicar.
O ponto de início da animação tem três opções adicionais: Start Trigger, Loop e Trigger Offset.
- O Start Trigger é uma área ou objeto que iniciará sua animação. Escolha entre três áreas: na parte superior da janela, no centro da janela ou na parte inferior da janela;
- Trigger Offset é o deslocamento do ponto de início da animação para a parte superior da janela, o centro da janela ou a parte inferior da janela selecionada;
- Loop é usado para configurar uma animação para ser reproduzida em loop.
Você pode testar uma animação ou um elemento selecionado ou todos os elementos do bloco clicando em Play Element ou Play All.
Como adicionar etapas de animação
A primeira etapa foi definida por padrão. Ela é chamada de Início. Adicione etapas e altere as propriedades do elemento em cada etapa. Isso fará com que o elemento seja alterado.
Para adicionar uma etapa, clique em Add step (Adicionar etapa).
Para adicionar uma etapa, clique em Add step (Adicionar etapa).
Você pode alternar entre as etapas. A borda de um elemento que fica azul significa que o elemento está em sua posição original, enquanto a borda do elemento que fica verde significa que a etapa está sendo editada.
Para alterar a posição original de um elemento, por exemplo, para torná-lo invisível na inicialização (opacidade-0%), adicione a primeira etapa e defina a opacidade como 0% e a duração como 0 segundos.
Cada etapa tem um conjunto de propriedades, como Duration, Move, Scale, Opacity, Rotate, Easing e Delay.
Duration é a duração de uma animação em segundos.
Move são as coordenadas para as quais o elemento é movido em relação à sua posição original. Para configurá-las, você pode atribuir valores ou mover o elemento.
Scale (Escala ) é o grau de aumento ou diminuição do elemento até o final da etapa.
Opacity (Opacidade ) é o valor da transparência do elemento até o final da etapa.
Rotate (Girar ) é a rotação de um elemento em graus até o final da etapa.
Easing (Facilidade) é a opção de escolher um efeito de animação: Linear (execução de animação linear); easeIn, easeOut, easeInOut (desaceleração no início, no final ou em ambos, no início e no final da animação); bounceFin (um pequeno salto de um elemento no final da animação).
Delay é a duração de uma pausa antes de uma animação começar a ser reproduzida.
Duration é a duração de uma animação em segundos.
Move são as coordenadas para as quais o elemento é movido em relação à sua posição original. Para configurá-las, você pode atribuir valores ou mover o elemento.
Scale (Escala ) é o grau de aumento ou diminuição do elemento até o final da etapa.
Opacity (Opacidade ) é o valor da transparência do elemento até o final da etapa.
Rotate (Girar ) é a rotação de um elemento em graus até o final da etapa.
Easing (Facilidade) é a opção de escolher um efeito de animação: Linear (execução de animação linear); easeIn, easeOut, easeInOut (desaceleração no início, no final ou em ambos, no início e no final da animação); bounceFin (um pequeno salto de um elemento no final da animação).
Delay é a duração de uma pausa antes de uma animação começar a ser reproduzida.
Criar uma animação é adicionar etapas e alterar as propriedades do elemento em cada etapa.
O exemplo de uma animação em duas etapas
Vamos dar uma olhada em como mover esse quadrado amarelo 550 px para a direita, reduzi-lo enquanto estiver em movimento e retornar à sua posição original.
Aqui está um guia passo a passo com nossos comentários abaixo:
Verifique como sua animação funciona no navegador
Além dos botões "Play Element" e "Play All", você também pode visualizar a animação.
Abra duas guias no navegador: Zero Block e a mesma página no modo de visualização.
Assim, quando você clicar em Save (Salvar) em Zero Block, verá as alterações na página de visualização depois de atualizá-la.
Abra duas guias no navegador: Zero Block e a mesma página no modo de visualização.
Assim, quando você clicar em Save (Salvar) em Zero Block, verá as alterações na página de visualização depois de atualizá-la.
Os exemplos de animação passo a passo:
Clique para visualizar a página e assistir à animação.
Clique para visualizar a página e assistir à animação.
Clique para visualizar a página e assistir à animação.
Revisão dos recursos básicos.
Trabalhar com contêineres e criar elementos fluidos.
Uma lista de todos os atalhos de teclado para acelerar seu trabalho.
Noções básicas de animação: fixação, paralaxe e efeitos interativos.
Uma ferramenta de animação avançada: princípios básicos, configurações e exemplos.
