Implementing infinite rotation with a StateModifier

Question

I'm trying to make a loading spinner animation that rotates 'forever'. I can do it in CSS3 with

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

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

but want to do it in a more 'famo.us' way with a StateModifier and .RotateZ. Anyone got any ideas how this can be achieved?

Answer 1

There are a couple ways you could do it.. I have tried a few, and this one works the best.. I found nextTick to be a bit sketchy..

If you rotate an object 360 degrees (2PI radians), Famo.us thinks you are already in the position you are trying to reach.. and does not animate..

Just change the 0.08 to increase or decrease the speed

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();

Answer 2

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

This should rotate infinitely