检测 html5 移动设备中的抖动

Posted 2023-03-10

【中文标题】检测 html5 移动设备中的抖动

【英文标题】：Detecting shaking in html5 mobile

【发布时间】：2012-09-08 20:23:19

【问题描述】：

我现在正在用 html5 构建一个网络应用程序，它需要能够检测用户何时摇动手机以及他们摇动手机的速度。我一直在浏览，但似乎找不到任何关于如何实现这一点的例子。我知道html5有一个加速度计可以检测手机的方向，但是它是如何检测用户摇动它的速度的呢？

我也在我的 iPhone 上对此进行了测试，尽管理想情况下我希望它也能在 android 设备上运行。想法？例子也很棒。谢谢！

【问题讨论】：

你可以使用这个jQuery plugin。您还可以阅读此内容...html5rocks.com/en/tutorials/device/orientation 顺便说一句，您的移动浏览器必须支持该事件。

这实际上是我能找到的唯一参考资料之一。我只是无法从中获得足够的动力继续前进。不过谢谢！

【参考方案1】：

shake.js 看起来是一个很好的库——它提供了一个自定义的“摇动”事件，并且在现代浏览器上受支持。这是一个example setup from their documentation，关于如何实现它：

<script src="shake.js"></script>
<script>
var myShakeEvent = new Shake(
    threshold: 15, // optional shake strength threshold
    timeout: 1000 // optional, determines the frequency of event generation
);

// Start listening to device motion
myShakeEvent.start(); 

// Register a shake event listener on window with your callback
window.addEventListener('shake', shakeEventDidOccur, false); 

//function to call when shake occurs
function shakeEventDidOccur () 

    //put your own code here etc.
    alert('shake!');

</script>

请注意，在不安全的浏览环境（例如http://）中，这在某些浏览器中不起作用

【讨论】：

看来该项目可能不再有支持了。阅读其中一个问题，您可能需要request permission to use the device motions APIs 才能使库正常工作。