Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Animation
Webdesign

Adicionando Atração às Suas Animações na Web

by
Difficulty:IntermediateLength:LongLanguages:

Portuguese (Português) translation by Thays Dos Santos (you can also view the original English article)

Final product image
What You'll Be Creating

Quando falamos sobre usar animação, nós geralmente discutimos as maneiras práticas de criar transições, animações e assim por diante. Animação é uma maneira poderosa de fazer nossos designs se destacarem, mas ao invés de focar em como animações individuais funcionam, o jeito como múltiplas animações se combinam podem criar algo ainda mais poderoso.

Atração

Os 12 princípios básicos da animação da Disney define "Atração" como correspondente a "carisma em um ator" É como o realismo, estilo e substância da animação acrescentam para criar uma sensação de personagem que os espectadores achem real e interessante.

The Illusion of Life Disney Animation
A ilusão da Vida: Disney Animation em que os 12 princípios básicos da animação são baseados.

Esta é uma técnica utilizada para grande efeito pelo Stripe. Stripe é um processador de pagamentos, e provê ferramentas para embutir formulários de pagamentos em sites. Estes formulários são famosos por serem lindamente projetados, particularmente no uso da animação.

Neste artigo, eu vou discutir como múltiplas animações podem ser usadas para criar um efeito mais que a soma das partes, e mostrar como você pode usar este conhecimento na prática.

Cartão de Mídia Social

Neste exemplo, nós vamos usar animação para apresentar um cartão com detalhes e links para web e outras contas sociais.

Quando um botão é pressionado, irá fazer um cartão aparecer seguido de algumas opções. Ao invés de utilizar uma velha janela modal simples, nós vamos usar animação para torná-la mais interessante.

Para torná-la atrativa, existem várias animações ocorrendo. Os vários pedaços se animam e introduzem cada elemento em ordem. Isso ajuda o espectador a entender a conexão entre o que eles apertaram e o conteúdo, e a ordem das animações ajudam atrair o olhar para os ícones seguintes.

Preparando o HTML

Para começar, nós precisamos de um botão para pressionar e um cartão para mostrar. O cartão vai ser escondido quando o conteúdo é mostrado inicialmente.

O botão é uma imagem e algum texto. Quando pressionado, ele mostrará o cartão. O cartão é feito de quatro partes; um botão de fechar, uma seção de detalhes, foto de rosto e uma barra de ícones contendo ícones sociais. Para este exemplo, estamos usando ícones SVG no código, pegos da coleção Entype.

Estilizando

Antes de entrar nas animações, vamos adicionar um pouco de estilo no botão e no cartão. Primeiro, o botão.

Nota: nós adicionamos um outline:none; no elemento .show-card porque alguns navegadores adicionam um brilho peculiar aos estado de foco dos botões (o que nós não queremos):

Então, nós estilizamos o cartão e cada uma das seções nele.

Note que nós colocamos esta carta com display:none inicialmente. Nós iremos então controlar isto utilizando JavaScript.

O Básico Mostrar e Esconder

Ao invés de mergulhar no CSS, nós vamos primeiro configurar as ações básicas de mostrar e esconder as informações de contato. Isso fará uso de um pouco de JavaScript (e nesse caso, jQuery) para adicionar e remover classes dependendo do que é clicado.

Agora nós já devemos ser capazes de mostrar e esconder o cartão usando jQuery e a propriedade CSS display.

Veja o exemplo do mostrar e esconder básico aqui:

Antes de Animar

Com o layout no lugar, nós precisamos adicionar alguns estilos extras para esconder os vários elementos, e assim poderemos animar eles na tela.

Esses elementos vão ter um delay (pequeno atraso) antes da animação começar, então precisam estar fora de vista inicialmente.

Animações Básicas

Com o mecanismo no lugar para mostrar e esconder o cartão, nós começamos a colocar animações. O código JavaScript abaixo adiciona um estado show ao cartão que está sendo mostrado, e nós podemos acrescentar animações a esta classe, na qual nós introduzimos as partes individuais do cartão.

Para fazer isso, nós utilizamos a propriedade CSS animation e conjuntos de keyframes.

É útil criar animações com propósitos gerais no CSS e reutilizá-las. Animações simples, como fade in e fade out podem ser definidas uma vez e utilizadas em vários lugares.

Para mostrar como keyframes são definidos, vamos criar as animações de fade in e fade out.

Keyframes são uma série de passos, definidos como porcentagens. Eles podem ter qualquer número de passos, mas em nosso exemplo, nós vamos definir os keyframes do começo (0%) e do final (100%). No fade-in, nós começamos com nenhuma opacidade (0) e no final com total opacidade (1). A animação fade-out faz o oposto.

Nós podemos usar a propriedade animation para aplicar essas animações ao botão quando é mostrado e escondido.

A abreviação da propriedade de animação aqui diz para o cartão usar a animação fade-in, durando 0.4 segundos e com 1 segundo de delay. A animação irá tocar uma vez e parar ao final (forwards) e usa a função de tempo ease-out.

Quando a classe hide é aplicada ao botão, a animação fade-out faz efeito.

Função de Tempo do Efeito Saltitante

A primeira parte que vamos introduzir é a barra de ícones. Já que é aqui que os links estarão, nós queremos que isso se destaque e seja a primeira coisa que a pessoa nota.

Quando animamos, nós podemos criar efeitos interessantes utilizando a pripriedade timing function. Neste caso, nós amos usar uma função de tempo cubic-bezier para adicionar algum "ressalto" quando o ícone aparece.

Primeiro nós criamos alguns keyframes simples para ter a barra começando pequena e crescendo na altura.

Nós podemos agora aplicar esse conjunto de keyframes à barra de ícones quando a classe show é adicionada ao cartão.

O efeito saltitante é criado com o uso da função de tempo cubic-bezier. Funções de tempo descrevem a mudança na velocidade durante uma animação, e podem ser designadas para ultrapassar o começo ou o fim de uma animação. Essa animação vai um pouco além, depois corrige, criando um ressalto.

Delay da Animação

Com a barra de ícones introduzida, nós precisamos animar a seção que contém os detalhes e a foto de rosto. Nós gostaríamos que esta seção aparecesse depois que a barra de ícones fosse introduzida. Para alcançar isso, nós vamos usar a propriedade animation-delay.

A animação aplicada à seção details é ajustada para ter duração de 0.7 segundos e um delay de 0.5 segundos. Isso significa que a animação não vai começar até a barra de ícone ter sido introduzida.

Nós também usamos uma função de tempo cubic bezier aqui para dar algum ressalto.

Depois, nós definimos os keyframes para a animação deste container.

Os keyframes da animação show-detail-container começa com o container invisível com uma altura de zero, e anima para sua altura total. A função de tempo cubic bezier então faz a animação ultrapassar um pouco para dar um pouco de ressalto.

Combinando Múltiplas Animações

Múltiplas animações podem ser aplicadas em uma única propriedade. Contanto que as animações não conflitem uma com a outra (ao tentar animar a mesma propriedade), elas podem ser usadas para adicionar nuance em uma animação. Múltiplas animações são definidas assim como animações únicas, mas separadas por vírgulas.

Neste caso, nós vamos fazer surgir (fade-in) a imagem de rosto, nome e conteúdo da descrição, enquanto ao mesmo tempo, utilizando uma função pop-in, fazer com que pareça dar um zoom de uma certa distância.

Se nós tivéssemos usado apenas uma animação, com a função de tempo cubic bezier, o efeito de surgir pareceria "ressaltar" e ficaria estranho. Em vez disso, nós temos o fade utilizando uma função de tempo linear e o zoom com o efeito saltitante.

Primeiro nós definimos os keyframes do pop-in.

Isso utiliza a transformação scale para ter cada elemento começando pequeno e escalonando para seu tamanho normal.

Vamos trazer o conteúdo. Cada elemento tem duas animações, e cada um dos elementos tem um delay de animação ligeiramente mais longo para espaçar sua aparição.

Ícone de Fechar

A animação do ícone de fechar faz uso dos keyframes de fade-in que nós definimos anteriormente.

Chamadas para Ação

Nós só precisamos mostrar os ícones agora. Quando apresentamos animações, a última coisa animada é aonde a atenção do espectador irá terminar. Isso significa que os olhos do espectador irá seguir a animação e acabar olhando para os ícones que nós gostaríamos que ele selecionasse.

Nós vamos novamente fazer uso da propriedade de delay de animação para assegurar que eles sejam introduzidos por último. Primeiro nós definimos os keyframes de uma animação para os ícones:

Cada ícone irá roldar um pouco conforme vão surgindo. Nós podemos agora adicionar essa animação para cada um dos ícones, utilizando um delay em cada um para espaçá-los.

Coloque tudo isso junto e agora nós temos um cartão que aparece agradavelmente quando o botão é selecionado.

Mais Uma Coisa

Antes de terminár-mos, nós precisamos adicionar uma ação de hide para o botão fechar e animar o cartão saindo. Primeiro, vamos atualizar o JavaScript. Ao pressionar o ícone close, o JavaScript espera por um segundo antes de remover o cartão com display:none.

Isso nos dá um segundo para animar o cartão–nós o faremos cair na parte inferior da tela. Os keyframes que fazem isso são os seguintes:

Nós então aplicamos isso como uma animação para o cartão.

Demonstração

Colocando tudo isso junto, nós podemos ver o resultado aqui.

Uma Nota em Prefixos e Compatibilidade de Navegadores

Animações são bem suportadas entre os navegadores. Dependendo da sua audiência, elas devem funcionar na maioria das situações. Vale a pena conferir que as funções básicas de mostrar e esconder funcionam e qualquer animação é adicionada como uma melhoria progressiva.

Resumo

Através do uso de múltiplas animações, e particularmente da propriedade animation-delay, nós pegamos o que poderia ter sido um widget muito simples e o transformamos em algo mais atrativo. A animação guia o espectador através de cada elemento e direciona eles até as chamadas de ação.

Animação pode ser uma ótima maneira de comunicar nos seus designs. Essa comunicação ajuda os visitantes a entenderem sua intenção assim como melhora a credibilidade e a confiança na qualidade do seu trabalho.

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.