Contente
A animação na web é particularmente matizada, pois temos que ajustar nosso trabalho para levar em consideração a largura de banda, a compatibilidade do código e o design do produto. Neste artigo, explicarei a configuração recomendada para uma animação escalonável verdadeiramente responsiva. Também cobrirei diferentes maneiras de trabalhar com a animação para obter experiências de usuário positivas e paridade em nosso mundo com vários dispositivos.
Abordarei uma seleção de casos de uso importantes: adicionar animação CSS a sprites SVG, lidar com gráficos autônomos que exigem movimentos complexos, criar uma experiência responsiva que se ajusta à janela de visualização e tornar as animações mais simples para dispositivos móveis.
Eu recomendo fortemente o uso de SVG (Scalable Vector Graphics) para gráficos com animações responsivas. Eles são independentes da resolução, então você não terá que carregar solicitações HTTP adicionais ou se prender a consultas de mídia de imagem de substituição.
Como uma alternativa ao atributo img, o elemento de imagem lida muito bem com a substituição de imagens, mas ao lidar com imagens em movimento de tamanhos diferentes, torna-se muito mais complicado manter a consistência da animação. O SVG é muito superior neste aspecto: podemos escrever o código uma vez e continuar a ajustar a complexidade visual de nossa imagem.
O SVG também fornece um DOM navegável, portanto, torna-se simples acessar um gráfico complicado e elementos animados individualmente. Como o próprio nome sugere, o SVG é feito sob medida. É incrivelmente simples e intuitivo ajustar o tamanho de um SVG.
Mesmo com esses recursos principais, as unidades e até mesmo a maneira como percebemos as imagens mudarão do tamanho da tela para o tamanho da tela. Não se preocupe; Eu cuido de você! Vamos dar uma olhada em algumas maneiras de trabalhar com animação responsiva.
Sprites SVG e animação CSS
Esta primeira técnica funciona particularmente bem para animação autônoma responsiva - por exemplo, ao ilustrar texto. Começamos com um sprite responsivo típico e adaptamos não apenas o tamanho da imagem, mas também a complexidade do gráfico. Isso faz muito sentido quando você pensa sobre o que podemos interpretar visualmente em uma tela menor. Para que os gráficos de nossa animação permaneçam nítidos, devemos considerar também o estado real da tela.
Dê uma olhada na ilustração acima. À esquerda você pode ver que projetamos para implementações em desktops, tablets e celulares. À direita, fizemos duas coisas para nos preparar para a exportação.
O primeiro é remover a repetição. Podemos ver claramente que as visualizações da área de trabalho e do tablet são semelhantes o suficiente para que pudéssemos alterar as propriedades ou substituí-las por consultas de mídia CSS. Um exemplo de tal alteração seria ajustar o fundo para que seja verde em vez de azul. Para as montanhas, a mudança no design entre diferentes tamanhos de dispositivos é significativa o suficiente para que precisaremos aplicar uma classe no elemento para ocultá-lo ou revelá-lo.
A parte mais importante desta técnica está na maneira como estamos lidando com o atributo viewBox. Você pode pensar no viewBox como uma pequena janela na qual visualizamos o SVG. O próprio SVG pode se estender além dos limites do viewBox, mas apenas a área dentro dele estará visível. O resto será eliminado.
Para as versões de desktop e tablet, queremos que apenas o primeiro bloco seja mostrado, então inicialmente configuramos o viewBox inline no SVG para cobrir apenas a seção superior do sprite: viewBox = "0 0 490 474". Em seguida, mudamos a área visível com JavaScript para ’0 490 500 500’.
Movimento complexo
Sempre que você tiver um gráfico autônomo com movimentos mais complexos, sugiro mudar para a plataforma de animação GreenSock (GSAP), em vez de usar CSS. Embora existam muitas coisas legais que o GSAP tem a oferecer, as principais vantagens neste caso são duas.
O primeiro é a estabilidade entre navegadores.
Graças a todos os nossos navegadores e sistemas, o desenvolvimento de front-end significa uma grande matriz de testes. Quando incluímos o celular, ele se torna exponencialmente mais complexo. Navegadores Safari mais antigos em dispositivos Apple mais antigos podem ter suporte irregular para mover SVGs, e também há muitos truques no Android. GSAP oferece movimento realmente estável, sem sacrificar a velocidade.
A segunda vantagem é o cronograma. Isso permite o empilhamento de interpolações e até mesmo efeitos escalonados, com código simplificado e intuitivo. Para o restante dos exemplos neste artigo, combinarei GSAP e SVG.
Vamos primeiro estabelecer que animar elementos com transformações e opacidade é a abordagem de melhor desempenho. É mais fácil para o navegador otimizar porque reduz as repinturas, que é a coisa mais importante para ficar de olho em uma animação sem falhas e sem falhas.
Além disso, se usarmos os atributos dentro do SVG DOM, eles serão escalados em conjunto com o SVG inteiro, porque estão respeitando o espaço dentro do viewBox. Portanto, se você dimensionar um SVG complexo usando porcentagem, flexbox ou outras técnicas, sua animação também será dimensionada de acordo. Isso significa que você não precisa ajustar nada; você pode se concentrar em escrever seu código corretamente apenas uma vez. E isso é uma grande vantagem.
Por exemplo, vamos considerar uma animação realmente complicada como a mostrada na imagem acima. Normalmente, projetarei todos os elementos de que preciso primeiro e os revelarei lentamente com o tempo. Isso me permite planejar as coisas com antecedência, o que leva a um código mais limpo e legível.
A animação finalizada é totalmente escalonável - você pode ajustar o botão aleatoriamente enquanto está em execução e fazer com que tudo se ajuste a uma nova porcentagem (veja a imagem abaixo).
UX responsivo
Projetar uma experiência responsiva que se ajuste à janela de visualização depende de algum planejamento no estágio de design. Você pode pensar nisso como pequenos blocos de Lego interligados: passamos pelos estágios de design, construção e desenvolvimento, definindo o escopo de cada área específica, mas o que o usuário acaba tendo é uma visão completa (embora completamente diferente) em cada janela de visualização.
Usamos essa abordagem para nossa animação Huggy Laser Panda. Dê uma olhada em netm.ag/demo3-278. Projetamos isso com cuidado, considerando as unidades que precisariam ser trocadas e empilhadas.
No celular, para fazer com que as peças se encaixem corretamente, ajustamos o posicionamento da seção certa (destacada em magenta para maior clareza) e a viramos para que possa empilhar de forma adequada.
Certificamo-nos de que cada parte mostrada nas seções em caixa seja exportada em SVGs individuais e nomeada corretamente, incluindo unidades ou grupos menores. Isso significa que em nossas configurações de exportação (eu uso o SVGOMG de Jake Archibald), não removemos IDs ou grupos desnecessários.
Em seguida, usamos várias funções. Cada seção tem o escopo definido de forma independente e há uma função repetida para todas as animações desse loop.
função revolve () {var tl = new TimelineMax (); tl.to (engrenagem, 4, {transformOrigin: "50% 50%", rotação: 360, repetir: -1, facilidade: Linear.easeNone}, "começar"); ... return tl; }
Isso torna o design muito mais fácil de construir e raciocinar. Podemos até pausar cada animação inicialmente, para que ela possa ser acionada por um evento de clique do usuário. Agora tudo está definido para sua seção de requisitos, desde o design até o produto acabado, é fácil saber onde ir para os ajustes.
Separamos essas construções e cada peça semelhante a Lego é ajustada por porcentagem, e ela é dimensionada perfeitamente. Como alternativa, o flexbox funcionaria igualmente bem, dependendo do nível de suporte.
Menos entusiasmo no celular
Vamos enfrentá-lo, as conexões móveis (especialmente em países menos desenvolvidos), podem ser muito lentas. Quer você tenha apenas algumas interações de animação principais em seu site ou uma grande experiência WebGL, às vezes uma animação que parece bonita no desktop não precisa ser reduzida para uma experiência móvel.
No caso de uma grande tela de animação, ou mesmo uma animação SVG realmente complexa que não seja crítica para a experiência do usuário, às vezes a melhor coisa a fazer é diminuir o tom ou desligá-la para dispositivos menores.
O site do Active Theory faz um belo trabalho (veja a imagem abaixo), mostrando a você uma animação de tela de partículas completa no desktop, que é substituída por um fundo de polígono simples no celular. As interações no celular ainda são muito imediatas, com uma transição linda, além do que esperamos no nativo.
A equipe ainda mostra suas proezas de interação na maneira como você navega no site, o que é indiscutivelmente mais impressionante no celular do que um plano de fundo animado seria. O design economiza largura de banda para o que conta.
Conclusão
Quer você desenvolva um design responsivo do início ao fim ou simplesmente desligue as animações no celular, é vital ter um plano concreto para a experiência dos espectadores de um dispositivo para outro. Isso é particularmente verdadeiro em uma paisagem onde os dispositivos móveis são essenciais. Conteúdo, tipo de imagem e largura de banda do usuário ajudam a orientar as opções de animação para um design responsivo.
