How to build an endless animation with famo.us?

Question

I'm willing to build an endless animation using famous (for example an endless rolling gear or a randomly shaken surface). Should I write a custom Transitionable with an infinite duration or there is something smarter to achieve this ?

score 1 · Accepted Answer · answered May 27 '14 at 15:13

1

I would recommend using Modifiers transformFrom method to define a position or rotation based on time. This allows you to set a transform that will be updated on every tick of the engine, but will be controlled via actual time.

Here is an example of that..

Hope it helps!

var Engine        = require('famous/core/Engine');
var Surface       = require('famous/core/Surface');
var Transform     = require('famous/core/Transform');
var Modifier      = require('famous/core/Modifier');

var context = Engine.createContext();

var surface = new Surface({
    size:[200,200],
    content: "Hello",
    properties: {
        lineHeight:"200px",
        color:"white",
        textAlign:"center",
        backgroundColor:'green'
    }
})

surface.mod = new Modifier({
    origin: [0.5,0.5],
    align:[0.5,0.5]
});

var startTime = (new Date).getTime();

surface.mod.transformFrom(function(){
    var currentTime = (new Date).getTime();
    var rotation = (currentTime - startTime) / 360.0;
    return Transform.rotate(0,0,rotation);
});

context.add(surface.mod).add(surface);

answered May 27 '14 at 15:13

johntraver

3,612
18
17

Would it be the same to use `Timer.setInterval` and then `surface.mod.setTransform` within it? – HP. May 27 '14 at 18:55
The difference is that Modifier consumes state, so for Modifier you would use transformFrom. Theoretically you could use a StateModifier with setTransform, but I believe transformFrom is best practice, when possible. – johntraver May 27 '14 at 18:59
Right I meant `StateModifier`. I am always confused between those two. Should it be named reversed? LOL – HP. May 27 '14 at 22:32
Yea I was only using StateModifier for a while thinking Modifier was being deprecated.. only setTransform on Modifier is being deprecated.. Now I love my Modifier :) – johntraver May 27 '14 at 22:35
Right, and it seems I can only use `Transitionable` with `Modifier` but not `StateModifier`. That leaves me the question: why create `StateModifier` at all? – HP. May 27 '14 at 23:04
Similar to what you had mentioned.. It wouldn't seem strange if it was just named something else :) I like to believe it's all for efficiency sake! – johntraver May 27 '14 at 23:13

score 0 · Answer 2 · answered May 28 '14 at 21:13

The answer is to use Transitionables

First you use use Transitionable.set(destination, {duration: VALUE})

Each Engine 'prerender' (every frame), you use Transitionable.get() to update a Modifier Transform

At the end of the Transitionable, it will run a callback to update the new destination

this.transit = new Transitionable(0);

// ------- when i say twerk, you twerk ----->
var _createWheelMod = function() {
  var _setWheelModRotation = function() {
  Engine.on("prerender", function() {
    this.wheelMod.setTransform(Transform.rotate(0, 0, this.transit.get()));
  }.bind(this));
};

// ------------ charge lasers ------->
var _setDestination = function() {
  this.transit.set(100 + this.transit.get(), {duration: 2e5},
  _setDestination.bind(this)); // callback when the transition has finished
};

_setWheelModRotation.call(this);
_setDestination.call(this);
};

How to build an endless animation with famo.us?

2 Answers2