Existe uma função pouco conhecida nas animações CSS que permite dividir uma animação em segmentos – ou etapas – em vez de executá-la como uma animação contínua do início ao fim.
Essa função é útil para criar animações de folhas de sprite, e exibir com precisão cada imagem de sprite como um quadro, sem efeitos de facilitação entre eles.
Veja como vai ficar no final de tudo
Vamos procurar uma imagem no google com o seguinte termo: imagem sprites
Eu escolhi essa:
Ela tem um tamanho de: 626x369
Com steps() somos capazes de controlar a quantidade de keyframes prestados na duração de uma animação; ele progride a animação em etapas equidistantes com base no valor que definimos.
Sabendo disso, vamos usar steps() para criar uma simples animação.
Para animar nosso personagem, primeiro criaremos uma regra na qual definiremos as dimensões de largura e altura e exibiremos a div principal do sprite como uma imagem de fundo.
<style>
.personagem{
width: 626px;
height: 369px;
margin: 2% auto;
background:url('https://www.joemaster.com.br/tutoriais/wp-content/uploads/2020/07/criando-uma-animacoes-em-css-sprite-sheet-com-steps-6.jpg');
background-repeat:repeat;
}
</style>
<div class="personagem"><br><br><br><br><br><br>xxx</div>
Nesse ponto, agora pegamos o tamanho da figura em width, e colocamos ela com sinal negativo.
@keyframes play {
100% { background-position: -626px; }
}Agora vamos executar a animação
Sem step definido
<style>
body {
background: #24aecd;
}
.personagem {
width: 626px;
height: 369px;
margin: 2% auto;
background: url('https://www.joemaster.com.br/tutoriais/wp-content/uploads/2020/07/criando-uma-animacoes-em-css-sprite-sheet-com-steps-6.jpg') left center;
animation: play .8s infinite;
}
@keyframes play {
100% { background-position: -626px; }
}
</style>
<div class="personagem"></div>
Com step definido
<style>
body {
background: #24aecd;
}
.personagem {
width: 626px;
height: 369px;
margin: 2% auto;
background: url('https://www.joemaster.com.br/tutoriais/wp-content/uploads/2020/07/criando-uma-animacoes-em-css-sprite-sheet-com-steps-6.jpg') left center;
animation: play .8s steps(10) infinite;
}
@keyframes play {
100% { background-position: -626px; }
}
</style>
<div class="personagem"></div>
Quando vinculamos a play sequência de animação ao personagem com uma duração de 0,8s, vemos a posição de segundo plano de nossa planilha de sprites animando rapidamente da esquerda para a direita.
.personagem {
...
animation: play 0.8s;
}
Para obter o efeito de animação quadro a quadro desejado, precisamos incluir a função steps() de temporização no animation .
Como a folha de sprite contém 10 sprites de imagem, podemos dizer que é composta de 10 quadros – ou etapas.
Então, vamos definir 10 etapas em nossa sequência de animação:
.personagem
...
animation: play 0.8s steps(10);
}
Agora, a animação executará 10 quadros em sua duração de 0,8s – ela usa a animação da posição de fundo para percorrer cada imagem do sprite como uma etapa.
Finalmente, se ir na linha animation: e colocar no final infinite, ele irá processar um loop de repetição de animação.
.personagem {
...
animation: play 0.8s steps(10) infinite;
}
Para alterar a velocidade da animação, basta alterar o animation-duration 0.8s
No exemplo abaixo vou mudar para 2 segundos
<style>
body {
background: #24aecd;
}
.personagem {
width: 626px;
height: 369px;
margin: 2% auto;
background: url('https://www.joemaster.com.br/tutoriais/wp-content/uploads/2020/07/criando-uma-animacoes-em-css-sprite-sheet-com-steps-6.jpg') left center;
animation: play 2s steps(10) infinite;
}
@keyframes play {
100% { background-position: -626px; }
}
</style>
<div class="personagem"></div>
Vamos deixar um pouco mais avançado nosso código. Se por exemplo, você quer pegar só a terceira linha da animação. Ai teremos que pegar as coordenadas do fundo da imagem para mostrar. Veja abaixo como fazer.
Como não sabemos as coordenadas da imagem, podemos ir tentando até achar, ou acessar o seguinte site, e achar as coordenadas.
Após fazemos o envio da imagem, e já conseguimos achar as coordenadas, veja abaixo:
Então vamos aplicar no código.
Tive que fazer alguns ajustes, não está conforme a imagem acima o css, confira abaixo.
<style>
body {
background: #24aecd;
}
.personagem2 {
width: 626px;
height: 80px;
margin: 2% auto;
background: url('https://www.joemaster.com.br/tutoriais/wp-content/uploads/2020/07/criando-uma-animacoes-em-css-sprite-sheet-com-steps-6.jpg')-0px -91px;
animation: play2 2s steps(10) infinite;
}
@keyframes play2 {
100% { background-position-x: -626px; }
}
</style>
<center>
Exemplo 3 só uma parte da animação.
<div class="personagem2"></div>
</center>
Vamos pegar só uma parte da animação.
<style>
body {
background: #24aecd;
}
.personagem3 {
width: 63px;
height: 80px;
margin: 2% auto;
background: url('https://www.joemaster.com.br/tutoriais/wp-content/uploads/2020/07/criando-uma-animacoes-em-css-sprite-sheet-com-steps-6.jpg')40px -91px;
animation: play3 2s steps(10) infinite;
}
@keyframes play3 {
100% { background-position-x: -626px; }
}
</style>
<center>
Exemplo só uma parte da animação
<div class="personagem3"></div>
</center>
Veja todos os exemplos aqui:
<style>
body {
background: #24aecd;
}
.personagem {
width: 626px;
height: 369px;
margin: 2% auto;
background: url('https://www.joemaster.com.br/tutoriais/wp-content/uploads/2020/07/criando-uma-animacoes-em-css-sprite-sheet-com-steps-6.jpg') left center;
animation: play .8s steps(10) infinite;
}
@keyframes play {
100% { background-position: -626px; }
}
.personagem1 {
width: 626px;
height: 369px;
margin: 2% auto;
background: url('https://www.joemaster.com.br/tutoriais/wp-content/uploads/2020/07/criando-uma-animacoes-em-css-sprite-sheet-com-steps-6.jpg') left center;
animation: play1 2s steps(10) infinite;
}
@keyframes play1 {
100% { background-position: -626px; }
}
.personagem2 {
width: 626px;
height: 80px;
margin: 2% auto;
background: url('https://www.joemaster.com.br/tutoriais/wp-content/uploads/2020/07/criando-uma-animacoes-em-css-sprite-sheet-com-steps-6.jpg')-0px -91px;
animation: play2 2s steps(10) infinite;
}
@keyframes play2 {
100% { background-position-x: -626px; }
}
.personagem3 {
width: 63px;
height: 80px;
margin: 2% auto;
background: url('https://www.joemaster.com.br/tutoriais/wp-content/uploads/2020/07/criando-uma-animacoes-em-css-sprite-sheet-com-steps-6.jpg')40px -91px;
animation: play2 2s steps(10) infinite;
}
@keyframes play3 {
100% { background-position-x: -626px; }
}
</style>
<center>
Exemplo .8s
<div class="personagem"></div>
Exemplo 2s
<div class="personagem1"></div>
Exemplo 3 só uma parte da animação
<div class="personagem2"></div>
Exemplo 4 só uma parte da animação
<div class="personagem3"></div>
</center>
Para quem quiser ver mais a fundo animações CSS, olhe esse site que tem bons exemplos.
Ver el ejemplo Bernard (The Day of the Tentacle) CSS animation por Manz (@manz) en CodePen.
<< Anterior Texto com efeito elástico
Deixe um comentário