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

Question

我有一个比视口大的图像,我正试图根据设备加速值在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是一个用于缩放位置的数字，以便它以想要的速度移动）

不幸的是，仅使用加速度计数据来查找设备的相对位置非常困难，因为误差会随着时间的推移而累积。如果您有一个理论上的“完美加速度计”，上面的示例代码就可以工作，但我怀疑是否有人拥有带有其中之一的手机，因此上面的代码实际上并不能解决您的问题（请参阅使用加速度计计算距离）。

我建议使用倾斜（设备方向）而不是加速度：

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

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