为什么Transform.rotateZ不顺时针旋转曲面

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/

尽管如此，文件显示：

变换旋转Z（θ）

返回一个表示绕z轴顺时针旋转的变换。

我是不是错过了什么，或者你知道有什么解决办法来纠正这种行为吗？

编辑：

以下是我集成Talves解决方案的JSFiddle，希望这能帮助到某人：http://jsfiddle.net/7rbkLrtn/

Answer 1

您并没有真正遗漏任何东西。你可能只需要解释一下发生了什么。

解释

变换旋转Z（θ）

返回一个表示绕z轴顺时针旋转的变换。

这并不意味着它将围绕z轴顺时针transition。这意味着它将代表一个从0开始的矢量位置，以θ弧度顺时针测量。弧度表示为从0到2*PI注意：2*PI与360度或0相同。如果我们取（2*PI）/360，我们得到圆中一个度的theta radians值。

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

当您调用修饰符的setTransform时，此行中的{duration: 300}将设置转换状态。使用转换时，从上一个状态到新状态有一个transition。在这种情况下，Famo.us以逆时针方向从rotateZ(theta) theta=PI转换到rotateZ(theta) theta > PI，因为它对返回的矩阵值进行了解释。这是一个错误还是只是方法的一个短暂出现，由您来决定。

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

解决方案

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

以下是如何做到这一点的一个示例