Question

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


google-caja-sanitizer

我可以得到半体面的结果，但没有什么比这更好的了。

根据我的理解，我需要：

获得加速度值
获取对象位置
将这两个值组合在一起（可能是频率？）
将新位置应用于对象

到目前为止，我有类似的事情:(我使用gyronorm.js，因此加速数据称为_____________________ | | | Device | | | ________|___________________|__________ | | | | | | Image | | | | | | |_______|___________________|_________| | | | | | | | | |___________________| <--------------------> X axis）

data.dm.x

我觉得我在这里错过了一个核心概念，但经过数小时的研究，我无法找到它。

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是一个用于缩放位置的数字，以便它以想要的速度移动）

不幸的是，由于误差会随着时间的推移而累积，因此很难找到仅使用加速度计数据的设备的相对位置。上面的示例代码如果你有一个理论上完美的加速计＆＃34;就可以了，但我怀疑是否有人有一部手机，所以上面的代码并没有真正解决你的问题（见{{ 3}}）。

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

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

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

Answer 2

你有正确的核心概念。但你的应用程序可能缺少动画，使重新定位看起来很流畅（你不希望你的图像一次跳50px）。您可以使用CSS动画创建从旧坐标到新坐标的良好流畅过渡。

这是一个简单的示例，说明如何在重新定位时为变换设置动画（包括猫） - https://codepen.io/dmonad/pen/aGbbrv

使用css transitions为变换设置动画。
使用transition timing微调过渡。

目前你的变换也是这样的：

        _____________________
        |                   |
        |   Device          |
        |                   |
        |___________________|__________
        ||                  |         |
        ||  Image           |         |
        ||                  |         |
        ||__________________|_________|
        |                   |
        |                   |
        |                   |
        |                   |
        |___________________|


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

因此，请确保将图像置于中心（您还可以设置负translateX(-500px)值）。这是计算图像位置初始值的方法：

var img = document.querySelector('img')
// width of the image
var imgWidth = img.getBoundingClientRect().width
// width of the container that holds the image
var containerWidth = document.body.clientWidth

var initialPosition = -imgWidth/2 + containerWidth/2
img.style.setProperty('transform', 'translateX(' + initialPosition + 'px)')

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

2 个答案: