This page is work-in-progress. You can reach me on twitter or mail to rezoner1337@gmail.com

Transitions

Transition is the animation played when changing application state.

Changing current transition:

app.transition = "implode";
app.transitionDuration = 0.5;

app.setState(AnotherState);

Custom transition:

Let's write a fade transition.

First thing to know is that app.setState makes a screenshot from a layer when leaving current state.

Transition is being drawn in the end of rendering process hence overlaying current rendering.

PLAYGROUND.Transitions.fade = function(progress, layer, screenshot) {

  layer.a(1 - progress);

  layer.drawImage(screenshot, 0, 0);

  /* restore alpha to previous value */
  layer.ra();

}

Example

app.transition = "fade";
app.setState(myState);

Click to change the state.

Predefined transitions:

split, implode

Ask question:

Fork me on GitHub