Fazendo a transição do After Effects para as transições CSS e quadros-chave

Os sites estão cada vez mais parecidos com aplicativos móveis. Os usuários também esperam cada vez mais uma experiência mais parecida com um aplicativo. Das notificações push ao modo offline, os aplicativos da web nativos estão chegando lá.

Uma vez que os aplicativos da web funcionem como aplicativos nativos, as interações de design também mudariam para abordar o caso de uso – ou seja, a onipresença das animações. As animações impulsionam as interações em todos os nossos aplicativos favoritos, do Uber ao Lyft e do Snapchat ao Instagram.

Como desenvolvedores da Web, precisamos de uma boa base para criar animações com desempenho e manutenção, o que é fundamental para o cenário de aplicativos da Web nativos. Precisamos ser capazes de ir do After Effects às transições CSS, animações e quadros-chave.

O que é After Effects?

O After Effects é um produto padrão da indústria da Adobe usado por designers gráficos e de movimento para criar, compor e rastrear animações. É a ferramenta de fato usada por muitos designers para comunicar ideias a uma equipe, exportando as camadas de animação em um vídeo de amostra fácil de visualizar, com uma tabela de referência dos horários de início e término da animação para acompanhá-lo.

Juntos, o vídeo de demonstração e a tabela de referência fornecem à equipe de desenvolvimento uma boa base de como implementar a animação. O vídeo é usado para ver a imagem geral, enquanto a tabela de referência fornece os detalhes minuciosos que fazem ou interrompem a interação da animação.

Coisas que podemos fazer com o After Effects

O que podemos criar com o After Effects é limitado apenas pela nossa imaginação. Ele pode fornecer um número infinito de efeitos de pós-produção para uma imagem ou vídeo. No âmbito da web, fornece uma plataforma para que ideias sejam compartilhadas.

Considere a bola vermelha acima. A bola é animada usando o After Effects para rolar lentamente para o meio, pausar por um segundo e, em seguida, acelerar lentamente para sair da janela de visualização. As animações clássicas da web de movimento, dimensionamento, rotação e até mudança de cor são facilmente feitas no After Effects e servem como um documento de requisitos (ou vídeo ou GIF) gerado instantaneamente para as animações a serem implementadas.

Ferramentas que você precisa para começar

Com JavaScript, HTML5, CSS3 e muitas outras linguagens se tornando padrão na maioria dos principais agentes de usuário dos quais um site recebe tráfego, o uso dessas ferramentas no atacado está se tornando cada vez mais viável. Abaixo estão algumas tecnologias-chave a serem lembradas ao implementar animações.

Transições CSS

As transições CSS fornecem uma maneira de controlar a rapidez com que uma alteração na propriedade CSS é aplicada a um elemento. Em vez de aplicar um estilo imediatamente (sem transições), ele pode ser aplicado gradualmente sobre uma curva de aceleração definida usando regras de personalização. Um exemplo seria alterar uma cor de fundo de preto para branco durante um período de tempo.

 transition-property: background-color; transition-duration: 3s;

Com essa regra sobre o elemento, a cor de fundo levaria três segundos para mudar, mudando gradativamente de preto para branco, passando por tons de cinza. Isso pode ser personalizado ainda mais adicionando a função de tempo de transição, para calcular valores intermediários, e atraso de transição, para atrasar o início da animação.

As transições CSS são boas para interações simples , como alterar a cor do plano de fundo ou mover um elemento para um novo local.

Usando animações CSS

As animações CSS fornecem um controle ainda mais preciso sobre as etapas intermediárias entre uma animação, usando waypoints. Waypoints (ou keyframes) são pontos fixos no tempo, durante a animação, quando aplicamos certos estilos a um elemento. Em seguida, usamos os quadros-chave definidos para definir a aparência da animação.

Suponha que queremos que um elemento seja animado como um salto. O elemento precisa se mover para cima, voltar para a posição original, voltar um pouco para cima e depois voltar para a posição original. Usando quadros-chave, podemos dividir esse efeito elástico em porcentagens de tempo que a animação levará.

 @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-25px); } 60% { transform: translateY(-15px); } } .element { animation-name: bounce; animation-duration: 3s; }

Assim como nas transições CSS, há muitas opções para os desenvolvedores configurarem. Podemos fazer as animações se repetirem indefinidamente usando animation-iteration-count , com o valor infinite , ou até mesmo controlar a direção em que a animação flui, usando a propriedade animation-direction . Muitas propriedades de animação CSS nos dão um controle refinado para combinar uma animação com o design.

As animações CSS são úteis para animações de repetição curtas , como expansão, rotação e saltos.

Usando JavaScript

O JavaScript tem uma infinidade de usos, desde servidores Raspberry Pi até código do lado do cliente, mas um de seus principais usos continua alterando os nomes das classes nos elementos. Alterar o nome de uma classe é uma maneira trivial, porém eficaz, de gerenciar o estado de um elemento.

Um exemplo é a simples adição de uma classe active que sinaliza um componente inicialmente oculto para iniciar a animação. Considere a bola abaixo. Usamos JavaScript para adicionar uma classe que aciona a animação usando propriedades de transição CSS.

A primeira parte desta animação pode ser replicada usando uma simples combinação de HTML, CSS e JavaScript.

HTML:

 <div class="ball"></div>

CSS:

 .ball { width: 100px; height: 100px; color: red; transform: scale(0.25); transition: all 1s ease-in; } .ball.active { transform: scale(1.25); }

JavaScript:

 setTimeout(function() { document.querySelector('.ball').addClass('active'); }, 500);

Quando o tempo limite (de 500ms ) expira, uma classe de active é adicionada à div ball, que altera a propriedade transform , que então aciona a propriedade de transition , que está observando a propriedade transform no elemento ball. Alterar classes CSS usando JavaScript não apenas nos ajuda a gerenciar o estado de um componente, mas também nos dá mais controle sobre as animações além das animações e transições CSS.

Controlar animações usando JavaScript é benéfico para gerenciar state , para acionar eventos com base em fatores dinâmicos, como entrada do usuário ou estado do aplicativo.

Da ideia ao After Effects para CSS e JavaScript

Imagine que tivéssemos uma tarefa em que tivéssemos que animar um elemento na página. Vamos fazer deste elemento uma bola vermelha. A bola teria que girar ao redor da página, bem como escalar para cima e para baixo.

O After Effects nos permite criar maquetes de como seria a interação quando a animação for acionada. A bola em movimento abaixo é um exemplo disso. Observe como a bola vermelha primeiro aumenta ligeiramente de escala, depois começa a acelerar em torno de um loop circular e desacelera de volta à sua posição original. Só então a bola se reduz ao seu tamanho original.

Considere a mudança de escala acima de onde a bola cresce ou encolhe antes de se mover ou parar. Este é um pequeno recurso que o designer criou no After Effects e precisa ser comunicado ao desenvolvedor claramente para que os mínimos detalhes não sejam perdidos.

É por isso que alguma preparação precisaria ser feita antes de passar do After Effects para o desenvolvedor. Não poderíamos simplesmente criar um arquivo de vídeo da animação em ação, compartilhá-lo com o desenvolvedor e encerrar o dia.

Uma maneira de transmitir nossas ideias com clareza é criar uma planilha detalhando as etapas necessárias para a animação. Dependendo da complexidade da animação, podem ser simples rabiscos em um ticket, um arquivo de texto contendo uma lista ou uma planilha completa.

Outra maneira de transmitir informações sobre a animação é incorporá-la no próprio vídeo . Você pode fazer isso diretamente no After Effects, adicionando informações cruciais, como quanto dimensionar, o número de etapas e outras informações à medida que estão acontecendo, para dar contexto ao implementador. Isso nos permite usar o vídeo de demonstração como uma fonte universal de verdade .

Este arquivo de vídeo exportado do After Effects atua como uma forma de contrato entre designer e desenvolvedor. Com um entendimento comum estabelecido, podemos usar as ferramentas discutidas para implementá-lo — ou seja, classes CSS, eventos JavaScript, transições CSS, animações CSS e animações JavaScript.

1. Divida a animação

Procure padrões e observe os horários.

A primeira coisa a fazer é desenhar a linha do tempo das animações para cada um dos elementos (ou grupo de elementos). Precisamos entender onde as animações se cruzam para sincronizar o tempo e o ciclo de vida da animação em torno delas. O planejamento é a chave para uma animação complexa, para que possamos construir incrementalmente nossa solução de maneira sustentável para requisitos futuros.

A partir das informações acima, dividimos as seguintes etapas:

1. Inicialize o componente e aguarde um gatilho.
2. Uma vez acionado, aumente o tamanho e expanda a sombra projetada.
3. Depois disso, mova-se em círculo com ease-in-out .
4. Em seguida, reduza o tamanho e diminua a sombra projetada.

O benefício de delinear é que entendemos quais componentes devem viver fora dos elementos de animação - por exemplo, a sombra projetada deve ser independente da bola. Semelhante ao esboço de um ensaio, dividir a animação organiza nossos pensamentos sobre o trabalho que temos que fazer. Os esboços demonstram o processo de pensamento por trás de uma animação e servem duplamente como documentação para o nosso trabalho.

2. Negocie com as partes interessadas

Podemos simplificar algumas áreas? Quais partes da animação são obrigatórias? Podemos sincronizar horários?

Uma vez que tenhamos investigado o trabalho necessário para realizar a tarefa, negociamos. Negociar com o designer e o proprietário do produto é responsabilidade de cada desenvolvedor. O implementador tem uma compreensão completa dos principais frutos, o que pode ser feito e o que não é prático.

A animação é complicada porque a remoção de detalhes aparentemente minuciosos de uma animação pode alterar a experiência do usuário. Para dar um exemplo baseado em desenvolvimento, alterar como uma animação se comporta é semelhante a alterar a carga útil de resposta que podemos receber de uma chamada de API: Certas coisas podem ser alteradas, mas algumas partes devem estar lá.

Esta é uma situação casuística, baseada na nossa relação com o designer, bem como com o product owner em função do cronograma de lançamento. Pedir que certas animações sejam removidas não é recomendado porque isso estaria além da nossa área de especialização.

Uma boa abordagem para negociar seria sincronizar os tempos ou simplificar as animações que o navegador pode não ser capaz de fazer nativamente e evitar animações que usam JavaScript porque seriam difíceis de manter e poderiam resultar em desempenho instável. Em vez disso, podemos e devemos pedir essas concessões.

3. Planeje o Ataque

Saiba qual deve ser o estado inicial e final de cada elemento. Veja onde cada tempo de transição deve acontecer. Aproveite o BEM em classes CSS para aplicar animações com clareza. Entenda as razões pelas quais o JavaScript deve ser limitado em favor do CSS.

Vamos examinar a animação descrita anteriormente. Cinco estados saltam para nós:

1. o estado inicial, com a bola vermelha e alguma sombra;
2. a versão ampliada da bola com uma sombra mais longa;
3. o movimento da bola em torno de um círculo;
4. redução de escala da bola, juntamente com sua sombra projetada;
5. o retorno ao estado inicial, esperando para ser acionado.

Para todos os cinco estados, devemos olhar para o que o estilo é antes e o que deve ser depois. Isso nos fornecerá informações sobre que tipo de ferramentas de animação precisaríamos para implementá-lo.

Para fazer isso, começamos com o estilo de caso base. Isso pode não ser nada, se o elemento aparecer do nada, ou pode ser o estilo anterior, no caso de animações encadeadas.

Mantenha-o simples com poucas mudanças nos estilos entre os estados. Depois de identificarmos os estados inicial e final, precisamos rotulá-los como classes CSS, para que possam ser aplicados ao elemento facilmente. Isso nos dá a flexibilidade de usar JavaScript para lidar com a aplicação de classes com base em dados recebidos de chamadas AJAX dos quais o elemento pode depender.

BEM CSS é ideal para nossa estratégia de nomenclatura por causa de como representaríamos os estados de nossas animações em andamento com modificadores. Se a animação for genérica o suficiente, BEM também é uma boa metodologia para manter classes CSS DRY (“não se repita”) que funcionam em bases de código. Começaríamos com apenas os marcadores de bloco e elemento e, em seguida, sobreporíamos os modificadores à medida que progredimos na animação.

Aqui está um exemplo de jornada de classe de modelo:

 // State 1 <div class="ball"></div> // State 2 <div class="ball ball--scale-up"></div> // State 3 <div class="ball ball--scale-up ball--circling"></div> // State 4 <div class="ball ball--scale-up ball--circling ball--scale-down"></div> // State 5 <div class="ball"></div>

Começamos com o elemento container com a class ball, que representaria a bola vermelha que estamos animando. À medida que a animação percorre a experiência, o mesmo acontece com nossos nomes de classe BEM , desde a escala até a movimentação em círculo. Este é um método para acompanhar a aparência do elemento quando os estilos são aplicados.

4. Implementação constante

Com um esboço à mão e ferramentas prontas para uso, devemos ir avançando no projeto estado por estado.

Podemos abordar cada estado de forma iterativa como um item separado, baseando-se no estado anterior conforme necessário. Com cada estado claramente definido, podemos nos concentrar mais em tornar nosso código DRY e fácil de ler, em vez de detalhes de implementação. E, claro, seria bom adicionar testes para cobrir nossa lógica.

Estado inicial

Começamos com uma bola vermelha simples, com uma leve sombra projetada.

 .ball { background-color: #D24D57; width: 25px; height: 25px; margin: 5px; display: inline-block; border-radius: 50%; box-shadow: 0 8px 6px -6px #6C7A89; }

Ampliação

Há duas partes para aumentar a escala: o tamanho do elemento e sua sombra projetada. Usamos um quadro-chave, chamado scale , que é compartilhado pela escalabilidade para cima e para baixo para DRY-ness para lidar com essa animação.

 @keyframes ball-scale { from { transform: scale(1); box-shadow: 0 8px 6px -6px #6C7A89; } to { transform: scale(1.25); box-shadow: 0 10px 6px -6px #6C7A89; } } .ball--scale-up { animation: ball-scale 1s ease-out forwards; }

Circulando (após a aplicação da animação de ampliação)

Usamos um quadro-chave, chamado circular , bem como movemos sua propriedade transform-origin para mover o elemento em um círculo, começando do início. Lembre-se de que o círculo só acontece quando a animação de ampliação é concluída.

 @keyframes ball-circular { from { box-shadow: 0 10px 6px -6px #6C7A89; transform-origin: 50% -450%; transform: scale(1.25) rotate(0deg) translateY(-100%) rotate(0deg); } to { box-shadow: 0 10px 6px -6px #6C7A89; transform-origin: 50% -450%; transform: scale(1.25) rotate(360deg) translateY(-100%) rotate(-360deg); } } .ball--circling { animation: ball-circular 2s ease-in-out forwards; }

Redimensionamento (após a aplicação de animações circulares e de ampliação)

Para reduzir, reutilizamos a escala de quadro-chave, com animation-direction: reverse para fazer o oposto do que a classe de dimensionamento faz. Isso nos traz de volta ao nosso estado original.

 .ball--scale-down { animation: ball-scale 1s ease-in forwards; animation-direction: reverse; }

Demonstração de trabalho

Se combinarmos todas essas classes em uma sequência, teríamos uma representação CSS da renderização feita no After Effects.

Clique na bola para começar.

Veja o Pen Animating Ball de Chris Ng (@chrisrng) no CodePen.

Conclusão

As ferramentas abordadas neste artigo dificilmente são de ponta, mas geralmente são suportadas na maioria dos principais navegadores, o que as torna utilizáveis ​​hoje.

Anteriormente, implementar animações era difícil porque significava usar ferramentas externas, como jQuery Animate, para fazer coisas simples, como mover elementos na página. Hoje, as transições e animações CSS podem ser feitas de forma nativa e eficiente, aproveitando a GPU.

Animações são sempre um cabo de guerra entre desenvolvedor, designer e proprietário do produto. O truque é encontrar o meio termo, onde todos os interessados ​​estejam satisfeitos com a qualidade do produto. Espero que este guia o ajude a fazer essa transição.