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 5.2.2.GA
Installation
Git-cloning the repository, unzip the guy.mcdooooo.tipop-iphone-1.0.6.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 |
| === | |||
| Callback | }, function() { | }, function() { | }, function() { |
| ... | ... | ... | |
}); |
}); |
}); |
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
-
email: mcdooooo@gmail.com
-
twitter: do109