Анимированный фон PNG с Javascript, но без петли

Question

Мне нужна помощь с анимированным PNG в Javascript.

Я нашел способ анимировать фон PNG с помощью Javascript здесь, в Переполнение стека.Но моя проблема в том, что мне нужна только анимация onmouseover и onmouseout.А анимация должна воспроизводиться только один раз, а не в цикле, поэтому, когда пользователь наводит указатель мыши на div, анимация в фоновом режиме должна воспроизводиться один раз и останавливаться на последнем кадре, но когда пользователь отключается от * 1006.* обратная анимация должна воспроизводиться один раз и останавливаться на последнем (первом) кадре.Я нашел здесь скрипт:

Стиль:

#anim {
  width: 240px; height: 60px;
  background-image: url(animleft.png);
  background-repeat: no-repeat; 
}

HTML:

<div id="anim"></div>

Javascript:

var scrollUp = (function () {
  var timerId; // stored timer in case you want to use clearInterval later

  return function (height, times, element) {
    var i = 0; // a simple counter
    timerId = setInterval(function () {
      if (i > times) // if the last frame is reached, set counter to zero
        i = 0;
      element.style.backgroundPosition = "0px -" + i * height + 'px'; //scroll up
      i++;
    }, 100); // every 100 milliseconds
  };
})();

// start animation:
scrollUp(14, 42, document.getElementById('anim'))

Надеюсьлюбой может помочь мне, спасибо

Answer 1

В зависимости от вашего целевого браузера и поскольку ваш вопрос довольно расплывчатый, я могу порекомендовать вам две альтернативы:

Использовать jQuery animate (все браузеры, включая ref to jquery)

//Animate to x,y where x and y are final positions

$('#anim').mouseenter(function(e) {
    $(this).animate({background-position: x + 'px ' + y + 'px'}, 4200);
})

//Do same for mouseleave

Использовать анимацию css3 (с помощью браузера -webkit здесь)

<style>
    @-webkit-keyframes resize {

      100% {
         height: 123px;
      }
    }               

    #anim:hover {       
       -webkit-animation-name: resize;
       -webkit-animation-duration: 4s;
    }

Я бы выбрал вариант 2, если вы занимаетесь мобильной разработкой или можете выбрать только браузеры с поддержкой css3.

Answer 2

Чтобы остановить анимацию после первого набора кадров, нужно изменить условие if, чтобы не сбрасывать счетчик на ноль, а вместо этого очистить интервал и остановить его повторное создание.

Чтобы позволить ему воспроизводиться только при вводе элемента, вы можете присоединить функцию анимации в качестве прослушивателя событий и воспроизвести все это в обратном порядке с другой функцией, которую вы подключаете к своему событию onmouseout.