javascript - 为什么 Transform.rotateZ 不会顺时针旋转我的 Surface

Question

我尝试使用 Famo.us 转换，发现旋转有一种奇怪的行为。

需要一点解释才能让您了解真正发生的事情。

每次点击蓝色按钮，红色表面旋转 90 度。

第一，第二和第四顺时针旋转。很好!

但是第三次​​旋转，从 180 度到 270 度，是逆时针旋转的。

这是我的代码:

define('main', function(require, exports, module) {
    var Engine = require('famous/core/Engine');
    var Surface = require('famous/core/Surface');
    var Transform = require('famous/core/Transform');
    var StateModifier = require('famous/modifiers/StateModifier');

    var mainContext = Engine.createContext();
    var theta = 0;

    var button = new Surface({
        size:[200, 25],
        content: 'Click me to rotate the red cube',
        properties: { color:'white', backgroundColor:'blue'}
    });

    var cube = new Surface({
        size:[100, 100],
        content: 'I\'m a cube',
        properties: { color:'white', backgroundColor:'red'}
    });

    buttonMod = new StateModifier({ origin: [0, 0] });
    cubeMod = new StateModifier({ origin: [.5, .5] });

    mainContext.add(buttonMod).add(button);
    mainContext.add(cubeMod).add(cube);

    button.on('click', function() {
        rotateClockWise();
    });

    function rotateClockWise() {
        theta += Math.PI / 2;
        cubeMod.setTransform(Transform.rotateZ(theta), {duration: 300});
    }
});

出于测试目的，我在这里显示了一个小的 JSFiddle:http://jsfiddle.net/qb1rceLz/

然而文档说:

Transform.rotateZ(theta)

Return a Transform which represents a clockwise rotation around the z axis.

我是否遗漏了什么，或者您知道解决此问题的任何解决方法吗？

编辑:

这是一个 JSFiddle 与我集成的 Talves 解决方案，希望这可以帮助某人:http://jsfiddle.net/7rbkLrtn/

Answer 1

您并没有真正遗漏任何东西。您可能只需要对正在发生的事情进行解释。

解释

Transform.rotateZ(theta)

Return a Transform which represents a clockwise rotation around the z axis.

这并不意味着它将围绕 z 轴顺时针转换。这意味着它将代表一个矢量位置，从 0 开始，以 θ 弧度顺时针测量。弧度表示从 0 到 2 * PI。 注意:2 * PI 等同于 360 度或 0。如果我们取 (2 * PI)/360，我们将得到圆中度数的 theta 弧度 值.

cubeMod.setTransform(Transform.rotateZ(theta), {duration: 300});

这行的{duration: 300}设置了一个transform状态，当你调用修饰符的setTransform时。当您使用转换时，会有一个从上一个状态到新状态的转换。在这种情况下，Famo.us 以逆时针方向从 rotateZ(theta) theta=PI 过渡到 rotateZ(theta) theta > PI，因为它解释了矩阵值返回。这是错误还是方法的缺点，由您决定。

如果省略它，您将获得从修饰符上的 Transform.rotateZ(theta) 返回的变换矩阵的即时设置。

解决方案

使用 rotateZ 时从一个弧度移动到另一个弧度的正确方法取决于我们想要的效果。在这种情况下，您需要顺时针旋转到下一个旋转弧度值。

Here is one example of how it can be done.