Recentemente, assisti a um vídeo sobre Animações de polímero . O vídeo é um tutorial de introdução usando a biblioteca de animação da Polymer. A demonstração mostra como animar a entrada de um diálogo de login, aumentar e diminuir gradualmente. Esta foi uma das primeiras vezes que assisti a uma Polycast ou estudei Polímero em geral. Não fiquei impressionado.
O vídeo mostra a biblioteca de animação Polymer, que é um desperdício completo de bytes preciosos e abstração. Em vez de usar esta biblioteca, desperdiçando tempo e largura de banda do cliente, você deve apenas usar animações CSS. Eles são muito mais eficientes para carregar e executar. Tudo o que a biblioteca de polímeros faz é escrever o CSS em tempo de execução. Sempre que vejo código sendo escrito em tempo de execução no cliente, procuro ver se ele deve ser gerado em tempo de desenvolvimento. Neste caso, com certeza.
Quero mostrar a você uma biblioteca CSS que uso para construir minhas animações, ela se chama Animate CSS . A biblioteca é uma coleção de CSS turn key, animações de quadro-chave. Quero mostrar a você como executar exatamente a mesma demonstração sem polímero ou muito JavaScript.
Vamos começar apenas animando o diálogo na mesma mansão mostrada no tutorial do Google, fade in e fade down. Annimate tem um quadro-chave denominado fadeInDown, que faz exatamente o que precisamos.
@keyframes fadeInDown {de {opacidade: 0; transform: translate3d (0,-100%, 0); } 100% {opacidade: 1; transformar: nenhum; }}.fadeInDown {nome-da-animação: fadeInDown; }
Isso é muito simples, nem mesmo muito código CSS para explicar.
Sei que muitos desenvolvedores podem não saber o que é uma animação de quadro chave, então deixe-me ver algum tempo para explicar como eles funcionam. As animações de quadro chave não são exclusivas do CSS, mas são usadas em quase todos os meios digitais. Nós os vemos em programas de televisão todos os dias. Você notou promoções deslizando do canto inferior direito provocando você com outros programas na rede?
Eles usam animações de quadro-chave.
Se você fez alguma programação XAML e presumo que seja ActionScript você sem dúvida viu ou escreveu uma animação de quadro-chave. O conceito é bastante universal e já existe há algum tempo.
Um quadro-chave permite que você defina quais propriedades de renderização se aplicam em determinados pontos no tempo.
A animação é executada por um determinado tempo , digamos 1 segundo (1000 milissegundos). A animação define propriedades, propriedades CSS para a web e seus valores em momentos diferentes do início ao fim da animação. Portanto, se você quiser que a opacidade mude de nenhum para 1 como no exemplo acima, você define quais são os valores em 0 e 100%.
Você está livre para adicionar outros quadros à animação. No código a seguir, adicionei um quadro no ponto de 50%, ele define a opacidade para 0,4.
Agora, o fade in é um pouco mais lento para o primeiro efeito da duração da animação e um pouco mais rápido no segundo metade.
@keyframes fadeInDown {from {opacity: 0; transform: translate3d (0,-100%, 0); } 50% {opacidade: 0,4; } 100% {opacidade: 1; transformar: nenhum; }}
Esta é uma animação de quadro-chave CSS simples, você pode torná-la muito mais complexa, mas você deve ver a ideia básica. A biblioteca CSS do Animate depende de algumas classes aplicadas ao elemento animado. A classe’animada’comum é a chave, ela define a duração da animação e o modo de preenchimento.
.animated {duração da animação: 1s; modo de preenchimento de animação: ambos; }
Se você quiser uma animação mais longa ou mais curta, pode alterar a duração para outro número. Por exemplo, uma animação de 2 segundos usaria 2s ou 2.000 ms. Você pode usar a unidade de tempo de milissegundos, ms, para fornecer um controle mais granular.
A propriedade animation-fill-mode é um recurso interessante de animação CSS. Sem definir esta propriedade, o elemento animado retorna ao seu estado inicial ou é renderizado exatamente como antes da animação. A propriedade animation-fill-mode tem quatro valores possíveis: none, forward, backward e both. Para ser honesto, você raramente vê uma diferença entre o avançado e os dois. Para trás e nenhum também são quase idênticos. Você pode ler mais sobre essa propriedade em um artigo do Site Point.
Outra regra CSS faz com que a animação execute um loop infinito. Você pode substituir infinito pelo número de vezes que a animação deve ser repetida antes de terminar.
.animated.infinite {
animation-iteration-count: infinite;
}
A marcação
Meu exemplo é muito simples, mas imita a caixa de diálogo de login mostrada no vídeo da Polymer. Um botão Login está centralizado na parte superior central da página. Quando o usuário clica ou toca no botão, a caixa de diálogo de login aparece gradualmente, deslizando para o lugar. O botão de login desaparece.
A caixa de diálogo de login é apenas uma lista vertical com um campo de nome de usuário e senha seguido por outro botão de login. Quando o botão de login da caixa de diálogo é pressionado, a caixa de diálogo voa e desaparece da visualização e o botão de login original aparece.
Observe como o botão de login e os elementos da caixa de diálogo de login têm a classe animada. Esta é a classe CSS principal que conduz a biblioteca animate.css. O botão de login também tem a classe fadeIn aplicada. Isso faz com que ele apareça gradualmente conforme a página é renderizada. A opacidade inicial da caixa de diálogo é definida como 0, ocultando-a da visualização.
-
-
-
O JavaScript
Eu escolhi escrever o código longo do JavaScript para que você possa ver exatamente o que está acontecendo. Em um aplicativo de produção, eu usaria minha biblioteca DollarBill e as funções addClass e removeClass para reduzir parte desse código. DollarBill é uma micro versão do jQuery.
A primeira seção apenas obtém referências aos dois botões de login e ao elemento de diálogo. Em seguida, vinculo um retorno de chamada aos eventos de clique do botão.
var showLogin=document.querySelector (". Btn-show-login"),
loginDlg=document.querySelector (". login-dialog"),
loginBtn=document.querySelector (". btn-login"); showLogin.addEventListener ("clique", function () {
loginDlg.classList.add ("fadeInDown");
showLogin.classList.add ("fadeOut");
loginDlg.classList.remove ("fadeOutUp");
});
loginBtn.addEventListener ("click", function () {
loginDlg.classList.remove ("fadeInDown");
loginDlg.classList.add ("fadeOutUp");
showLogin.classList.remove ("fadeOut");
showLogin.classList.add ("fadeIn");
});
No evento showLogin click, a classe fadeInDown é aplicada ao elemento de diálogo e a classe fadeOut ao botão de login. A classe fadeOutUp também é removida da caixa de diálogo para o caso de ter sido aplicada por um ciclo anterior.
Por outro lado, quando o botão de login da caixa de diálogo é clicado, a caixa de diálogo tem o fadeInDown trocado pela classe fadeOutUp e o botão de login fadeIn foi trocado por fadeOut.
Isso é tudo que você precisa fazer, simplesmente adicionar e remover referências de classe de seus elementos animados. Nenhum JavaScript real conduzindo os efeitos de animação.
Resumo
Embora estruturas de fast food como o Polymer seduzam muitos desenvolvedores para um estilo de vida que sacrifica a experiência do usuário por uma certa frieza geek, eles não agregam valor. Todos os navegadores suportam animações CSS e experiências maravilhosas podem ser criadas com pouco ou nenhum script aplicando referências de classe CSS em elementos específicos.
A biblioteca de animação do Polymer é grande e volumosa, então pode escrever estilos embutidos em tempo de execução. Esse cálculo em tempo de execução consome muita CPU e pode ser evitado criando o CSS no tempo de desenvolvimento, não em tempo real. Criar a animação uma vez é muito mais eficiente do que sempre que ela é invocada.
O Animate.css é uma boa biblioteca de referência pronta para uso que você pode usar no estado em que se encontra ou como referência para criar animações personalizadas. Essas animações podem ser aplicadas à sua marcação adicionando e removendo classes CSS conforme necessário para conduzir a sua animação.
Usar animações CSS puras cria uma experiência do usuário muito mais sustentável e executada com mais eficiência. Isso compensa exponencialmente em dispositivos móveis, deixando seus clientes felizes. Quando seus clientes estiverem satisfeitos, seus stakeholders e felizes, deixando você feliz.
Você pode baixar clone o código-fonte de exemplo do meu GitHub .
