What is the difference between Modifier and StateModifier in famo.us?

Question

I see that the famo.us examples mostly refer to Modifier class, however the famo.us university tutorials primarily reference StateModifier class.

How do these two differ and which is the most appropriate application for each?

Answer 1

Currently, these is no difference.

Use the StateModifier if you need setTransform,setSize,setOrigin and setOpacity. Currently the Modifier still supports these methods, but they are Deprecated.

The StateModifier use a Transitionable, which can be used to smoothly transition between values. Just provide a transition when using these methods:

stateModifier.setTransform(Transform.rotateZ(Math.random()*Math.PI/2), { curve: 'easeOut', duration: 5000 });

The Modifier is more limited and uses transformFrom,sizeFrom,originFrom and opacityFrom. These methods can take in a value, getter-function, or an object with a get function.

Answer 2

According to the Famous University, these are the differences:
Statemodifiers create a new Transitionable for each instance, meaning that you cannot reuse a given transitionable. With Modifiers you can:
- share state across components / derive states from one another

http://famo.us/university/famous-102/transitionables/6/

Answer 3

There is an important difference in their constructors' options. StateModifier accepts only constant values as an initial values. Modifier accepts both constant values and functions with appropriate returning values. The function will be evulated at 60fps.

1) StateModifier

var stateModifier = new StateModifier({
    size: [200, 200],
    opacity: 1,
    transform: [1, 0.5, 0, 0, -0.5, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
    //transform: Transform.translate(20, 20, 0),  // --> this is still constant
});

2) Modifier

var transitionable = new Transitionable(0);
transitionable.set(2*3.14, {duration: 2000});

var modifier = new Modifier({
    origin: [0.5, 0.5],
    transform: function(){
        var state = transitionable.get();
        transition = Transform.rotateZ(state);
        return transition;  // --> this will cause rotating 
    },
    opacity: function(){
        return Math.random();  // --> this will cause blinking (60fps)  
    },
});

Answer 4

There are performance and design considerations around your choice of either.

You use a Modifier when your object has static positioning, or will change its transform details infrequently. An example would be if you had a group of objects which sat relative to a parent object, and you only needed to set their position once. You use a Modifier because once you have layed them out there's no need to worry about touching the render tree where they are concerned.

You use a StateModifier when you need to control the transform of your object more frequently. This is when you want to animate or control their transforms every frame, or whenever events happen.

The StateModifier uses either a pull or push approach. This gives you two ways to change/animate an objects transform. Pull means you are providing a function and using some object to determine the value of the object (like a Transitionable or your own object with a .get() method). This could be useful if you had a game object that was always tracking something else, you'd use a function which is hit each frame asking for the objects transform value. Push means that you decide when to change things, and use the .setOpacity or .setTransform methods of the StateModifier. This would better suit UI objects which remain stationary until some event fires. You can also use different easing curves whenever you call these methods or just have the change happen immediately.

The performance and design consideration comes from the fact that you should always try to write an application which doesn't have to do more than it needs to. If all of your objects use a StateModifier with a *pull model (using a function which is called each frame) you can imagine that this would cost more CPU power than if you only needed to change an object occasionally and you used the push method to change the object state when needed. This might not be a problem for a small UI but if you scaled your app up to control hundreds if not thousands of objects you can see where you start to cost more CPU power.

So in summary, Modifer is great for just placing stuff somewhere and forgetting about it, where as StateModifier is better for being able to move stuff, but you must chose between constantly being asked what it's doing (pull) or telling it when you are ready (push).