Facebook Paper menu button animation for Titanium

Your menu button icon doesn’t have to bee borking or just a static image. When Facebook released Paper app, it was full of sweet UI animations. Here is a quick tutorial on how you can make your own Facebook Paper menu button animation.

facebook_paper

To make this animation, we’ll create 3 views and use them as lines. When we receive a click event, we’ll have to hide the line in the middle and rotate top and bottom line.

Our CommonJS Module looks like this:
Filename: Ti.PaperMenu.js

function createPaperMenuButton(args){

// Button container
var self = Ti.UI.createView({
width:30,
height:25,
_isOpen:false
});

// Top line
var lineTop = Ti.UI.createView({
width:26,
height:5,
backgroundColor:"#333",
top:0,
anchorPoint: {x:0, y:1}
});

// Middle line
var lineMiddle = Ti.UI.createView({
width:26,
height:5,
backgroundColor:"#333",
});

// Bottom line
var lineBottom = Ti.UI.createView({
width:26,
height:5,
backgroundColor:"#333",
bottom:0,
anchorPoint: {x:0, y:0}
});

self.add(lineTop);
self.add(lineMiddle);
self.add(lineBottom);

// We'll call this function to make the animation.
// All we need to do is to send "degrees" as param.
function animateLines(degrees){
var t = Ti.UI.create2DMatrix();
t = t.rotate(degrees);
var a = Titanium.UI.createAnimation({
anchorPoint: {x:1, y:1},
transform:t,
curve:Titanium.UI.ANIMATION_CURVE_EASE_IN_OUT,
duration:300
});

return a;

t=null;
a=null;
}

// We'll add a click event to our button container'
self.addEventListener("click",function(){

// Check to see if the button is active
if(self._isOpen){
lineTop.animate(animateLines(0));
lineBottom.animate(animateLines(0));

// We'll use opacity to fade out/in the middle line
lineMiddle.animate({
opacity:1,
duration:100
});

self._isOpen=false;
}
else{
lineTop.animate(animateLines(45));
lineBottom.animate(animateLines(-45));
lineMiddle.animate({
opacity:0,
duration:200
});
self._isOpen=true;
}

// Finally we'll send our stage value back to our creator :)
args.clickEvent(self._isOpen);

});

return self;
};

exports.createPaperMenuButton = createPaperMenuButton;

Now that we have our commonJS module done, all we need to do is to call it through our main window.

Filename: app.js

Titanium.UI.setBackgroundColor('#fff');

// First we need to require our module.
var TiPaperMenu = require("Ti.PaperMenu");

var win = Titanium.UI.createWindow({
title:'Facebook Paper menu',
backgroundColor:'#fff'
});

// Now we can create a new menu button like this.
var menuButton = TiPaperMenu.createPaperMenuButton({
clickEvent:function(stage){
// Based on true/false, you can now open and close your windows.
Ti.API.log(stage);
}
});

win.add(menuButton);
win.open();

Video demo

Here is a video showing the module in action.