Titanium Facebook-POP Module

Tipop is a titanium client for facebook pop, the rock star animation engine written for iOS / OS X. pop supports both static and dynamic animations, which makes the UI interactions more realistic.

In addition to the linear and basic ease-in-out functions, tipop adds another 24 easing function supports like quad, cubic or expo. The API is similar to the one that Ti.UI.Animation has, which we Ti-Devs must be familiar with.

Built with 3.5.0.GA, ready for 64-bit.

Installation

Git-cloning the repository, unzip the guy.mcdooooo.tipop-iphone-1.0.3.zip package and put the modules/iphone/guy.mcdooooo.tipop into the modules/iphone folder of your project.

Usage

###1. Accessing Tipop

To access this module from JavaScript, you would do the following:

var POP = require("guy.mcdooooo.tipop");

The POP variable is a reference to the Module object.

###2. Function list

	Basic Animation	Spring Animation	Decay Animation
Properties	POP.basic( myView, {	POP.spring( myView, {	POP.decay( myView, {
left	left: 140, left: '65%',	left: 140, left: '65%',	left: -20, // velocity
top	top: -50, top: '15%',	top: -50, top: '15%',	top: 90, // velocity
width	width: 100, width: '30%',	width: 100, width: '30%',	width: -40, // velocity
height	height: 42, height: '26%',	height: 42, height: '26%',	height: 25, // velocity
opacity	opacity: 0.7,	opacity: 0.7,	opacity: -1.8, // velocity
zIndex	zIndex: 20,	zIndex: 20,	|
color Ti.UI.Label	color: '#FFD3E0',	color: '#FFD3E0',	|
backgroundColor	backgroundColor: '#FFD3E0',	backgroundColor: '#FFD3E0',	|
tintColor	tintColor: '#55EFCB',	tintColor: '#55EFCB',	|
borderRadius	borderRadius: 75,	borderRadius: 75,	borderRadius: -68, // velocity
borderWidth	borderWidth: 15,	borderWidth: 15,	borderWidth: -22, // velocity
borderColor	borderColor: '#FFD3E0',	borderColor: '#FFD3E0',	|
shadowColor	shadowColor: '#CCCCCC',	shadowColor: '#CCCCCC',	|
shadowOpacity	shadowOpacity: 0.4,	shadowOpacity: 0.4,	shadowOpacity: -0.8, // velocity
rotate	rotate: {	rotate: {	rotate: {
rotate.x	x:80, // angle	x:80, // angle	x:-190, // angle, yet velocity
rotate.y	y:-35, // angle	y:-35, // angle	y:120, // angle, yet velocity
rotate.z	z:20, // angle	z:20, // angle	z:-40, // angle, yet velocity
	}	}	}
scale	scale: {	scale: {	scale: {
scale.x	x:2.5,	x:2.5,	x:-10, // velocity
scale.y	y:-3.5,	y:-3.5,	y:1.2, // velocity
	}	}	}
translate	translate: {	translate: {	translate: {
translate.x	x:30,	x:30,	x:-10, // velocity
translate.y	y:-10,	y:-10,	y:200, // velocity
translate.z	z:75,	z:75,	z:-120, // velocity
	}	}	}
subTranslate	subTranslate: {	subTranslate: {	subTranslate: {
subTranslate.x	x:80,	x:80,	x:-50, // velocity
subTranslate.y	y:-15,	y:-15,	y:10, // velocity
	}	}	}
scrollViewContentOffset Ti.UI.ScrollView	scrollViewContentOffset: {	scrollViewContentOffset: {	scrollViewContentOffset: {
scrollViewContentOffset.x	x:72,	x:72,	x:-155, // velocity
scrollViewContentOffset.y	y:-500,	y:-500,	y:188, // velocity
	}	}	}
CAShapeLayer Animations: ( the layer should be the first sublayer of proxy.view.layer )
strokeStart	strokeStart:0.5,	strokeStart:0.5,	strokeStart:-2.0, // velocity
strokeEnd	strokeEnd:1.0,	strokeEnd:1.0,	strokeEnd:2.0, // velocity
lineWidth	lineWidth:5.0,	lineWidth:5.0,	lineWidth:-8.0, // velocity
strokeColor	strokeColor:'#5A5A5A',	strokeColor:'#5A5A5A',	|
fillColor	fillColor:'blue',	fillColor:'blue',	|
===
Options
duration	duration: 1030,	||
easing	easing: 'default', easing: 'linear', easing: 'easeIn', easing: 'easeOut', easing: 'easeInOut', easing: 'easeInSine', easing: 'easeOutSine', easing: 'easeInOutSine', easing: 'easeInQuad', easing: 'easeOutQuad', easing: 'easeInOutQuad', easing: 'easeInCubic', easing: 'easeOutCubic', easing: 'easeInOutCubic', easing: 'easeInQuart', easing: 'easeOutQuart', easing: 'easeInOutQuart', easing: 'easeInQuint', easing: 'easeOutQuint', easing: 'easeInOutQuint', easing: 'easeInExpo', easing: 'easeOutExpo', easing: 'easeInOutExpo', easing: 'easeInCirc', easing: 'easeOutCirc', easing: 'easeInOutCirc', easing: 'easeInBack', easing: 'easeOutBack', easing: 'easeInOutBack',	||
springBounciness value between 0-20 default at 4	|springBounciness: 14,	|
springSpeed value between 0-20 default at 4	|springSpeed: 3,	|
tension	|tension: 10,	|
friction	|friction: 4,	|
mass	|mass: 20,	|
deceleration range of 0 to 1	||deceleration: 0.882,
delay	delay: 900,	delay: 900,	delay: 900,
repeatCount	repeatCount: 3,	repeatCount: 3,	repeatCount: 3,
addictive	addictive: true, // or false	addictive: true, // or false	addictive: true, // or false
repeatForever	repeatForever: true, // or false	repeatForever: true, // or false	repeatForever: true, // or false
autoreverse	autoreverse: true, // or false	autoreverse: true, // or false	autoreverse: true, // or false
	});	});	});

Besides, you could use POP.clear(myView) to remove all the pop animations attached to myView, and it could be chained with basic, spring or decay methods.

POP
.clear(myView)
.spring(myView, {
    ...
}, function(){
    // animation complete callback
});

Author

• @McDo

• email: mcdooooo@gmail.com

• twitter: do109