在跳跃运动中触摸手势的更好方法

Question

我正在尝试开发一个菜单，我可以用手将鼠标悬停在图标上，然后用向前推动的动作点击它们。为实现这一点，我在 z 轴上使用我的手的速度，加上触摸区域和触摸距离，如您在这段代码中所见。

var controller = new Leap.Controller({ enableGestures: flag });

controller.on('frame', function(frame) {
  if (frame.pointables.length > 0) {
    var pointable = frame.pointables[0];

    // Params used to navigation and touching on menu interfaces
    var touchZone = pointable.touchZone, // None, hovering, or touching
        touchDistance = pointable.touchDistance, // [+1, 0, -1]
        zNotFinger= pointable.tipVelocity[0], // For the case pointable isnn't a hand
        zIndex = pointable.tipVelocity[1], // Index finger velocity on z-axis
        zMiddle = pointable.tipVelocity[2], // Middle finger velocity on z-axis
        x = pointable.tipPosition[0],
        y = pointable.tipPosition[1],

        // Getting highest tipVelocity
        tempVelocity = zIndex >= zNotFinger ? zIndex : zNotFinger,
        velocity = zMiddle > tempVelocity ? zMiddle : tempVelocity;

    // The circle is defined as a gesture to go back to homepage
    if (frame.hands.length === 1 && origin !== 'home' && frame.gestures.length > 0) {
      var gesture = frame.gestures[0],
          hand = frame.hands[0],
          oneExtended = hand.fingers[1].extended && !hand.fingers[3].extended;

      if (gesture.type === 'circle' && oneExtended && gesture.pointableIds.length >= 1) {
        window.open('../html/home.html','_self');
      }
    }

    // Sending data...
    if (origin === 'home') {
      homeHover(x, y, touchZone, touchDistance, velocity);
    } else if (origin === 'bio') {
      bioHover(x, y, touchZone, touchDistance, velocity);
    } else if (origin === 'nature') {
      natureHover(x, y, touchZone, touchDistance, velocity);
    }

  }
});
controller.connect();

}

然后...

if (velocity > 150) {
if ($(".hovered").attr("href") && touchZone === 'touching' && touchDistance <= -0.4) {
  window.location.replace($(".hovered").attr("href"));
}

}

主要问题是在将鼠标悬停在图标上时不小心 "click" 在链接上，或者设置的要求太高导致难以点击。

任何人都可以帮助我吗？也许我应该使用新的方法，甚至是完全不同的方法。

OBS：我已经尝试过 screenTap 和 keyTap。

非常感谢！

Answer 1

点击太难或太容易是一个常见问题。内置水龙头也有同样的问题。

您可以探索 stabilizedTipPosition 而不是速度（或除了速度之外）并让用户在悬停后向前移动预定量。使用 stabilizedTip position 应该使用户更容易向前推动而不会意外地离开目标。仅当运动主要沿 z 轴时单击才能大大减少意外点击，包括用户移动到目标菜单项时发生的意外点击和用户只是移动他们的手（与菜单无关）时发生的意外点击。

其他常见的菜单方法包括：

悬停激活 -- 光标显示倒计时指示器，用户只需将光标悬停在菜单项或按钮上达到所需的时间。它有效，但有点不雅，并且让用户在已经决定要做什么时等待每个菜单选项。这是最常见的方法之一，在Leap Motion应用商店的很多应用中都可以看到。
拉出激活 -- 用户将鼠标悬停在菜单项上并将他们的手指移动到 "drag" 项目的一侧以激活。您可以在 Sculpting 应用程序中看到此类菜单的示例。
物理 -- 菜单和按钮在 3D space 中由 "touch"（碰撞）激活。这种技术在 VR 风格的应用程序中效果很好，因为用户有更好的深度感知。它也适用于非 VR 3D 应用程序（经过精心设计）。您可以制作一个 2D-3D 混合网络应用程序，其中内容基本上是 2D，但手是 3D 的并且显示在内容上方。

这里有一些菜单设计指南（较旧）：https://developer.leapmotion.com/documentation/javascript/practices/Leap_Menu_Design_Guidelines.html

还有几个例子（虽然不是所有菜单）：https://developer.leapmotion.com/gallery/category/javascript

在跳跃运动中触摸手势的更好方法

Better aproach for touching gestures on leap motion

javascript

gestures

leap-motion