為什么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）

返回表示圍繞z軸順時針旋轉的Transform。

我錯過了什么嗎？或者您知道解決此問題的任何解決方法嗎？

編輯：

這是一個JSFiddle，與我集成了Talves解決方案，希望對您有所幫助： http : //jsfiddle.net/7rbkLrtn/

Answer 1

您並沒有真正錯過任何東西。 您可能只需要對發生的事情進行解釋。

說明

Transform.rotateZ（THETA）

返回表示圍繞z軸順時針旋轉的Transform。

這並不意味着它將繞z軸順時針transition 。 這意味着它將代表矢量位置，該位置從0開始，以the度弧度為單位順時針測量。 弧度表示為0到2 * PI。 注意： 2 * PI與360度或0相同。如果取（2 * PI）/ 360，我們將獲得圓中度數的theta radians值。

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

調用修飾符的setTransform時，此行中的{duration: 300}設置轉換狀態。 使用過渡時，從最后一個狀態到新狀態都有一個transition 。 在這種情況下，由於rotateZ(theta) theta=PI可以解釋返回的矩陣值，因此它會沿逆時針方向從rotateZ(theta) theta=PI為rotateZ(theta) theta > PI 。 這是錯誤還是該方法的缺點，由您決定。

如果不進行設置，您將獲得修改器上Transform.rotateZ(theta)返回的Transform矩陣的即時設置。

解

使用rotateZ時從一個弧度移到另一個弧度的正確方法取決於我們想要的效果。 在這種情況下，您希望順時針旋轉到下一個旋轉弧度值。

這是一個如何完成它的例子。