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
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.
###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, {
...
});
-
email: [email protected]
-
twitter: do109