/tipop

titanium client for facebook pop

Primary LanguageObjective-CMIT LicenseMIT

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.

*UPDATE: Built with 3.5.0.GA, READY FOR 64-bit.

Installation

Git-cloning the repository, unzip the guy.mcdooooo.tipop-iphone-1.0.2.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
center center: { center: { center: {
center.x x:160;
x:'5%';		 x:160;
x:'5%';		 x:-290;
// velocity
center.y y:420;
y:'4%';		 y:160;
y:'4%';		 y:-530;
// 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
} } }
===
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, {
    ...
});

Author