0

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

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

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 + ')';
        } 
    });
4

1 回答 1

0

来自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
    } 
});

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

于 2021-11-19T13:36:54.713 回答