Bodymovin hover воспроизводит анимацию только один раз

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

Есть идеи, что я написал неправильно?

var squares = document.getElementById("test");
var animation = bodymovin.loadAnimation({
    container: test,
    renderer: "svg",
    loop: false,
    autoplay: false,
    path: "https://dl.dropboxusercontent.com/BodyMovin/squares.json"
});

squares.addEventListener("mouseenter", function () {
    animation.play();
});

function playAnim(anim, loop) {
    if(anim.isPaused) {
        anim.loop = loop;
        anim.goToAndPlay(0);
    }
}

function pauseAnim(anim) {
    if (!anim.isPaused) {
        anim.loop = false;
    }
}

javascript animation jquery bodymovin
person phantomboogie    schedule 03.08.2017    source источник

Ответы (2)


arrow_upward
6
arrow_downward

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

squares.addEventListener("mouseenter", function () {
  animation.goToAndPlay(0);
});

И если вы хотите, чтобы он воспроизводился только после того, как он достиг последнего кадра, это должно сработать:

var isComplete = true;
svgContainer.addEventListener('mouseenter', function(){
  if(isComplete){
    squares.goToAndPlay(0);
    isComplete = false;
  }
})

squares.addEventListener('complete', function(){
  isComplete = true;
})
person airnan    schedule 29.10.2017

arrow_upward
2
arrow_downward

Я попробую это сделать, хотя мой опыт о Бодимовине (и Лотти) получен только из мира React Native.

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

squares.addEventListener("mouseenter", function () {
  animation.play();
});

squares.addEventListener("mouseleave", function () {
  animation.gotoAndStop(0);
});
person Samuli Hakoniemi    schedule 27.10.2017