Diferente baseado na linha do tempo animações, que contam histórias em uma sequência de eventos, ou interação animações que são acionadas quando alguém toca em algo, animações ambientais são o tipo de movimentos passivos que você pode não notar a princípio. Mas eles fazem um design parecer vivo de maneiras sutis.
Em uma animação ambiente, os elementos podem fazer uma transição sutil entre as cores, mover-se lentamente ou mudar gradualmente de posição. Os elementos podem aparecer e desaparecer, mudar de tamanho ou girar lentamente.
As animações ambientais não são intrusivas; eles não exigem atenção, não distraem e não interferem no que alguém está tentando alcançar ao usar um produto ou site. Eles também podem ser brincalhões, fazendo alguém sorrir ao avistá-los. Dessa forma, animações ambientais adicionar profundidade à personalidade de uma marca.
Para ilustrar o conceito de animações ambientais, recriei a capa de um Desenhe Rápido McGraw história em quadrinhos (PDF) como uma animação CSS/SVG. A história em quadrinhos foi publicada pela Charlton Comics em 1971 e, ao serem impressas, esses personagens não se moviam, tornando-os candidatos ideais para serem transformados em animações ambientais.
Para sua informação: O artista da capa original Ray Dirgo era mais conhecido por seu trabalho desenhando personagens de Hanna-Barbera para a Charlton Comics durante a década de 1970. Ray faleceu em 2000, aos 92 anos. Ele sobreviveu à Charlton Comics, que faliu em 1986, e a DC Comics adquiriu seus personagens.
Dica: você pode visualizar o código completo da animação ambiente no CodePen.
Escolhendo elementos para animar
Nem tudo em uma página ou gráfico precisa ser movido, e parte do design de uma animação ambiente é sabendo quando parar. O truque é escolher elementos que se prestem naturalmente a movimentos sutis, em vez de forçar o movimento em lugares onde ele não pertence.
Dicas de movimento natural
Quando estou decidindo o que animar, procuro sinais de movimento natural e penso em quando algo se moveria naturalmente no mundo real. Eu me pergunto: “Essa coisa tem peso?”, “É flexível?”e “Isso se moveria na vida real?” Se a resposta for “sim,” provavelmente parecerá certo se se mover. Existem vários sinais de movimento na arte da capa de Ray Dirgo.
Por exemplo, o cachimbo da paz Quick Draw tem duas penas penduradas nele. Eles balançam ligeiramente para a esquerda e para a direita três graus à medida que o tubo se move, assim como fariam as penas reais.
#quick-draw-pipe {
animation: quick-draw-pipe-rotate 6s ease-in-out infinite alternate;
}
@keyframes quick-draw-pipe-rotate {
0% { transform: rotate(3deg); }
100% { transform: rotate(-3deg); }
}
#quick-draw-feather-1 {
animation: quick-draw-feather-1-rotate 3s ease-in-out infinite alternate;
}
#quick-draw-feather-2 {
animation: quick-draw-feather-2-rotate 3s ease-in-out infinite alternate;
}
@keyframes quick-draw-feather-1-rotate {
0% { transform: rotate(3deg); }
100% { transform: rotate(-3deg); }
}
@keyframes quick-draw-feather-2-rotate {
0% { transform: rotate(-3deg); }
100% { transform: rotate(3deg); }
}
Atmosfera, não ação
Costumo escolher elementos ou detalhes decorativos que contribuem para o clima, mas não brigam por atenção.
Aqui, o chefe sobe e desce lenta e sutilmente enquanto fuma seu cachimbo.
#chief {
animation: chief-rise-fall 3s ease-in-out infinite alternate;
}
@keyframes chief-group-rise-fall {
0% { transform: translateY(0); }
100% { transform: translateY(-20px); }
}
Para efeito adicional, a pena em sua cabeça também se move no ritmo de sua ascensão e queda:
#chief-feather-1 {
animation: chief-feather-1-rotate 3s ease-in-out infinite alternate;
}
#chief-feather-2 {
animation: chief-feather-2-rotate 3s ease-in-out infinite alternate;
}
@keyframes chief-feather-1-rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(-9deg); }
}
@keyframes chief-feather-2-rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(9deg); }
}
Brincadeira e diversão
Uma das coisas que mais adoro nas animações ambientais é como elas trazem diversão ao design. Eles são uma oportunidade para demonstrar personalidade através de detalhes lúdicos que fazem as pessoas sorrirem ao notá-los.
Dê uma olhada mais de perto no chefe e você poderá ver suas sobrancelhas se erguendo e seus olhos cruzados enquanto ele dá uma tragada forte em seu cachimbo. As sobrancelhas do Quick Draw também saltam em intervalos que parecem aleatórios.
#quick-draw-eyebrow {
animation: quick-draw-eyebrow-raise 5s ease-in-out infinite;
}
@keyframes quick-draw-eyebrow-raise {
0%, 20%, 60%, 100% { transform: translateY(0); }
10%, 50%, 80% { transform: translateY(-10px); }
}
Mantenha a hierarquia em mente
O movimento chama a atenção e mesmo os movimentos sutis têm um peso visual. Portanto, reservo as animações mais óbvias para os elementos que preciso para criar o maior impacto.
Fumar seu cachimbo claramente tem um grande efeito no Quick Draw McGraw, então, para demonstrar isso, juntei seus elementos – incluindo seu cachimbo e suas penas – em um novo grupo SVG e então fiz aquela oscilação.
#quick-draw-group {
animation: quick-draw-group-wobble 6s ease-in-out infinite;
}
@keyframes quick-draw-group-wobble {
0% { transform: rotate(0deg); }
15% { transform: rotate(2deg); }
30% { transform: rotate(-2deg); }
45% { transform: rotate(1deg); }
60% { transform: rotate(-1deg); }
75% { transform: rotate(0.5deg); }
100% { transform: rotate(0deg); }
}
Então, para enfatizar esse movimento, espelhei esses valores para oscilar sua sombra:
#quick-draw-shadow {
animation: quick-draw-shadow-wobble 6s ease-in-out infinite;
}
@keyframes quick-draw-shadow-wobble {
0% { transform: rotate(0deg); }
15% { transform: rotate(-2deg); }
30% { transform: rotate(2deg); }
45% { transform: rotate(-1deg); }
60% { transform: rotate(1deg); }
75% { transform: rotate(-0.5deg); }
100% { transform: rotate(0deg); }
}
Aplicar restrição
Só porque algo pode ser animado não significa que deva ser. Ao criar uma animação ambiente, estudo a imagem e observo os elementos onde o movimento sutil pode adicionar vida. Tenho em mente as perguntas: “Qual é a história que estou contando? Onde o movimento ajuda e quando pode se tornar uma distração?”
Lembre-se de que a contenção não significa apenas fazer menos; trata-se de fazer as coisas certas com menos frequência.
Camadas de SVGs para exportação
Em “Smashing Animations Parte 4: Otimizando SVGs”, escrevi sobre o processo no qual confio para “preparar, otimizar e estruturar SVGs para animação.” Quando os elementos são amontoados em um único arquivo SVG, pode ser um pesadelo navegar por eles. Localizar um caminho ou grupo específico pode ser como procurar uma agulha num palheiro.
É por isso que desenvolvo meus SVGs em camadas, exportando e otimizando um conjunto de elementos por vez — sempre na ordem em que aparecerão no arquivo final. Isso me permite construir o SVG mestre gradualmente, colando-o em cada seção limpa.
Começo exportando elementos de plano de fundo, otimizando-os, adicionando atributos de classe e ID e colando seu código em meu arquivo SVG.
Em seguida, exporto elementos que muitas vezes permanecem estáticos ou se movem em grupos, como o chefe e o Quick Draw McGraw.
Antes de finalmente exportar, nomear e adicionar detalhes, como o cachimbo, os olhos e os brilhos do Quick Draw.
Como exporto cada camada da prancheta do mesmo tamanho, não preciso me preocupar com problemas de alinhamento ou posicionamento, pois todas elas se encaixam automaticamente.
Implementando animações ambientais
Você não precisa de uma estrutura ou biblioteca de animação para adicionar animações de ambiente a um projeto. Na maioria das vezes, tudo que você precisa é de um SVG bem preparado e de um CSS bem elaborado.
Mas, vamos começar com o SVG. A chave é agrupar os elementos logicamente e fornecer-lhes atributos significativos de classe ou ID, que atuam como ganchos de animação no CSS. Para esta animação, dei a cada parte móvel seu próprio identificador, como #quick-draw-tail ou #chief-smoke-2. Dessa forma, eu poderia atingir exatamente o que precisava sem vasculhar o DOM como um guaxinim em uma lata de lixo.
Depois que o SVG estiver configurado, o CSS fará a maior parte do trabalho. eu posso usar @keyframes para movimentos mais expressivos, ou animation-delay para simular aleatoriedade e escalonar tempos. O truque é manter tudo sutil e lembrar que não estou animando para chamar a atenção, estou animando para criar atmosfera.
Lembre-se de que a maioria das animações ambientais se repetem continuamente, portanto devem ser leve e amigável ao desempenho. E, claro, é uma boa prática respeitar os usuários que solicitaram menos movimento. Você pode envolver suas animações em um @media prefers-reduced-motion consulta para que eles só sejam executados quando forem bem-vindos.
@media (prefers-reduced-motion: no-preference) {
#quick-draw-shadow {
animation: quick-draw-shadow-wobble 6s ease-in-out infinite;
}
}
É um pequeno toque fácil de implementar e que torna seus designs mais inclusivos.
Princípios de Design de Animação Ambiental
Se você deseja que suas animações pareçam ambientais, mais parecidas com atmosfera do que com ação, é útil seguir alguns princípios. Estas não são regras rígidas e rápidas, mas sim coisas que aprendi enquanto animava fumaça, brilhos, olhos e sobrancelhas.
Mantenha as animações lentas e suaves
As animações ambientais devem ser relaxadas, então use durações mais longas e escolha suavizando curvas que parecem orgânicas. Eu costumo usar ease-in-outmas as curvas cúbicas de Bézier também podem ser úteis quando você deseja uma sensação mais relaxada e o tipo de movimentos que você pode encontrar na natureza.
Faça um loop perfeito e evite mudanças abruptas
Reinicializações bruscas ou saltos repentinos podem arruinar o clima, portanto, se uma animação entrar em loop, certifique-se de que ela funcione sem problemas. Você pode fazer isso por quadros-chave iniciais e finais correspondentesou definindo o animation-direction para alternate o valor para que a animação seja reproduzida para frente e depois para trás.
Use camadas para criar complexidade
Uma única animação pode ser chata. Cinco animações sutis, cada uma em camadas separadas, podem parecer ricas e vivas. Pense nisso como construir uma mixagem de som – você quer variação no ritmo, tom e tempo. Na minha animação, brilhos brilham em intervalos variados, a fumaça sobe, as penas balançam e os olhos se arregalam. Nada domina e cada movimento desempenha um pequeno papel na cena.
Evite distrações
O objetivo de uma animação ambiente é que ela não domine. É um elemento de fundo e não um apelo à ação. Se os olhos de alguém forem atraídos por uma sobrancelha levantada, provavelmente é demais, então diminua a animação até parecer algo que você só perceberia se estivesse realmente olhando.
Considere acessibilidade e desempenho
Verificar prefers-reduced-motione não presuma que o dispositivo de todos pode lidar com animações complexas. SVG e CSS são leves, mas coisas como filtros de desfoque e sombras projetadas e animações CSS complexas ainda podem sobrecarregar dispositivos de menor potência. Quando uma animação for puramente decorativa, considere adicionar aria-hidden="true" para evitar que ele atrapalhe a árvore de acessibilidade.
Rápido no sorteio
A animação ambiente é como o tempero de um excelente prato. É a pitada de sal que você mal percebe, mas que sentiria falta quando ela acabasse. Não grita, sussurra. Não leva, permanece. É fumaça flutuante, penas balançando e brilhos que você percebe com o canto do olho. E quando bem feito, a animação ambiente adiciona personalidade a um design sem pedir aplausos.
Agora percebo que nem todo mundo precisa animar personagens de desenhos animados. Então, na segunda parte, compartilharei como criei animações para vários projetos recentes de clientes. Até a próxima vez, se você estiver criando uma ilustração ou trabalhando com SVG, pergunte-se: O que aconteceria se isso fosse real? Então anime apenas isso. Torne-o lento e suave. Mantenha-o em ambiente.
Você pode visualizar o código completo da animação ambiente no CodePen.
