As animações da web são uma adição popular ao design da web, levando ao crescimento de muitas bibliotecas de animação JavaScript, incluindo Framer Motion e GreenSock . No entanto, muitos desenvolvedores ainda optam por criar animações da web do zero usando transições CSS, animações CSS ou a API JavaScript Web Animations (WAAPI).
Neste tutorial, vamos cobrir esses três métodos em profundidade, aprendendo como usar cada um por meio de uma demonstração relevante. Compararemos cada método e discutiremos os muitos benefícios que tornam a API de animações da web subestimada Na minha opinião. Vamos começar!
Transições CSS
As transições CSS nos permitem alterar perfeitamente uma propriedade CSS de um estado para outro. Por exemplo, digamos que desejamos alterar o valor da propriedade da cor de fundo de um elemento de preto para vermelho. Naturalmente, a mudança ocorreria imediatamente, no entanto, as transições CSS nos dão controle sobre certos aspectos do processo.
Por exemplo, podemos decidir quando a mudança começará, quais propriedades animar e por quanto tempo o a animação será executada. Para ser animada, a propriedade deve ser incluída na lista de propriedades CSS animáveis .
Propriedades
Vamos revisar as propriedades CSS de que precisamos para criar uma transição CSS:
transição-propriedade: a propriedade CSS que aplicaremos à transição na duração da transição: o comprimento de tempo a transição deve executar o atraso de transição: quanto tempo esperar antes que a animação comece a função de tempo de transição: a velocidade da transição
função de tempo de transição é linear, aumentando em velocidade ou diminuindo em velocidade. Normalmente, a função de tempo de transição é uma função que determina o valor da propriedade CSS em pontos intermediários ou uma palavra-chave equivalente à função.
Você pode usar a propriedade abreviada de transição no lugar de as quatro propriedades descritas acima:
.element {transição:
Demonstração
Agora, vamos ver as transições CSS em ação! No CodePen a seguir, quando um usuário passa o mouse sobre a tela, a cor de fundo muda de preto para vermelho.
Veja a caneta
teste de transições css por Udoh Idorenyin ( @idorenyinudoh )
em CodePen .
Várias animações
Na demonstração a seguir, você verá como nós pode aplicar transições CSS em várias propriedades CSS, separando os valores das propriedades de transição com vírgulas:
Veja a Caneta
teste de transições css 2 por Udoh Idorenyin ( @idorenyinudoh )
em CodePen .
Agora que estamos familiarizados com as transições CSS, vamos dar uma olhada nas animações CSS.
animações CSS
As animações CSS permitem que tornemos nossas animações um pouco mais interessantes ng. Precisaremos de um @keyframes CSS em regra, que especifica as regras CSS no início da animação, no final da animação e durante o ciclo da animação. Também precisaremos de uma regra que inicialize a animação CSS.
Propriedades
Vamos dar uma olhada nas propriedades de que precisamos para criar uma animação CSS:
nome-da-animação: o nome dos @keyframes at-rule animation-play-state: especifica se uma animação está em execução ou pausada animation-direction: especifica a direção da animação animation-iteration-count: o número de ciclos em que a animação completará animation-fill-mode: como a animação aplica estilos ao elemento antes e depois da execução
Se animation-iteration-count for definido como infinito, a animação será reproduzida continuamente. Se o modo de preenchimento de animação estiver definido para avançar, o elemento retém o estilo do último quadro-chave. Se definido para trás, o estilo do primeiro quadro-chave é aplicado ao elemento antes do início da animação.
O atraso da animação é o tempo entre a aplicação e a reprodução da animação. É semelhante ao atraso de transição nas transições CSS. duração da animação é a quantidade de tempo para a animação completar um ciclo. Seu equivalente é a duração da transição.
Por último, a função de tempo de animação representa a progressão de uma animação através de seu ciclo. Seu equivalente é a função de tempo de transição. Como nas transições CSS, há um atalho de animação para animações CSS que lida com estas propriedades:
.element {animation:
Demo
Para ter uma ideia de como as animações CSS funcionam, vamos recriar a demonstração acima e mudar a cor de fundo de um objeto de preto para vermelho:
Veja a caneta
teste de animações css por Udoh Idorenyin ( @idorenyinudoh )
em CodePen .
Você deve ter notado algumas diferenças importantes das transições CSS. Por um lado, a animação começa imediatamente em vez de ser inicializada pelo usuário. As propriedades de animação CSS podem utilizar a regra @keyframes quando ela está disponível para executar elementos.
No entanto, nas transições CSS, a regra que define o estado final da animação deve estar em uma declaração diferente do a declaração padrão do elemento. Por esse motivo, usamos a pseudoclasse: hover na primeira demonstração.
Nas animações CSS, o elemento retorna imediatamente ao seu estilo padrão quando a animação é concluída. Por outro lado, as transições CSS são executadas nos dois sentidos por padrão.
Por exemplo, quando nosso plano de fundo muda de preto para vermelho, a animação é executada e vice-versa. Para implementar essa funcionalidade com animações CSS, precisaríamos definir a animação novamente e definir a propriedade animation-direction como reversa.
Animações múltiplas
Para criar animações múltiplas usando animações CSS , podemos inserir todas as propriedades que queremos animar em um @keyframes at-rule e usá-lo em uma propriedade de animação, como visto no seguinte trecho de código:
.element {animation: color-change 2s Easy-in-out 1s infinito para a frente; } @keyframes color-width-change {0% {background: black; } 25% {largura: 200px; } 100% {fundo: vermelho; largura: 500px; }}
Outra abordagem é usar vários @keyframes at-rules e separar os valores das propriedades da animação com vírgulas. A abordagem a seguir é ideal se você deseja usar valores diferentes para as propriedades da animação:
.element {animação: mudança de cor 2s atenuação para dentro 1s para frente infinito, mudança de largura 3s para frente infinito para frente 0s; } @keyframes color-change {0% {background: black; } 100% {fundo: vermelho; }} @keyframes width-change {25% {width: 200px; } 100% {largura: 500px; }}
O CodePen abaixo contém uma demonstração para o trecho de código acima:
Veja a caneta
teste de animações css 2 por Udoh Idorenyin ( @idorenyinudoh )
em CodePen .
Você notará que a animação de mudança de largura ainda está em execução quando a animação de mudança de cor for concluída. Para evitar a repetição, você pode excluir algumas propriedades da abreviatura e, em vez disso, especificá-las em um valor com a propriedade animation-* individual.
The Web Animations API
A abordagem JavaScript para animação , a API de animações da Web, oferece aos desenvolvedores muito mais controle e nuances sobre as animações CSS. Embora a API de animações da Web possa inicialmente parecer mais complexa quando você a está configurando, você pode desassociá-la do estilo de um elemento, tornando-a mais fácil de escrever e mais direta do que as alternativas CSS.
Para animar um Elemento DOM com a API Web Animations, chamamos o método animate () no elemento. O método animate () tem dois parâmetros, quadros-chave e opções. Assim como acontece com as transições e animações CSS, o elemento deve ser animável.
Quadros-chave
Os quadros-chave podem ser uma matriz de objetos de quadro-chave ou um objeto com uma matriz de valores como propriedade:
const keyframes=[{opacity: 1}, {opacity: 0}, {opacity: 1}]//OR const keyframes={opacity: [1, 0, 1]}
No primeiro método, os objetos de quadro-chave são distribuídos em pontos pares ao longo do ciclo de animação. Por exemplo, no bloco de código acima, os pontos serão zero por cento, 50 por cento e 100 por cento por padrão. Para alterar os pontos, defina uma propriedade de deslocamento no objeto de quadro-chave com um valor entre 0,0 e 1,0, com 0,5 sendo 50 por cento.
Considere o seguinte exemplo em CSS:
@keyframes fade-in-out {0% {opacidade: 0; } 60% {opacidade: 1; } 100% {opacidade: 0; }}
Usando o primeiro método de quadros-chave na API Web Animations, o código CSS acima seria semelhante ao seguinte:
const keyframes=[{opacity: 1}, {opacity: 0, offset: 0.6}, {opacity: 1}]
Se fôssemos usar o segundo método de quadros-chave e usar uma matriz de valores como uma propriedade, nosso código CSS seria parecido com o seguinte:
const keyframes={opacity: [0, 1, 0], deslocamento: [0, 0,6, 1]//também poderia ser [0, 0,6]}
Em CSS, você pode usar uma função de tempo para uma animação, no entanto, com a API Web Animations, você pode especificar uma função de tempo para cada quadro-chave, bem como para toda a animação.
Inclua a propriedade de atenuação para um quadro-chave da mesma forma que você incluiria a propriedade de deslocamento. A propriedade de atenuação será aplicada desse quadro-chave ao próximo quadro-chave especificado:
const keyframes=[{opacidade: 1, atenuação:’atenuação’}, {opacidade: 0, deslocamento: 0,6, atenuação:’atenuação-out’}, {opacidade: 1, atenuação:’atenuação’}]//OR const keyframes={opacidade: [1, 0, 1], deslocamento: [0, 0,6], atenuação: [‘Easy-in’,’Easy-out’,’Easy-in-out’]}
Para incluir o valor de atenuação em toda a animação, vamos incluí-lo no objeto de opções:
options
as opções podem ser um tipo inteiro que especifica a duração da animação em milissegundos ou um objeto EffectTiming que contém pelo menos um equivalente a uma propriedade de animação CSS. Vamos revisar os equivalentes dessas propriedades na API de Animações da Web:
Cobriremos um equivalente para a propriedade CSS animation-play-state em breve. No entanto, existem várias propriedades que você pode incluir no objeto options que não têm equivalentes CSS:
endDelay especifica a duração do atraso após o término da animação, o que é útil quando desejamos reproduzir animações para trás.
iterationStart especifica o ponto em uma iteração quando uma animação deve começar, variando de 0,0 a 1,0. Por exemplo, um valor de 0,3 significaria que a animação deve começar no ponto do quadro-chave de 30 por cento.
A composição especifica como os valores de uma animação são combinados com outras animações que não têm a propriedade de composição. Por exemplo, o valor agregado adicionaria a próxima animação à animação anterior. Naturalmente, o anterior teria sido substituído.
iterationComposite especifica como os valores são construídos de iteração em iteração na animação.
animate ()
O animado O método () retorna um objeto Animation. Vamos considerar as propriedades e métodos disponibilizados pelo objeto.
Propriedades
currentTime: o ponto atual da animação em efeito de milissegundos: o objeto AnimationEffect, que é um objeto KeyframeEffect concluído: retorna uma promessa que resolve quando a animação termina id: o id usado para identificar a animação pendente: a animação está esperando por uma operação para completar playbackRate: a taxa de reprodução da animação pronta: retorna uma promessa que resolve quando a animação está pronta para jogar replaceState: retorna o estado de substituição da animação startTime: a hora em que a animação está programada para iniciar a linha do tempo: a linha do tempo associada à animação playState: especifica se a animação está sendo reproduzida ou não
Métodos
cancel (): limpa o KeyframeEffect criado pela animação e termina sua reprodução terminar (): avança para o final da animação pause (): pausa a animação persist (): persiste a animação para o elemento quando t O navegador o teria removido play (): inicia ou continua a animação reverse (): reproduz a animação do fim ao começo updatePlaybackRate (): define a velocidade da animação depois que ela já iniciou commitStyles (): confirma o estilo do estado final da animação para o elemento
Outros eventos para este objeto incluem cancelar, terminar e remover eventos.
Demo
Vamos recriar nossa animação anterior usando as propriedades, métodos, e opções da API Web Animations. Nosso arquivo JavaScript deve ser semelhante ao seguinte bloco de código:
const element=document.querySelector (‘div’); const keyframes={background: [‘black’,’red’]} const options={id:”color-change”, duration: 2.000, delay: 1000, easing:”easing-in-out”, iterações: infinito, preencher:”encaminha”} element.animate (quadros-chave, opções);
Para reproduzir uma animação continuamente, usamos a palavra-chave JavaScript Infinity como o valor da propriedade iterations no objeto options.
Veja a Pena
teste de API de animações da web por Udoh Idorenyin ( @idorenyinudoh )
em CodePen .
Para criar várias animações, podemos incluir várias propriedades em um objeto de quadros-chave. Para usar valores diferentes para propriedades no objeto de opções, poderíamos criar vários quadros-chave e objetos de opções e usar o método animate () várias vezes em um elemento.
Veja a Pena
web animations api test 2 por Udoh Idorenyin ( @idorenyinudoh )
em CodePen .
Vantagens de animar com WAAPI
Agora que entendemos como animar usando transições CSS, animações CSS e a API de animações da Web, vamos observar algumas vantagens principais de usar a API de animações da Web que são freqüentemente esquecidas.
Por um lado, com CSS, só podemos usar uma função de tempo para toda a animação. No entanto, com a API Web Animations, podemos especificar propriedades de atenuação para diferentes quadros-chave e toda a animação no objeto de opções.
Com a API Web Animations, podemos adicionar várias animações a um elemento usando o currentTime e Propriedades startTime do objeto Animation e dos eventos Animation. Em CSS, você deve sobrescrever uma animação por outra, reproduzi-las todas juntas ou adicionar outra animação ao mesmo elemento usando JavaScript.
A propriedade de composição no objeto de opções na API Web Animations nos permite para indicar ao navegador como queremos que as animações sucessivas sejam executadas em um elemento. CSS não tem equivalente.
Conclusão
As propriedades, métodos e eventos na API Web Animations facilitam a personalização de animações na web. Na minha experiência, animações não complexas são melhor implementadas em CSS, enquanto animações mais complexas são melhores em JavaScript.
É certo que animar do zero pode ser muito difícil. Você pode querer considerar ferramentas de animação de terceiros, como Flow , que pode exportar animações em formatos como as animações da web API.
Espero que tenha gostado deste tutorial. Boa animação!
