Como Criar Animações CSS Utilizando a Ferramenta Visual Stylie

Portuguese (Português) translation by thierry rene matos (you can also view the original English article)

Animações na web podem ser simples e divertidas. Neste tutorial vamos analisar a ferramenta Stylie, que utiliza uma interface gráfica para auxiliar na criação de animações CSS.

Animações CSS com @keyframe é uma ferramenta indispensável para desenvolvedores web. Em alguns casos, é mais simples criar animações com CSS e @keyframes ao invés de utilizar animações com JavaScript, além de ter performance superior a CSS transitions. De qualquer modo, a API do @keyframe pode deixar a desejar em animações mais complexas. Além disso tudo, pode ser um pouco complicado transformar uma animação que está na sua cabeça em códigos, mesmo sendo uma animação simples. Para auxiliar desenvolvedores nesses desafios, criamos uma ferramenta chamada Stylie.

O Stylie é uma aplicação gráfica para web, open source, que permite a criação de animações CSS (com @keyframes) de forma simples e fácil. Ele permite criar complexas sequencias de animações que se fossem criadas apenas com códigos, levariam horas para serem concluídas. Além de diminuir drasticamente o tempo de produção para trazer sua ideia a vida, faz com que a interação seja bem mais proveitosa e que você descubra novos efeitos visuais, por intermédio das ferramentas disponíveis, o que a produção na raça (apenas com códigos) não permite.

Explorando a @keyframes API

A maioria das animações CSS com @keyframe são bem diretas e contém apenas alguns passos:


@keyframes my-animation {
 0% {
   transform: translate(0px, 0px);
 }
 100% {
   transform: translate(300px, 200px);
 }
}

De qualquer modo, a especificação do CSS @keyframe não impõem limite no número de keyframes utilizados:


@keyframes my-animation {
 0% {
   transform: translate(0px, 0px);
 }
 10% {
   transform: translate(30px, 15px);
 }
 20% {
   transform: translate(60px, 30px);
 }
 /* … */
 100% {
   transform: translate(300px, 150px);
 }
}

Você pode tirar vantagem disso para criar animações bem sofisticadas. Com keyframes suficientes, a produção da animação ponto a ponto fica imperceptível. Se os pontos estiverem devidamente declarados entre 0% e 100% você pode inclusive criar animações com curvas. Animações CSS típicas fornecem um limitado conjunto de opções para facilitar, mas keyframes setados com espaçamento em animation-timing-function: linear, permite criar qualquer curva que você desejar. Essa é uma poderosa técnica que permite criar qualquer tipo de animação que você imaginar. Tentar criar esse tipo de animação apenas codificando @keyframes, até para uma simples animação, pode levar horas, por isso não recomendamos fazer isso manualmente, a não ser que essa seja sua real intenção.

Utilizando o Stylie

O Stylie foi elaborado para ser o mais simples possível. Quando você carregar a aplicação pela primeira vez, você vai ver uma esfera animada em loop entre dois pontos.

Você pode mudar os pontos de lugar na tela e a animação vai se atualizar conforme sua interação. Para adicionar um novo @keyframe, pressione o botão "+" no topo direito no painel de configuração em cinza escuro, ou pressione a tecla K no teclado. Você pode adicionar quantos keyframes desejar.

O painel de configurações

Se o painel de configurações estiver no seu caminho, você pode arrastar ele para qualquer ponto da tela ou pressionar a tecla C para minimizar a janela. Para ter acesso ao manual completo do Stylie, basta clicar no ícone "?" ou pressionara tecla H.

Propriedades facilitadoras (easing properties)

Assim que você posicionar seus keyframes, podemos adicionar curvas para as propriedades individuais. Selecione um estilo para curva e a demonstração será atualizada automaticamente.

Você também pode criar curvas customizadas, selecionando a opção Custom easings. As curvas criadas ficam disponíveis para todas as propriedades na guia Keyframes.

Adicionar, remover, e ajustar keyframes e propriedades individuais fazem parte do workflow do Stylie. A ferramenta foi otimizada com este foco, assim como boas animações são resultado de vários ajustes além do desenvolvimento de uma ideia.

Exportando animações CSS cross-browser (prefix para outros navegadores)

Quando você estiver satisfeito com a sua animação, você pode exportar o código em @keyframe CSS3 para utilizar no seu projeto. Para fazer isso, clique na guia CSS. Essa guia traz alguns controles para modificar o CSS gerado, que pode ser visualizado no preview abaixo na metade da janela.

O controle que indica o código prefix para cada navegador é um dos controles mais importantes desse painel. A maioria dos navegadores não suporta o código padrão imposto aos @keyframes, então é necessário utilizar o prefix desses navegadores para que o código CSS seja aceito. Marcando uma das opções neste controle, você define se deve ou não ser gerado um CSS compatível com o navegador selecionado. Tenha em mente que este procedimento pode aumentar o tamanho do arquivo de estilo gerado, o que pode aumentar o tempo de carregamento do mesmo. Nesta guia você também pode apontar uma classe para interagir com a animação. Assim que estiver pronto, basta copiar o código CSS gerado e colar no seu arquivo de estilos do seu projeto.

Ferramentas avançadas do Stylie

O Stylie também fornece algumas ferramentas para dar ainda mais vida a suas animações e que também podem servir para te inspirar.

Suporte a rotações

Quando o seu cursor não está no input de texto, você pode segurar a tecla shift no seu teclado para habilitar a edição de rotação do keyframe. Cubos coloridos vão substituir os keyframes na area de preview e você pode clicar e girar o keyframe em torno dos eixos X e Y. Clicando na ponta da lança no cubo, você controla o eixo Z.

Além de poder manipular a rotação de cada eixo, você também pode modificar a escala de cada keyframe (o tamanho dele) girando a wheel (rodinha central do mouse, que rola páginas) enquanto o cubo está selecionado (hover).

Ajustando os Keyframes

Se você deseja um maior controle sobre cada propriedade do keyframe, incluindo os eixos X/Y, rotação e escala, você pode editar cada uma dessas propriedades na guia Keyframes. Além de poder editar manualmente as informações, você pode selecionar entre as disponíveis nos campos que apresentam opções (setas para cima e baixo) que também pode ser acionado rolando a wheel do mouse. O preview vai atualizar conforme as alterações de valores nos campos.

Junto com os recursos individuais dos campos de texto, você também pode mover todos os keyframes ao redor com a timeline da animação. Para fazer isso, clique no item ms na guia Keyframes e altere o valor do campo. A animação vai ser atualizada assim que você mudar o foco do mouse para outro ponto ou pressionar a tecla enter. Se um keyframe foi reorganizado após uma alteração de tempo, ele será movido apropriadamente.

Salvando as animações

Criar uma animação bacana pode levar tempo, e você não deseja perder essa criação quando sair do Stylie, por isso o Stylie conta com suporte para salvar múltiplas animações, possibilitando retornar a edição no mesmo ponto. Para salvar uma animação basta clicar no símbolo do painel de controle (chave inglesa). Neste painel você consegue dar um nome a sua animação e salvar para atualizações futuras.

Se a página é encerrada enquanto você cria uma animação, ao retornar o Stylie continua do ponto que você parou. Se você desejar criar uma nova animação quando retornar, basta clicar na opção Create new animation (criar nova animação).

Indo além com o Rekapi

O núcleo do Stylie é uma engine para animação de keyframes chamada Rekapi. É o Rekapi que possibilita a visualização do preview e disponibiliza o CSS para utilizarmos em outros projetos. Qualquer animação criada com o Stylie pode ser recriada programando na raça com o Rekapi, e você pode até criar animações mais sofisticadas do que utilizando ferramentas de auxílio como o próprio Stylie.

Como nosso foco era manter o painel do Stylie simples e fácil de entender e utilizar, ele não facilita a criação de animações muito sofisticadas. De qualquer modo, a forma como o Repaki funciona utilizando uma simples API declarativa auxilia na criação de animações mais complexas. Considere utilizar o Repaki caso deseja resultados mais complexos de animações, que o Stylie não consiga lhe prover.

Nota importante: o Rekapi permite a animação de vários itens individuais (chamados de Atores/Actors), enquanto o Stylie permite a edição de apenas um por vez.

O futuro do Stylie

O Stylie é uma ferramenta usável e estável, mas está longe de ser uma ferramenta de auxílio completa a animação de keyframes. Com intenção de melhorar a ferramenta com o tempo, temos algumas novidades que finalmente vão permitir a produção de qualquer tipo de animação. O objetivo do Stylie é fazer com que qualquer pessoa consiga facilmente criar uma animação para utilizar da maneira que desejar.

Desenvolvedores que desejam contribuir com o projeto corrigindo erros, ou propondo novos recursos, são bem vindos!

Ferramentas poderosas para uma comunidade consolidada

O Stylie foi criado sob a máxima que determina que ferramentas úteis, poderosas (powerful tools), devem ser livres e grátis para acesso e utilização de todos. Adoramos saber o que vocês estão achando da ferramenta, isso nos ajuda no feedback com as equipes de desenvolvimento. Se você tem uma ideia para otimizar a ferramenta, por favor compartilhe através do repositório no GitHub. Continue criando belas animações!

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