GSWF #3: Positioning & Animations in Famo.us

This is the third post in my Getting Started with Famo.us (GSWF) series. This series will cover my attempt at learning the Famo.us framework and hopefully provide useful information to anybody else trying to learn. You can check out the rest of the series below:

GSWF #1: Getting Started with the Famo.us Mobile Framework

GSWF #2: Introduction to the Famo.us University

GSWF #3: Positioning & Animations in Famo.us

In the last post we completed the first two lessons at the Famo.us University. This introduced us to some basics concepts like a renderable and a context and we got to play around with a little bit of code. In this post we will be focusing on the next two lessons:

Positioning Elements

Creating Animations

Positioning Elements

State Modifiers are introduced as being the most easy and common way to move a surface. A state modifier can be created as follows:

var stateModifier = new StateModifier({
  transform: Transform.translate(200, 100, 0),
});

and instead of adding the surface directly to the mainContext as we have previously, we first add the stateModifier to the mainContext and then add the surface to that:

mainContext.add(stateModifier).add(surface);

This has the effect of moving the square surface according to the x and y values supplied (the first two parameters). There is obviously a third parameter here as well but it is unclear at this stage what it does. I would have to assume it is a z value that would control whether it appeared behind or in front of other surfaces.

We can also chain modifiers together, performing multiple transformations on a single surface for example:

mainContext.add(modifierOne).add(modifierTwo).add(surface);

Branching Modifiers are used to move items together. We can keep a reference to the node in the render tree as follows:

var node = mainContext.add(modifierOne);

and then add multiple surfaces to that node, which will have the transformation applied:

node.add(surfaceOne);
node.add(surfaceTwo);

We can also use Align and Origin modifiers:

var modifier = new StateModifier({
  align: [0.5, 0],
  origin: [0.4, 0],
});

These control positioning of a child element within the parent container. The align specifies the anchor location on the parent element and the origin on the child. I could position the surface to the required positions without too much trouble though I don’t think I fully understand what is going on here. Somewhere care to shed some light in the comments?

Creating Animations

I’ve been looking forward to this one. One of the things that made me want to start learning Famo.us was the cool physics and animations so I’m excited to jump in.

In the previous section we set the transformation when we created the StateModifier but we can also call setTransform on a state modifier to achieve the same effect. The setTransform method allows us to supply two additional parameters as well: a transition object and a callback function. The transition object allows us to define how long the animation should take and the type of animation (or “easing curve”) that should take place, i.e:

var stateModifier = new StateModifier();

mainContext.add(stateModifier).add(surface);

stateModifier.setTransform(Transform.translate(100, 300, 0), {
  duration: 1000,
  curve: 'easeInOut',
});

In the code above we are saying that we want to move the surface 100 to the right, and 300 down. We also supply a transition object that says this should animate over 1000ms (1 second) and use the easeInOut easing curve. We can also chain animations by calling setTransform again on the same stateModifier. Once one animation has finished the next will begin.

An animation can be stopped at any time by using the following code:

stateModifier.halt();

If a chained animation was set up then it would begin as soon as the previous animation was halted. Rather than using the easing curve for animations we can also use Physics Transitions. We can set up a spring transition as follows:

var spring = {
  method: 'spring',
  period: 1000,
  dampingRatio: 0.3,
};

stateModifier.setTransform(Transform.translate(0, 300, 0), spring);

To create an effect as if the surface were flung by an elastic band and is getting pulled back to a specific position – creating a back and forth deceleration effect.

I’d encourage you to go through this tutorial by yourself as well (it’d be beneficial to go through all of these tutorials yourself for that matter), it’s not nearly as impressive without seeing the animations in action. Next time we’ll start on the next lesson, handling events!