Animation of sequence insert/remove/reorder

Question

Is there any suggested pattern for the above?

My current thinking is to, before updating the sequence array:

1. setTransform with Translate+curve to "slide" nodes to new positions
2. Upon completion, Translate back to 0,0 and update the array

Of course, a lot of how the above logic would work depends on the View, e.g. Scrollview vs GridLayout. And likewise, other animations could be relevant too.

So I guess I'm also wondering if:

1. Every dev should be doing this on their own
2. The community should create wrapped views that handle this
3. This is anything Famo.us will provide in the future (I joined the party late so am not clear on all their plans).

Answer 1

Currently there are very few suggested patterns as Famo.us is still new to most the community. You are not that late! For the points you are wondering.. #2 'The community should create wrapped views that handle this', is the long term answer. Again however, being as new as it is, there is no established place for the community to share examples and widgets. You may have to take a stab at it yourself and realize that what Famo.us does offer is still a great starting point.

That being said. Take for instance GridLayout. After GridLayout is laid out.. It contains an array of Modifiers under the property _modifiers. You can use these modifiers as control points in which other objects snap to. That way you are not embedding your cells into the GridLayout but instead using GridLayout to manage your absolute cell positions.

So to get the center of the first grid cell you could do something like this:

var modifier = grid._modifiers[0];

var translate = Transform.interpret(modifier.getTransform())['translate'];
var size = modifier.getSize();
var center = [translate[0] + Math.round(size[0] / 2.0),translate[1] + Math.round(size[1] / 2.0),0];

Just be aware that _modifiers will not be available right away.. If this code is not in an event or executed after the GridLayout is loaded, _modifiers will be undefined.. When I encounter such situations, I end up subclassing like this..

Surface render events in famo.us

or just asking the Engine to check for the property and remove listener when complete

var check_modifiers = function(){
    if (grid._modifiers){
        // Do Something
        Engine.removeListener('prerender',check_modifiers);
    }
}

Engine.on('prerender',check_modifiers);

Hope that's enough to get you started.. Welcome to Famo.us