时间戳

首页 > 解决方案 > 我怎样才能让这个翻转动画的一部分连续循环？

javascript - 我怎样才能让这个翻转动画的一部分连续循环？

问题描述

我有一个动画我想用于具有以下基本状态的翻转效果：

  1. resting：在第 0 帧和第 55 帧之间连续循环
  2. 鼠标输入：播放第 56 到 78 帧，然后在第 78 帧暂停
  3. 鼠标移出：播放第 79-95 帧，然后返回休息

除了静止状态下的连续循环外，我几乎让它工作。循环只播放一次，然后静止不动。我的代码如下：

代码笔： https ://codepen.io/anon/pen/pBXKeN

var animationContainer = document.getElementById("animation-container");

var animation = lottie.loadAnimation({
    wrapper: document.getElementById("animation-wrapper"),
    renderer: "svg",
    loop: false,
    autoplay: false,
    prerender: true,
    animationData: animationData,
});

animation.addEventListener('DOMLoaded',resting);
animationContainer.addEventListener("mouseenter", hoverStart);
animationContainer.addEventListener("mouseleave", hoverEnd);

function resting() {
    animation.removeEventListener("complete", resting);
    console.log('resting');
    animation.playSegments([0, 55], true);
}

function hoverStart() {
    console.log('hover started');
    animationContainer.removeEventListener("mouseenter", hoverStart);
    animation.playSegments([56, 78], true);
    animationContainer.addEventListener("mouseleave", hoverEnd);
}

function hoverEnd() {
    console.log('hover ended');
    animationContainer.removeEventListener("mouseleave", hoverEnd);
    animation.playSegments([79, 95], true);
    animation.addEventListener("complete", resting);
    animationContainer.addEventListener("mouseenter", hoverStart);
}

我尝试将循环设置为 true，但这会导致所有 3 个状态都循环，这不是 mouseenter 和 mouseleave 效果的预期效果。有没有办法让一个部分循环？

如果它使事情变得更简单，我也很高兴切换到 jQuery。

标签： javascriptjqueryanimationlottiebodymovin

解决方案

通过将循环设置为 true、在 2 帧之间循环以实现“暂停”效果以及更密切地监视悬停状态的组合来解决。我确信这可以进一步改进，但在这一点上，我很高兴它能够正常工作。

更新 Codepen：https ://codepen.io/matt3/pen/NVxWYJ

var hover = false;

animationContainer.addEventListener("mouseenter", hoverStart);
animation.addEventListener('DOMLoaded',resting);

function resting() {
  console.log('resting. hover status: ' + hover);
  animation.removeEventListener("loopComplete", resting);
  animation.playSegments([0, 55], true);
}

function hoverStart() {
  console.log('hover started. hover status: ' + hover);
  animationContainer.removeEventListener("mouseenter", hoverStart);
  animation.playSegments([56, 78], true);
  animation.addEventListener("loopComplete", hoverPause);
}

function hoverPause() {
  console.log('hover paused. hover status: ' + hover);
  animation.removeEventListener("loopComplete", hoverPause);
  animationContainer.addEventListener("mouseleave", hoverEnd);
  animation.playSegments([77, 78], true);
  console.log('hover pause complete. hover status: ' + hover);
  if (!hover) {
    animation.addEventListener("loopComplete", hoverEnd);
  }
}

function hoverEnd() {
  console.log('hover ended. hover status: ' + hover);
  animationContainer.removeEventListener("mouseleave", hoverEnd);
  animation.removeEventListener("loopComplete", hoverEnd);
  animation.playSegments([79, 95], true);
  animation.addEventListener("loopComplete", resting);
  animationContainer.addEventListener("mouseenter", hoverStart);
}

animationContainer.onmouseout = function () {
    hover = false;
}
animationContainer.onmouseover = function () {
    hover = true;
}

推荐阅读