Machine Style Style

Question

Recently, I have been programming for the iPhone, and now I'm heading to the iPad domain. The concept that I want to implement is based on navigation, similar to a time machine in the secondary school. In short, I have several views that can be panned and scaled like any regular view. However, the views are stacked on top of each other using the third dimension (in this case, depth). the user will navigate in any way, in this case, choosing a letter, after which the application will fly through the presentation until it reaches the presentation of the selected letter.

My question is: can anyone give a complete final code for how to do this? Just kidding. :) What I need is a push in the right direction, because I'm not sure how to start doing it, and whether it is possible using the available framework. Any advice is welcome

Thanks!

Answer 1

Core Animation, or rather, the UIView animation model built on Core Animation, is your friend. You can create an interface similar to Time Machine with your views by placing them in a vertical line in your parent view (using their center properties), with those located further down so that this line is slightly smaller than the ones listed below ("in front of") (using their transform properties, with the CGAffineTransformMakeScale function) and setting their z-index of their layers (get the layer using the views layer property, then set it to zPosition ) so that the other lines appear beyond the rest. Here is a sample code.

 // animate an array of views into a stack at an offset position (0 has the first view in the stack at the front; higher values move "into" the stack) // took the shortcut here of not setting the views' layers' z-indices; this will work if the backmost views are added first, but otherwise you'll need to set the zPosition values before doing this int offset = 0; [UIView animateWithDuration:0.3 animations:^{ CGFloat maxScale = 0.8; // frontmost visible view will be at 80% scale CGFloat minScale = 0.2; // farthest-back view will be at 40% scale CGFloat centerX = 160; // horizontal center CGFloat frontCenterY = 280; // vertical center of frontmost visible view CGFloat backCenterY = 80; // vertical center of farthest-back view for(int i = 0; i < [viewStack count]; i++) { float distance = (float)(i - offset) / [viewStack count]; UIView *v = [viewStack objectAtIndex:i]; v.transform = CGAffineTransformMakeScale(maxScale + (minScale - maxScale) * distance, maxScale + (minScale - maxScale) * distance); v.alpha = (i - offset > 0) ? (1 - distance) : 0; // views that have disappeared behind the screen get no opacity; views still visible fade as their distance increases v.center = CGPointMake(centerX, frontCenterY + (backCenterY - frontCenterY) * distance); } }]; 

And this is how it looks, with a few random views:

Answer 2

Do you mean something like this on the right?

If so, it should be possible. You will need to arrange the views, as in the image, and animate them back and forth. As far as I know, there are no frameworks for this.

Answer 3

It is called Cover Flow, and is also used in iTunes to view artwork / albums. Apple seems to have bought the technology from a third party and also patented it. However, if you use google for the ios stream, you will get a lot of hits and code to point you in the right direction.

I did not look, but I would think that this is possible in the iOS library, but I do not know for sure.