javascript - JS 使用 DeviceAcceleration.x 无缝平移图像

Question

我有一个比视口(viewport)大的图像，我试图根据设备加速值在 x 平面上平移。

            _____________________
            |                   |
            |   Device          |
            |                   |
    ________|___________________|__________
    |       |                   |         |
    |       |   Image           |         |
    |       |                   |         |
    |_______|___________________|_________|
            |                   |
            |                   |
            |                   |
            |                   |
            |___________________|


            <-------------------->
                    X axis      

我可以获得半不错的结果，但没有什么比这更好的了。

根据我的理解，我需要:

• 获取加速度值
• 获取对象位置
• 结合这两个值(可能与频率？)
• 将新位置应用于对象

到目前为止，我有类似的东西:(我正在使用 gyronorm.js，所以加速数据称为 data.dm.x)

var accelX = data.dm.x
var currTrans = $('#pano').css('-webkit-transform').split(/[()]/)[1]
var posX = parseInt(currTrans.split(',')[4])
var newPos = posX+accelX
$('#pano').css({'-webkitfr-transform':'translateX('+(newPos)+'px)'})

我觉得我在这里遗漏了一个核心概念，但经过数小时的研究后我找不到它。

Answer 1

你的代码的主要问题是你通过加速度改变图像的位置，但加速度是速度随时间的变化，所以:

// speed and positionX are declared somewhere else
speed += accelX
positionX += speed

...会更好。

你是正确的，频率是相关的，因为你需要做类似的事情:

// speed and positionX are declared somewhere else
speed += accelX / frequency
positionX += speed / frequency * some_number

...如果你要改变频率，为了让一切都成比例。 (some_number 是用来缩放位置的数字，以便它以想要的速度移动)

不幸的是，仅使用加速度计数据查找设备的相对位置非常困难，因为误差会随着时间的推移而累积。如果你有一个理论上的“完美加速度计”，上面的示例代码就可以工作，但我怀疑任何人的手机都装有其中之一，所以上面的代码实际上并没有解决你的问题(参见 calculating distances using accelerometer )。

我建议使用倾斜(设备方向)而不是加速度:

var translate = 0;
var pano = $('#pano');
var frequency = 40;
var multiplier = 5;
var gn;

function init_gn() {
    var args = {
      logger: null,
      gravityNormalized: true,
      frequency: frequency
    };
    gn = new GyroNorm();
    gn.init(args).then(start_gn).catch(console.log);
}

function start_gn() {
    gn.start(gnCallBack);
}

function gnCallBack(data) {
    var tilt = data.do.gamma; // device orientation
    translate += tilt / frequency * multiplier;
    pano.css('transform', 'translateX(' + translate + 'px)');
}

此代码可让您将手机倾斜到一边以在图像上平移。