OS X Dock in Iphone app?
I thought that a great addition to the iphone app would be the ability to have an OS X dock implemented in the iphone. My idea is to have like 5 regular menus that can be selected in my application, and when you swipe through the menu, the individual icons will enlarge and when you select an option, the icon will bounce while you were waiting.
I personally would love this in my applications, but I'm wondering if this can be done. Too intense? Any idea if this can be done in Core Graphics or would you need OpenGL ES?
Thanks to everyone who answers.
a source to share
The Core Animation framework should work just fine for the kinds of animations you're discussing (bouncing, scaling). I think it will be much easier than OpenGL.
Here is a code snippet that should animate the movement of the icon to the y coordinate 148 with a duration of 0.2 seconds:
[UIView beginAnimations: @"iconBounce" context: NULL];
[UIView setAnimationDelegate:self];
[UIView setAnimationDidStopSelector:@selector(iconBounceAnimationDidStop:finished:context:)];
CGRect iconPosition = iconImageView.frame;
iconPosition.origin.y = 148; //bounce up
iconImageView.frame = iconPosition;
[UIView setAnimationDuration: 0.2];
[UIView commitAnimations];
A selector iconBounceAnimationDidStop:finished:context:
is a method that will be called when the animation finishes. You can write this method to move the icon back to its original position to complete the bounce.
a source to share
5 is the exact number of icons that fit perfectly into the UITabBarController, making it easy to switch between views following the Apple iPhone Interface Guidelines and will be familiar to iPhone users.
Here's how to create an application using the UITabBarController:
http://www.screentoaster.com/watch/stVUpUQEVLQVteRl1eXFxf/iphonedev_101_uitabbarcontroller
If you still feel like you really want something similar to the OS X Dock, I would recommend using Core Animation.
Create your own view and in the initialization code add a CALayer for each dock icon. Add a touch Influencing event to detect the position of your finger and change the borders and position properties for icon layers to move / resize them. You will need to fine tune your algorithm to adjust the icon sizes and animation mode you use to try and match the behavior in OS X, but I believe this is just linear distortion based on distance from the cursor (or finger in that case).
Make the code to reset icons to their default position and run whatever action you want for your icons in touchEnded.
To bounce icons, you can try animating the position with CABasicAnimation using the kCAMediaTimingFunctionEaseInEaseOut sync function and enable repetition and autoreverse.
a source to share
This is completely doable with Core Animation, but you will run into user experience issue. On Mac, there is a difference between drag and drop and click. But on the iPhone, we only have a finger, and we're used to direct interaction, that is, we press up and down and select it. In this other mode, you say that clicking on the drag (to zoom in) can do something other than undo (select). Also, when you drag your finger across the icon strip, the current (zoomed) icon is always under your straight finger and not visible, so you'll have to adjust to that.
While this is possible, you can think about the user experience. As cool as it sounds, I imagine it will take a lot of effort to make it look and feel right in a desolate direct interaction environment. I'd be surprised if Apple hadn't tried and decided yet.
a source to share