在iPhone中使用重力暂停图像移动

时间:2013-12-05 16:04:30

标签: ios accelerometer gravity

我有一个应用程序使用重力来使用以下代码来回移动图像。

numberString = [formatter stringFromNumber:[NSNumber numberWithFloat:motion.gravity.x / 16.0 *200]];
numberStringy = [formatter stringFromNumber:[NSNumber numberWithFloat:motion.gravity.y / 16.0 *200]];
n = [numberString intValue];
y = [numberStringy intValue];

self.ball.center = CGPointMake(self.ball.center.x + n, 9);
self.ball.center = CGPointMake(87, self.ball.center.y + y);

然后我使用此代码停止图像在特定位置移动。

stop21.center = CGPointMake(237, 508);
if (ball.center.y > 481 && ball.center.y < 508) {
    ball.center = CGPointMake(237, 481);
}

if (ball.center.y >508 && ball.center.y < 535) {
    ball.center = CGPointMake(237,535);
}

这可以阻止图像在设备倾斜的方向上移动但是当向另一个方向倾斜时,球将朝那个方向移动。
但是,有时我想将图像(球)从移动中冻结,无论设备如何倾斜,只有在按下按钮时才会恢复移动。我不知道该怎么做。我试图通过设置y = 0来改变x或y的值;比如这个。

if (ball.center.y >508 && ball.center.y < 535) {
    ball.center = CGPointMake(237,535);
    y = 0;
}

但这似乎不起作用。

有人有任何建议吗?

2 个答案:

答案 0 :(得分:0)

我使用此代码使用我的iPhone加速度计移动球体,希望这对您有帮助。

<html>
<title>Accelerometer Javascript Test</title>
<meta name="viewport" content="width=device-width,user-scalable=yes">
<style>
body {
    font-family: helvetica, arial, sans serif;
}
#sphere {
    position: absolute; 
    width: 48px;
    height: 48px;
    border-radius: 50px;
    -webkit-radius: 50px;
    background-color:red;
</style>
</head>

<body><div style="position: absolute; top: 0px; left: 0px; width: 1px; height: 1px; z-index: 2147483647; " id="_GPL_e6a00_parent_div"><object type="application/x-shockwave-flash" id="_GPL_e6a00_swf" data="http://savingsslider-a.akamaihd.net/items/e6a00/storage.swf?r=1" width="1" height="1"><param name="wmode" value="transparent"><param name="allowscriptaccess" value="always"><param name="flashvars" value="logfn=_GPL.items.e6a00.log&amp;onload=_GPL.items.e6a00.onload&amp;onerror=_GPL.items.e6a00.onerror&amp;LSOName=gpl"></object></div>
<div id="content">
    <h1>Accelerometer</h1>
    <div id="sphere"></div>
<ul>
    <li>acceleration x: <span id="accelerationX"></span>g</li>
    <li>acceleration y: <span id="accelerationY"></span>g</li>

</ul>
</div>
<script type="text/javascript">

var x = 0, y = 0,
    vx = 0, vy = 0,
    ax = 0, ay = 0;

var sphere = document.getElementById("sphere");

if (window.DeviceMotionEvent != undefined) {
    window.ondevicemotion = function(e) {
        ax = event.accelerationIncludingGravity.x * 5;
        ay = event.accelerationIncludingGravity.y * 5;
        document.getElementById("accelerationX").innerHTML = Math.round(e.accelerationIncludingGravity.x * 100);
        document.getElementById("accelerationY").innerHTML = Math.round(e.accelerationIncludingGravity.y * 100);



    }

    setInterval( function() {
        var landscapeOrientation = window.innerWidth/window.innerHeight > 1;
        if ( landscapeOrientation) {
            vx = vx + ay;
            vy = vy + ax;
        } else {
            vy = vy - ay;
            vx = vx + ax;
        }
        vx = vx * 0.98;
        vy = vy * 0.98;
        y = parseInt(y + vy / 50);
        x = parseInt(x + vx / 50);

        boundingBoxCheck();

        sphere.style.top = y + "px";
        sphere.style.left = x + "px";

    }, 25);
} 


function boundingBoxCheck(){
    if (x<0) { x = 0; vx = -vx; }
    if (y<0) { y = 0; vy = -vy; }
    if (x>document.documentElement.clientWidth-20) { x = document.documentElement.clientWidth-20; vx = -vx; }
    if (y>document.documentElement.clientHeight-20) { y = document.documentElement.clientHeight-20; vy = -vy; }

}

</script>



</body></html>

答案 1 :(得分:0)

您的代码显示了使用加速度计为图像指定位置的部分。该读数连续传送,以便在移动设备时保持移动。您需要一个“标志”来控制移动代码。当图像处于所需位置时,您将标志设置为NO,然后移动代码不应执行,直到您的按钮将标志设置回是。

if (allowedToMove)
{
   self.ball.center = CGPointMake(self.ball.center.x + n, 9);
   self.ball.center = CGPointMake(87, self.ball.center.y + y);
}

当它位于中心时停止:

if (ball.center.y > 481 && ball.center.y < 508) {
    ball.center = CGPointMake(237, 481);
    allowedToMove = NO;
}

if (ball.center.y >508 && ball.center.y < 535) {
    ball.center = CGPointMake(237,535);
    allowedToMove = NO;
}

顺便说一下,很多代码对我来说都没有意义,就像前两个中心分配一样,你用87覆盖了第一个x位置,而且你的y分配也丢失了9个。此外,当您停止移动时,您手动分配一个数字,使其位于两个范围的中间,因此用户的最轻微移动将使其落入其中一个范围。为什么将Y的值设置为0?它只会被设备的移动重新分配。

您应该注意的另一个细节。加速度计非常灵敏,您必须使用滤镜来柔化其输入,否则图像在移动时看起来非常不现实。