更改设备运动时更改移动设备中的背景图像

Question

我正在尝试在移动设备运动发生变化时更改背景图像（例如您将设备设置为顶部、左侧或右侧，或上下移动）。我正在使用此代码，问题是它立即开始工作，即使我不手动改变设备的运动。它总是在循环中不断更新。

当我稍微向右或向左或向下改变移动设备时，我想要什么，它应该改变图像而不是知道如何让它工作：

window.addEventListener("devicemotion", function(event){
        if(event.rotationRate.alpha || event.rotationRate.beta || event.rotationRate.gamma)
        {
            var myImages = new Array("victoria_bg.png", "victoria_bg_2.png", "victoria_bg_3.png", "victoria_bg_4.png");
            var random = myImages[Math.floor(Math.random() * myImages.length)];
            random = 'url(<?php echo base_url();?>resources/mobile/images/' + random + ')';
        } 
    });

Answer 1

来自MDN

devicemotion 事件定期触发

所以它不是像click 这样的传统事件，而是不断触发。您需要存储上一个事件的值并进行比较以查看它是否已更改。

由于提供 alpha/beta/gamma 的方式，您可能需要一些容忍度。测试返回的确切值以确定您的场景需要多少容差/灵敏度。

这是一个例子：

var prevAlpha = 0.0;
var prevBeta = 0.0;
var prevGamma = 0.0;

window.addEventListener("devicemotion", function(event){
    if (event.rotationRate.alpha < (prevAlpha - 0.5) 
       || event.rotationRate.alpha > (prevAlpha + 0.5)
       || event.rotationRate.beta < (prevBeta - 0.5) 
       || event.rotationRate.beta > (prevBeta + 0.5)
       || event.rotationRate.gamma < (prevGamma - 0.5) 
       || event.rotationRate.gamma > (prevGamma + 0.5))
    {
        prevAlpha = event.rotationRate.alpha;
        prevBeta = event.rotationRate.beta;
        prevGamma = event.rotationRate.gamma;

        ... code to run on a change
    } 
});

（显然可以使用对象/命名空间/范围来减少全局变量）