Git Product home page Git Product logo

tipop's Introduction

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

tipop's People

Contributors

mcdo avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

tipop's Issues

Get errors on iPad sometimes

The same code on the iPhone runs relatively smoothly, but on the iPad with the same code, I get the following error message every so often:

-[__NSCFArray insertObject:atIndex:]: index (27) beyond bounds (27) at animations.js (line 193)

Here is my code that i'm using to stop a spinning imageView and set it back to the correct position (which is triggering the error

POP.clear(navButton).spring(navButton,{rotate:{z:0}, delay:0,easing:'easeOutCubic'},function(){
        Ti.API.info('[Spinning completed and image straightened out');                                  
                                        });     

Samples and examples

Hello, thanks for this project, you have any demo app with some sample code examples by chance?

Is there a way to reset view position to its natural state?

I am using this amazing module to spin a circle around 360degrees to simulate a loading circle. When my content is loaded I use the .clear method to stop the spinning, successfully.

However, the place the spinning stops is random, so my logo looks like its upside down, or at 90degrees or at some weird angle relative to its starting position. (This is when using decay)

Is there any way to have it have everything go back to their normal original position/orientation?

Thanks!

*** EDIT. I see this is a more complicated issue related to the POP framework itself ( facebookarchive/pop#13 ). SO I'm closing this now and otherwise thank you for this excellent module

Chaining animations

How do I chain an animation so that I have a different animation when it starts and when it completes?

Thanks

iOS 7

Hi McDo!

thanks for making this module! You are great!
I tested this with iOS 7 on both an device and the simulator.

I get an error and the app crashes immiditly without starting titanium related things.
Do you know about that already?

iOS bug with "unfinished" animations using new callback

Hello, first of all, thank you so much for this module, it's really great!
Also, thank you for implementing the new callback option, it really is very useful.

I ran into what looks like a bug when I tried to use it to animate transition between windows, something like:

// Create closing animation
POP.basic($.window, {
left: Ti.Platform.displayCaps.platformWidth,
duration: 350,
easing: 'easeOutCubic'
}, function() {
$.window.close();
});

I called the above method whenever a "back" button was pressed in my view.

This would work 9 out of 10 times, but sometimes, only sometimes, it looks like the animation never completes, and therefore the window is never closed... When that happens my layout instantly becomes unresponsive, and what's worse, the app does NOT crash, leaving the user to experience a "freeze-like" situation.

Is this a bug or am I doing something wrong? Calling POP on a Window element could be the problem?

Thanks in advance for any inputs!

App crashes when I have multiple POP animations firing at the same time. Is there any way to try to detect if another POP is running or queue successive animations?

I have several POP animations which can't be easily chained after each other using the provided callback feature due to the way my app is structured.

Was wondering if there is any way to add a feature to detect if POP is already animating something, and if so I can try to find a way to create a delay before firing a new animation

Thanks!

Titanium.Media.vibrate() not working inside of FBPOP callback

Hi @McDo,

It seems as if the Titanium.Media.vibrate() throws an error if being executed inside of an FBPOP callback function. Any idea as to why this may be happening?

Error message:
[ERROR] : message = "undefined is not an object (evaluating 'Titanium.Media.vibrate')";

Use case example:
FBPOP.basic(myView, {
scale : {
x : .8,
y : .8
},
duration : 300
}, function() {
Titanium.Media.vibrate();
});

P.S. - I've been using this module everywhere & just want to say thanks!

· Jason

The standard way to access an instance to use other/different properties?

Hey, love this port, thank you for that again!

What is the better way to access an instance to use other/different properties?

ex:

_button.addEventListener('click', function tapMe (_evt) {
  _timerRunning = !_timerRunning;

var myinstance = POP.spring(_button, {
    springBounciness: 10.0,
    pringSpeed: 10.0
   });

if(_timerRunning){

    myinstance.width = 37,
    myinstance.height = 37,

}else{
    myinstance.width =  44,
    myinstance.height =  44,
}

 });
´´´

If I do this way I get errors, make since?

CAShapeLayer Animation example?

Hi,

Great module, been using it lots.

I want to create a circular countdown for my app without using bitmap images. Could the CAShapeLayer Animations do this?

This is the kind of thing I want to do:
goo.gl/qJzoPC

Have you got any examples using arcs etc.?

Thanks.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.