Zero Block: Animação passo a passo
Como configurar uma animação complexa no Zero Block
Vídeo tutorial
Animação passo a passo
Assista a este tutorial em vídeo sobre como criar animação passo a passo em Zero Block ou leia um guia de instruções detalhado abaixo.
Há dois modos de animação no Zero Block:
1) Basic Animation é uma animação simples. Estes são efeitos prontos, mais comumente usados, como o efeito de aparência (através de opacidade, de baixo para cima, da direita para a esquerda, etc.), paralaxe e fixação. Estes são suficientes em 90% dos casos.
Guia de → de animação básica
2) A animação passo a passo permite que você torne ideias brilhantes e criativas uma realidade — da maneira que você quiser.
Confira diferentes exemplos do que você pode alcançar usando a animação passo a passo.
1) Basic Animation é uma animação simples. Estes são efeitos prontos, mais comumente usados, como o efeito de aparência (através de opacidade, de baixo para cima, da direita para a esquerda, etc.), paralaxe e fixação. Estes são suficientes em 90% dos casos.
Guia de → de animação básica
2) A animação passo a passo permite que você torne ideias brilhantes e criativas uma realidade — da maneira que você quiser.
Confira diferentes exemplos do que você pode alcançar usando a animação passo a passo.
Introdução à animação passo a passo
A ferramenta de animação passo-a-passo está disponível no Zero Block, um editor web voltado para 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 Editar bloco no canto superior esquerdo do Zero Block para personalizá-lo.
Adicione um novo elemento, selecione-o, abra o painel Configurações, role para baixo até a seção "Animação passo a passo" e clique em Adicionar.
Adicione um novo elemento, selecione-o, abra o painel Configurações, role para baixo até a seção "Animação passo a passo" e clique em Adicionar.
A criação de uma animação passo a passo para um elemento cancelará todas as configurações básicas de animação para esse elemento.
Como selecionar um evento para lançar 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. Existem cinco condições para escolher:
- Elemento na tela — uma animação começa a ser reproduzida assim que um elemento específico aparece na tela;
- Bloquear na tela — uma animação começa a ser reproduzida quando um bloco inteiro aparece na tela;
- Em Rolagem—uma animação começa a ser reproduzida e continua a ser reproduzida durante a rolagem;
- Em Pairar — uma animação começa a ser reproduzida ao pairar;
- Em Click—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.
- Start Trigger é uma área ou coisa 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;
- Deslocamento do acionador é o deslocamento do ponto inicial da animação para a parte superior da janela, centro da janela ou parte inferior da janela selecionada;
- Loop é usado para configurar uma animação para reproduzir em loop.
Você pode testar uma animação ou um elemento selecionado ou todos os elementos do bloco clicando em Reproduzir elemento ou Reproduzir tudo.
Como adicionar etapas de animação
A primeira etapa foi definida por padrão. Chama-se Iniciar. Adicione etapas e altere as propriedades do elemento em cada etapa. Isso fará com que o elemento mude.
Para adicionar uma etapa, clique em Adicionar etapa.
Para adicionar uma etapa, clique em Adicionar etapa.
Você pode alternar entre as etapas. A borda de um elemento ficando azul significa que o elemento está em sua posição original, enquanto a borda do elemento ficando verde significa que a etapa está sendo editada.
Para alterar a posição original de um elemento, por exemplo, para torná-lo invisível no lançamento (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 Duração, Mover, Escala, Opacidade, Girar, Facilitar e Atrasar.
Duração é a duração de uma animação em segundos.
Mover são as coordenadas onde o elemento é movido em relação à sua posição original. Para configurá-los, você pode atribuir valores ou mover o elemento.
Escala é o grau de aumento ou diminuição do elemento até o final da etapa.
Opacidade é o valor da transparência do elemento no final da etapa.
Girar é a rotação de um elemento em graus em direção ao final do passo.
Flexibilização é a opção para 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).
Atraso é a duração de uma pausa antes que uma animação comece a ser reproduzida.
Duração é a duração de uma animação em segundos.
Mover são as coordenadas onde o elemento é movido em relação à sua posição original. Para configurá-los, você pode atribuir valores ou mover o elemento.
Escala é o grau de aumento ou diminuição do elemento até o final da etapa.
Opacidade é o valor da transparência do elemento no final da etapa.
Girar é a rotação de um elemento em graus em direção ao final do passo.
Flexibilização é a opção para 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).
Atraso é a duração de uma pausa antes que uma animação comece a ser reproduzida.
Criar uma animação é adicionar etapas e alterar as propriedades do elemento a cada etapa.
O exemplo de uma animação em duas etapas
Vamos dar uma olhada em como mover este quadrado amarelo 550px para a direita, reduzi-lo durante o 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 sua animação.
Abra duas guias no navegador: Zero Block e a mesma página no modo de visualização.
Então, quando você clicar em Salvar no Zero Block, você verá alterações na página de visualização depois de atualizá-lo.
Abra duas guias no navegador: Zero Block e a mesma página no modo de visualização.
Então, quando você clicar em Salvar no Zero Block, você verá alterações na página de visualização depois de atualizá-lo.
Os exemplos de animação passo a passo:
Clique para visualizar a página e assistir a animação.
Clique para visualizar a página e assistir a animação.
Clique para visualizar a página e assistir a animação.
Revendo recursos básicos.
Trabalhando com containers e criando elementos fluidos.
Uma lista de todos os atalhos de teclado para acelerar o 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.
