3

Bom dia, o meu problema é o seguinte: tenho um gif de um bulbasaur e quero que quando eu passar o mouse em cima dele o gif mude para outro, porém quando acabar a animação do 2° gif eu quero que ele volte automaticamente para o 1°, tem como fazer isso já que o gif fica reiniciando sozinho?

Meu código:

    <style> 
        img{
            width: 6%
        }
    </style>
</head>

<body>
   <img src="Bulbasaur_XY.gif" id="i"> 

   <script>
       var imagem = document.getElementById('i')
       imagem.addEventListener('mouseenter', entrar)
       imagem.addEventListener('mouseout',sair)

       function entrar(){
        document.getElementById('i').src="Bulbasaur_XY_AttackAnimation_Sprite (1).gif"
       }
       function sair(){
        document.getElementById('i').src="Bulbasaur_XY.gif"
       }
   </script>
</body>

Link com os gifs: 1° gif = https://vignette.wikia.nocookie.net/pokemon/images/0/00/Bulbasaur_XY.gif/revision/latest?cb=20140319081443

2° gif = https://vignette.wikia.nocookie.net/pokemon/images/1/11/Bulbasaur_XY_AttackAnimation_Sprite.gif/revision/latest?cb=20141114181732

Também queria saber se tem como o 2 gif ficar do msm tamanho, já que o com primeiro e largura de cada um é diferente e eu estou usando a msm tag img.

3
  • 1
    Daniel, faltam algumas informações na sua pergunta. O que acontece se o mouse sair do elemento no meio da execução do 2º GIF? E se o mouse ficar repetidamente entrando e saindo do elemento? 22/07/2019 às 13:20
  • 1
    @Daniel Lucas Sobre o tamanho da imagem esse artigo: w3schools.com/tags/att_img_width.asp 22/07/2019 às 13:21
  • @fernandosavio o que eu quero é que quando o mouse passar no elemento 1 ele vá para o elemento 2, só que até o término da animação do elemento 2 os eventos do mouse fiquem impossibilitados de acontecer
    – Akali
    22/07/2019 às 13:46

2 Respostas 2

4

Para ser bem sincero, não sei se é possível identificar o período de animação de um gif. Gostaria que a galera mais experiente da comunidade abordasse este assunto.

E outra coisa... Acredito que para manter um padrão visual em sua página as imagens devem possuir o mesmo tamanho e mesmo tempo de animação. E a partir desses dois critérios é possível utilizar uma função simples como o setTimeout.

Veja como a diferença de tamanho entre as imagens e o tempo de animação influenciam no resultado final

const pokemons = document.getElementsByClassName('pokemon');

function animatedPokemon() {
  const image = this;
  const src = image.dataset.src;
  const dataHover = image.dataset.hover;
  image.src = dataHover;

  setTimeout(function() {
    image.src = src
  }, 1900);
}

for (let i = 0; i < pokemons.length; i++) {
  pokemons[i].addEventListener('mouseover', animatedPokemon);
};
img {
  border: 1px solid black;
}
<img class="pokemon" src="https://vignette.wikia.nocookie.net/pokemon/images/0/00/Bulbasaur_XY.gif/revision/latest?cb=20140319081443" data-src="https://vignette.wikia.nocookie.net/pokemon/images/0/00/Bulbasaur_XY.gif/revision/latest?cb=20140319081443"
  data-hover="https://vignette.wikia.nocookie.net/pokemon/images/1/11/Bulbasaur_XY_AttackAnimation_Sprite.gif/revision/latest?cb=20141114181732">

<img class="pokemon" src="https://www.pkparaiso.com/imagenes/xy/sprites/animados/abra-2.gif" data-src="https://www.pkparaiso.com/imagenes/xy/sprites/animados/abra-2.gif" data-hover="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/23ddfd0a-6934-4f06-9fa9-8be687766403/d81zxe8-ef67d1cf-fddc-4c62-9e61-13af794d876d.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzIzZGRmZDBhLTY5MzQtNGYwNi05ZmE5LThiZTY4Nzc2NjQwM1wvZDgxenhlOC1lZjY3ZDFjZi1mZGRjLTRjNjItOWU2MS0xM2FmNzk0ZDg3NmQuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.O17RaDSNgsm86-CK5mxNkkeUkyrygiyF0uOyz_rdwas">

5
  • Aaaa obrigado dmais, rodei mt atrás de uma função ou algo assim mas só achei algumas coisas em java e n em javascript, você sabe se tem algum programa que ajuste a largura e a altura desses gifs pra ficarem iguais ?
    – Akali
    22/07/2019 às 15:18
  • Eu não sei quase nada sobre manipulação de imagens... Vou tentar achar alguma coisa e te falo :) 22/07/2019 às 15:27
  • 1
    Blz, obrigado mais uma vez :)
    – Akali
    22/07/2019 às 15:31
  • você pode me explicar o que é esse 1900 no : setTimeout(function() { image.src = src }, 1900); }? não entendi direito pra que ele serve
    – Akali
    22/07/2019 às 15:52
  • Claro. A função setTimeout executa a função passado no primeiro parâmetro após o tempo (em milissegundos) que foi definido no segundo parâmetro, ou seja, o número 1900 é a quantidade de tempo que a função "esperará" para ser executada. Então, caso o seu gif tenha uma duração total de 2 segundos até que comece a repetir novamente, você pode mudar o valor para 2000 milissegundos (2 segundos). 22/07/2019 às 16:01
2

Resposta baseada na fornecida por @VictorCarnaval

Para obter imagem com o mesmo tamanho tens que arranjar um programa como o Photoshop e criar um gif com o mesmo tamanho que a maior (que neste caso é a animação de ataque). Não podes simplesmente mudar o height e width do gif porque isso simplesmente vai esticar a imagem e não fica bem a transição.

Crie uma imagem com o mesmo tamanho para veres como fica e também acertei o setTimeout para a animação acabar no momento exacto.

const pokemons = document.getElementsByClassName('pokemon');

function animatedPokemon() {
  const image = this;
  const src = image.dataset.src;
  const dataHover = image.dataset.hover;
  image.src = dataHover;

  setTimeout(function() {
    image.src = src
  }, 1530);
}

for (let i = 0; i < pokemons.length; i++) {
  pokemons[i].addEventListener('mouseover', animatedPokemon);
};
img {
  border: 1px solid black;
}
<img class="pokemon" src=https://i.ibb.co/DR0vdyN/Bulbasaur-XY-resized.gif" data-src="https://i.ibb.co/DR0vdyN/Bulbasaur-XY-resized.gif"
  data-hover="https://vignette.wikia.nocookie.net/pokemon/images/1/11/Bulbasaur_XY_AttackAnimation_Sprite.gif/revision/latest?cb=20141114181732">

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .