Ferramentas E Tutoriais

Como criar animações de carregamento personalizadas para diminuir as taxas de rejeição

Originalmente conhecido como throbber, uma animação de carregamento é usada para indicar o progresso da coleta de dados ou renderização da interface. Embora antes você pudesse usar uma barra de progresso maçante para indicar isso, aqueles dias acabaram.

Hoje, uma animação bem elaborada aproveitando CSS, jQuery ou GIFs animados simples é uma oportunidade de dar vida às suas interfaces e adicionar personalidade ao seu produto.

Animações bem pensadas podem entreter seus usuários enquanto eles esperam o carregamento de seu conteúdo. Uma boa animação de carregamento ajuda a gerenciar as expectativas e melhora a experiência do usuário, mantendo o interesse.

Neste tutorial, usaremos Sketch para criar formas básicas e Principle para criar rapidamente animações de carregamento simples e personalizadas. (Ambos os aplicativos são para Mac.) Você aprenderá a criar as animações coloridas de carregamento usadas pelo Trello, Flickr, Slack e muito mais.

Vamos lá.

Animação do Slack Loading

No Sketch, trace quatro quadrados arredondados com lados de 50px ou um raio de 100px cada. Eles devem se parecer com círculos perfeitos, mas estamos usando quadrados com cantos arredondados para criar o efeito de alongamento de linha na animação.

Posicione as quatro formas de forma a criar um quadrado imaginário com 150px de espaço entre cada lado. Aplique quatro cores diferentes (# 35BA90 verde, # 69CADD azul, # EBA900 amarelo e # E20661 rosa).

Importe as formas para o Principle, agrupe-as e clique em “Criar Componente” para aninhar o grupo.

Vá para dentro do grupo aninhado e gire a prancheta em 15 graus. Em seguida, selecione cada círculo individual e gire-o de volta à sua posição original (15 graus para trás). Isso cria o efeito de alongamento em linha reta.

Aplique um gatilho “Automático” à prancheta e, em seguida, estique cada retângulo arredondado para o lado oposto da prancheta em um comprimento de 295 px. Dê 75% de opacidade a cada forma em ambas as pranchetas.

Aplique outro gatilho “Automático” à segunda prancheta. Na nova prancheta, reduza cada linha à largura original de 50 px, mas no lado oposto de sua posição original.

Vincule a última prancheta à primeira com um gatilho “Automático”. Clique no botão “Voltar ao Pai” para visualizar o resultado final.

Dica: ao ir “Voltar ao Pai”, você pode girar o grupo principal em -30 graus para ficar mais parecido com o Slack. Além disso, você pode alterar o ritmo da animação dentro do painel “Animar” e aplicar o efeito “Facilitar ambos” para suavizar as transições.

Trello carregando animação

Usando o Sketch, trace um quadrado azul de 100px. Desenhe um retângulo branco de 60 px de largura por 140 px de altura. Alinhe-o com a parte superior esquerda do quadrado anterior com uma margem superior e esquerda de 30 px. Duplique esse retângulo branco, alinhe-o à direita do quadrado com uma margem direita de 30px e reduza sua altura para 70px.

Importe a prancheta para o Principle e aplique o gatilho “Auto” para criar um novo quadro-chave. No novo quadro de arte, inverta as alturas dos retângulos brancos (faça o retângulo esquerdo 70px de altura e o retângulo direito 140px). Aplique um efeito “Ease-Both” no painel “Animate” para suavizar a transição.

Rolling Circle

Desenhe um círculo no Sketch. Aplique uma borda de 10px com os valores “Dash” e “Gap” e sem preenchimento. Use uma cor 'Gradiente angular' para a borda que acentuará o efeito de rotação que você criará posteriormente.

Abra um novo arquivo Principle e use o botão “Import” para transferir o círculo do Sketch. Aplique dois gatilhos “Auto” seguidos.

Para criar o efeito de rotação, selecione o círculo na prancheta do meio e altere seu valor de 'Ângulo' para 360 graus. Em seguida, selecione o terceiro círculo e dê a ele um nome diferente (ou seja, 'copiar') dentro do painel esquerdo. Isso simulará a rotação infinita.

Por fim, vincule de volta a terceira prancheta à inicial com outro gatilho “Automático”. Aplique uma transição “Linear” à linha do tempo entre as pranchetas 1 e 2. Verifique a animação que você acabou de criar na janela de visualização.

Flickr carregando animação

Trace um círculo azul e um círculo rosa lado a lado. Importe-os para o Principle e aplique um gatilho “Auto” para criar uma nova prancheta.

Inverta as posições dos círculos e aplique um novo gatilho 'Automático' para criar uma terceira prancheta. Nessa nova prancheta, inverta a ordem da camada dos círculos no painel esquerdo.

Aplique um terceiro gatilho “Automático” para criar uma quarta prancheta. Na última prancheta, inverta a posição dos círculos mais uma vez e aplique um acionador “Automático” final da última prancheta de volta ao inicial.

Tipo de carregamento

Crie um novo projeto no Principle e, usando a ferramenta Texto, escreva “CARREGANDO”. Alinhe o texto à esquerda e centralize-o verticalmente na prancheta.

Aplique um gatilho “Auto” cinco vezes seguidas. Faça com que o quinto gatilho da última prancheta volte para a prancheta inicial.

Começando na prancheta inicial e movendo para a direita, edite o texto em cada prancheta para adicionar zero, um, dois, três, dois e um pontos, respectivamente, ao lado do texto “CARREGANDO” original. A progressão das pranchetas deve ser semelhante a esta:

LOADING LOADING. LOADING .. LOADING ... LOADING .. LOADING.

Agora você pode visualizar a animação que acabou de criar.

Pontos Pulsantes

Trace um ponto de 60px. Copie e cole mais um ponto e coloque-o 60px à direita. Certifique-se de que ambos os pontos, incluindo a lacuna de 60px, estejam perfeitamente centralizados em sua prancheta.

Aplique um gatilho “Auto” quatro vezes seguidas.

Na segunda prancheta, reduza o segundo ponto para 30 px.

Na terceira prancheta, reduza o segundo ponto para 0 px e o primeiro para 30 px.

Na quarta prancheta, dimensione o segundo ponto de volta para 30 px e reduza o primeiro ponto para 0 px.

Na quinta prancheta, dimensione o primeiro ponto para 30px e vincule a prancheta à primeira prancha com um gatilho “Automático”.

Rolling Dots

Coloque cinco pontos no arranjo que você encontraria em um dado de seis lados. Importe a prancheta para o Principle e centralize-a.

Aplique um gatilho “Auto” na prancheta.

Na nova prancheta, gire o grupo de pontos em 360 graus.

Vincule a segunda prancheta à primeira com um gatilho “Automático”.

Círculo Pulsante

Comece com um círculo de 50 px alinhado ao centro dentro de um círculo de 150 px que tem uma borda de 5 px, mas sem preenchimento.

Aplique um gatilho “Auto” três vezes seguidas.

Na primeira prancheta, dimensione o círculo da linha para 50px e o círculo interno para 10px.

Na terceira prancheta, dimensione o círculo da linha em até 200 px e dê a ele 0% de opacidade. Dimensione o círculo interno até 150px e dê 50% de opacidade.

Na última prancheta, dimensione o círculo interno em até 200 px e dê a ele 0% de opacidade. Dimensione o círculo da linha para 50 px e dê 25% de opacidade.

Aplique um gatilho “Auto” à última prancheta. Reduza o círculo interno para 10px com 50% de opacidade.

Vincule a última prancheta à primeira com um gatilho “Automático”.

Pontos de salto

Alinhe três círculos perfeitos de 50 px de altura com 50 px de espaçamento entre eles.

Aplique um gatilho “Auto”. Na segunda prancheta, mova o primeiro círculo para cima em 50px.

Aplique um gatilho “Auto” à segunda placa. Na terceira prancheta, selecione os dois primeiros círculos e mova-os para cima 50px. Os três círculos devem estar em uma linha diagonal.

Aplique um gatilho “Auto” à terceira placa. Na quarta prancheta, mova o primeiro círculo para baixo 50px. Selecione os dois últimos círculos e mova-os para cima 50px.

Aplique um gatilho “Auto” na quarta placa. Na quinta prancheta, mova os primeiros dois círculos 50px para baixo. Selecione o último círculo e mova-o para cima 50px.

Aplique um gatilho “Auto” na quinta placa. Na sexta prancheta, mova os dois últimos círculos para baixo 50px.

Finalmente, volte para a primeira prancheta, mova o primeiro ponto 50px para cima e vincule a última prancheta à primeira com um gatilho “Automático”. Você pode visualizar o resultado final.

Carregador Clássico

Trace um círculo no Sketch e dê a ele uma borda cinza de 20 px sem preenchimento.

Cole uma cópia do mesmo círculo em cima dele e altere o preenchimento da cópia para uma cor diferente. Para este exemplo, usaremos azul.

Trace um quadrado sobreposto a um quarto do círculo azul. Mova a camada retângulo abaixo da camada do círculo e aplique 'Máscara' à camada do retângulo.

Mova para Principle e importe a arte Sketch com o botão “Import”.

Aplique um gatilho “Automático” à primeira prancheta e gire o círculo azul 360 graus.

Aplique um segundo gatilho “Automático” à segunda prancheta. Renomeie a terceira camada de círculo gerada para “copiar” e vincule-a de volta à primeira prancheta com um gatilho “Automático”.

Conclusão

Depois de praticar a criação de algumas dessas animações de carregamento testadas e comprovadas, você deve se sentir confiante em suas habilidades para criar uma animação única para seus próprios aplicativos usando as habilidades aprendidas aqui.

Com um pouco de imaginação e as ferramentas úteis encontradas em Sketch and Principle, você pode criar uma animação de carregamento exclusiva que corresponda ao design de seu aplicativo em questão de minutos. Seus usuários apreciarão a aparência profissional e o indicador amigável de que seu aplicativo está trabalhando duro.

• • •