Question

我试图制作一个永远旋转的加载微调器动画＆＃39;我可以使用

在CSS3中完成

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

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

但希望在更多的“家庭”中做到这一点。使用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();

使用StateModifier实现无限旋转

2 个答案: