I have a iPhone application with 'All' and 'Favourites' tabs containing a standard master detail layouts. When on the 'All' tab a user can select 'Add to Favourites'.
I'm looking for a good visual queue to indicate to the user that after doing so the item will be accessible from the 'Favourites' tab.
Does something like the 'genie' effect exist so that I can indicate this? If not, what is the standard way of notifying a user of an even like this? Thanks!
How about the animation Mail uses for moving a message into a folder? It might be familiar to your users, and it shouldn't be hard to implement using a CAKeyframeAnimation.
The "real" genie effect, as implemented in Mac OS X, is a non-linear transformation of the source image. One way to implement it is using Core Image filters (which is private / undocumented on iOS, but available on the Mac).
You write a filter with a 'time' parameter. For each value of the time parameter in a given time interval (say {0,2}) you need to figure out the source coordinate for each destination coordinate in the image. If the source coordinate is out of bounds, set alpha to zero, otherwise return the input image value at the source coordinate.
kernel vec4 ASGenieKernel(sampler src, float t, float D, float ytarget) {
vec2 takeFrom; // In destination coordinates.
vec2 original = samplerCoord(src);
vec2 size;
float g, t2, a;
vec4 c;
size = samplerSize(src);
t2 = compare(t-1.0,t,1.0);
takeFrom.x = original.x + compare(t-1.0,0.0,1.0)*size.x*(t-1.0);
a = compare(takeFrom.x, 0.0, 1.0);
a = compare(a-0.5,0.0,compare(takeFrom.x-size.x, 1.0, 0.0));
// Apply an envelope. This is where non-linearity is introduced.
t2 = t2 * (1.0 - tan_(1.57*original.x/size.x - 0.78539))*0.5;
g = 1.0 - D / size.y;
takeFrom.y = (original.y - t2*ytarget*g)/(1.0-t2*g);
a = compare(a-0.5,0.0,compare(takeFrom.y, 0.0, 1.0));
a = compare(a-0.5,0.0,compare(takeFrom.y-size.y, 1.0, 0.0));
takeFrom.x = compare(takeFrom.x, 0.0, takeFrom.x);
takeFrom.x = compare(takeFrom.x-size.x, takeFrom.x, 0.0);
takeFrom.y = compare(takeFrom.y, 0.0, takeFrom.y);
takeFrom.y = compare(takeFrom.y-size.y, takeFrom.y, 0.0);
c = sample(src, takeFrom);
c.w = a;
return c; }
I've got a blog post with some more details and a Quartz Composer project here: Genie Effect blog post
There are a number of ways to accomplish this. If you want to use the standard "Suck" effect you should see this answer (or this one)... However, both of those answers leverage the "setAnimationPosition" method of UIView which is a private method, and will get your application rejected from the App Store (probably not the desired result).
You can still use just the animation, keeping the default animation position of 0,0 (Suck to the top left corner) using this code:
[UIView beginAnimations:@"suckEffect" context:nil];
[UIView setAnimationTransition:(UIViewAnimationTransition)103 forView:self.view cache:NO];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
[UIView setAnimationDuration:kAnimationDuration];
// Remove Subview
[UIView commitAnimations];
Finally, while good programmers could write this themselves... great programmers will notice that it's already been done and steal it :)
https://github.com/Ciechan/BCGenieEffect - Is an open source project for doing just this.
I'm starting to put together a genie animation effect for iPhone, at git://github.com/rmd6502/Genie.git . Right now it's unbearably slow, as I'm doing all the calculations 'manually' rather than leveraging the hardware, but improvements are forthcoming.
Any experienced GL developers who would like to contribute, please feel free to fork and send pull requests!
