如何计算旋转木马中最近窗格的旋转角度

Question

我有一款旋转木马，使用-webkit-transform: rotateX（deg中的旋转）;实现3D旋转。它有10个窗格，也就意味着每36度有一个居中的窗格。

现在，我正在尝试创建一个“捕捉到”效果，在touchend事件上调用，将最接近的窗格居中平铺在前面。

我的问题是，从任意旋转值，比如-1820度，我该如何计算最接近的窗格，或者更确切地说，最接近的窗格在什么度数？

希望这样说得清楚。非常感谢您提供的提示。

- jenswirf

Answer 1

如果我理解你的问题正确，你应该使用模运算符，它基本上是除法余数，根据 wg3schools 的定义为百分号%。

例如：5%2等于1

在你的情况下，你可以做类似的事情。

 var initialAngle= getAngle();  //let's say it's 1820 
 var closestPane= initialAngle%36; //which gives you 20.

现在，您已经知道了您的角度相对于之前的角度（我们称之为A）的位置。如果您进行另一个简单的操作（36-20=16），您还可以知道与下一个角度的距离。

angle before ---- A ---- angle after
            20deg   16deg

希望这能有所帮助。

- Daniele B

---

也许你有点眉目了，但我需要的是一个角度，最多从-1820度偏转不超过+-36度。 - jenswirf

为了更好地理解模运算符，如果需要的话，我找到了这个：'模基本上意味着“不断从第一个数字中减去第二个数字。当你不能再这样做而不进入负数时，剩下的就是答案”'。它发布在这里http://ask.metafilter.com/43903/Help-me-understand-modulus-operators。 - Daniele B

Answer 2

根据 Danele B 的建议，这是我最终得出的结果。

function snapToAngle(Angle) {
var deltaAngle = Math.abs(Angle)%36; 

    if (Angle >= 0) { 
       (deltaAngle <= 18) ? Angle -= deltaAngle : Angle+=36-deltaAngle;
    } else {
       (deltaAngle <= 18) ? Angle += deltaAngle : Angle -= 36-deltaAngle;
    }
return Angle;
}

我相信有更简洁的写法，但这个看起来能够工作。

- jenswirf