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?

score 2 · Answer 1 · answered May 04 '14 at 22:26

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

answered May 04 '14 at 22:26

steve

21
2

johntraver · Accepted Answer · 2014-04-17T16:13:16.860

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

edited Apr 17 '14 at 16:13

answered Apr 17 '14 at 16:00

johntraver

3,612
18
17

I believe you can also chain transitions. Can't you create an infinite loop by chaining two 180 degrees? Have you tried this? – markmarijnissen Apr 17 '14 at 21:37
Yes I did try this.. This surprising simple little task took way longer than expected.. The Surface actually rotated in reverse after the first 180 degrees! – johntraver Apr 17 '14 at 21:40
Ah I see. I'm curious how they do it in the weather example app - don't have access to the demos right now – markmarijnissen Apr 17 '14 at 21:47
Instead of chaining two 180 degree transitions, you can chain three 120 degree transitions. – speigg Aug 16 '14 at 00:13

Implementing infinite rotation with a StateModifier

2 Answers2