famo.us - 使用 StateModifier 实现无限旋转

Question

我正在尝试制作一个“永远”旋转的加载微调器动画。我可以在 CSS3 中使用

#spinner {
    -webkit-animation: rotation 2s infinite linear;
}

@-webkit-keyframes rotation {
    from {-webkit-transform: rotate(0deg);}
    to   {-webkit-transform: rotate(359deg);}
}

但希望以更“famo.us”的方式使用 StateModifier 和 .RotateZ。任何人都知道如何实现这一目标？

Answer 1

var initialTime = Date.now();
var rotate = new Modifier({
    origin: [0.5, 0.5],
    transform : function() {
      return Transform.rotateZ(.002 * (Date.now() - initialTime));
    } 
}); 

这应该无限旋转

Answer 2

有几种方法可以做到这一点..我尝试了一些，这个效果最好..我发现 nextTick 有点粗略..

如果您将对象旋转 360 度（2PI 弧度），Famo.us 会认为您已经处于您想要到达的位置......并且没有动画......

只需更改 0.08 即可提高或降低速度

var Engine           = require("famous/core/Engine");
var Surface          = require("famous/core/Surface");
var StateModifier    = require("famous/modifiers/StateModifier");
var Transform        = require("famous/core/Transform");
var Transitionable   = require("famous/transitions/Transitionable");
var Timer            = require("famous/utilities/Timer");

var mainContext = Engine.createContext();

var rotate_mod1 = new StateModifier({origin:[0.5,0.5]});

var spinner = new Surface({
    size: [100,100],
    properties:{
        backgroundColor: 'red'
    }
});

mainContext.add(rotate_mod1).add(spinner);

var total_rotation = 0;

var rotate_spinner = function(){
    total_rotation += 0.08;
    rotate_mod1.setTransform(Transform.rotateZ(total_rotation));
    Timer.setTimeout(rotate_spinner,0);
};

rotate_spinner();