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轴顺时针旋转的变换。

我是否遗漏了某些内容，或者您是否知道解决此问题的任何解决方法？

编辑：

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

Answer 1

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

说明

<强> Transform.rotateZ（THETA）

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

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

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

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

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

解决方案

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

<强> Here is one example of how it can be done.

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

1 个答案:

说明

解决方案