Genie or similar effect to add to favorites

Question

I have an iPhone app with All and Favorites tabs containing standard layouts of the main parts. When on the tab "All" the user can select "Add to Favorites".

I am looking for a good visual queue to tell the user that after that the item will be available from the Favorites tab.

Is there something like a genie so that I can point it out? If not, what is the standard way to notify the user of this? Thanks!

Answer 1

How about animating Mail used to move messages to a folder? It may be familiar to your users, and it should not be difficult to implement using CAKeyframeAnimation.

Answer 2

The “real” genius effect implemented in Mac OS X is a non-linear transformation of the original image. One way to implement it is to use Core Image filters (which are private / undocumented on iOS but are available on Mac).

You write a filter with the "time" parameter. For each value of the time parameter for a given time interval (say, {0.2}), you need to find out the source coordinate for each destination coordinate in the image. If the source coordinate does not match the borders, set the alpha to zero, otherwise return the value of the input image to the original 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); cw = a; return c; } 

I have a blog post with more details and Quartz Composer project here: Genie Effect Post

Answer 3

There are several ways to do this. If you want to use the standard “Suck” effect, you should see this answer (or this one ). However, both of these answers use the setAnimationPosition method for UIView, which is a private method, and you will receive a rejected application from the App Store (possibly not the desired result).

You can only use animation, keeping the default animation position of 0.0 (Suck in the upper left corner) with 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 it themselves ... great programmers will notice that it is already done and steal it :)

https://github.com/Ciechan/BCGenieEffect is an open source project to do just that.

Answer 4

I am starting to combine the effect of gin animation for the iPhone, git: //github.com/rmd6502/Genie.git. Now it is unbearably slow, since I do all the calculations “manually”, and not use the hardware, but improvements are expected.

Any experienced GL developers who would like to contribute, please feel free to wag and submit traction requests!