I've thought that a great addition to an iphone app would be the ability to have the OS X Dock implemented in the iphone. My idea is to have like 5 regular menu that can be chosen in my app and when you swipe your finger across the menu the individual icons would magnify and when you chose an option the icon would bounce while you waited.
I personally would love this in my apps, but I'm wondering if it could be done. Be it be too cpu intensive? Any idea if this could be done in Core Graphics or would you need OpenGL ES?
Thanks to all that respond.
5 is the exact number of icons that fit perfectly into a UITabBarController, providing an easy way to switch between views that conforms to the Apple iPhone Human Interface Guidelines, and will be very familiar to iPhone users.
Here's a video showing how to create an App with a UITabBarController:
http://www.screentoaster.com/watch/stVUpUQEVLQVteRl1eXFxf/iphonedev_101_uitabbarcontroller
If you still feel you really need to have something that looks like the OS X Dock, I'd recommend using Core Animation.
Create a custom view, and in the init code, add a CALayer for each dock icon. Implement the touchesMoved event to detect finger position, and modify the bounds and position properties for your icon layers to move/resize them. You'll have to fine tune your algorithm for adjusting icon sizes and the animation mode you use to try and match the behavior in OS X, but I believe it's just a linear distortion based on the distance from the cursor (or finger in this case).
Implement code to reset the icons to their default position, and launch whatever action you want for your icons in touchesEnded.
To bounce the icons, you could try animating the position using a CABasicAnimation with the kCAMediaTimingFunctionEaseInEaseOut timing function, and repeating and autoreverse enabled.
The Core Animation framework should work fine for the sorts of animations you're discussing (bouncing, scaling). I think it'll be a lot easier than OpenGL.
Here is a code snippet which should animate moving an icon to the y coordinate 148 over a 0.2 second duration:
[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];
The selector iconBounceAnimationDidStop:finished:context: represents a method which will be called when the animation completes. You can write that method so that it will move the icon back down to a starting position to complete the bounce.
I would probably use OpenGL for that kind of graphic processing. Texture mapping/scaling is done very efficiently in OpenGL.
That said, the problem with your idea is that this is going to be "an app to open other apps".
It's entirely doable with Core Animation, but you're going to get into a user interaction issue. On the Mac, there's a distinction between mouse drag and a click. But on the iPhone we only have the finger and we're used to direct interaction, meaning we tap up and down and it's selected. In this other mode, you're saying tap-drag-lift (to enlarge icon) may do something different than tap-lift (select). Also, when you drag your finger across the icon strip, the current (enlarged) icon is always the one directly under your finger and not visible, so you'll have to adjust for that.
Even though it's doable, you may want to think through the user experience. Even though it sounds sort of cool, my guess is that it'll take a lot of tweaking to get it to look and feel just right in a mouseless direct-interaction environment. I'd be surprised if Apple didn't already try it out and decide against it.
Related
I got an app that allows users to add content to a canvas. I would like to be able to offer the user an ability to move, rotate, resize, reflect this content. Currently I'm doing this with gestures, but would like to know if there is some sort of open-source widget that draws a box around the view and adds 4 buttons to do these functions:
rotate 90 degrees
rotate freely
resize
delete
Can anyone think of an open source framework that I can add to my project to create controls like the ones displayed?
I can probably build this by hand, but debugging gesture recognizers and view rotation is not the most fun thing, so I'm looking for something more polished.
Thank you!
Here's a link to an open source control on cocoa controls that looks like something you could use: TDResizerView.
"TDResizerView is used to resize and rotate an imageview with single finger"
Sounds like a good place to start from, even if you need to modify it.
I've never used this particular control though, so take my word for what it's worth.
edit: Also keep in mind that on iOS, users generally expect gestures. Forcing them to use the handles instead of pinching or rotating may be bad for your user experience, depending on why you want the handles instead.
In the Path iphone application, on the bottom left corner, there is a + sign button. When pressing it, it performs an animation (the + rotates and a bunch of other buttons emerge outwards).
For those that have seen these types of animations, how is this accomplished? Is this done via CAAnimations?
Thank you!
You would definitely want to use either Core Animation, or UIView's animation methods (which use Core Animation under the hood).
Check out https://github.com/levey/QuadCurveMenu to see one attempt to reimplement it.
I'm developing an application for iPad.
I want to make nice animations so that I can beautify my application.
For example, there are 4 main buttons/images in a view.
When tapping on one of them, a few more buttons/images will branch out.
It's like the 'parent button' will branch out to few 'child buttons'.
How are these kind of animations done?
Are there any good references or code snippets to refer to?
Thanks.
A good stating point would be the Core Animation demo's here:
https://github.com/neror/CA360
Run them in the iOS Simulator and checkout the code that creates the magic.
UIView animations would also be suitable for your example, and are a little easier to implement. There is a nice tutorial here:
http://www.raywenderlich.com/2454/how-to-use-uiview-animation-tutorial
Search on the term "Core Animation iOS" on your favorite search engine. You'll find information from Apple's Developer Central site, particularly the Core Animation Guide and Cookbook.
There are actually 2 main methods.
One is to use Core Animation, if it contains your desired path and animation.
The other is to use an animation game loop, where the app periodically calls a routine to redraw the view every frame time. An NSTimer or CADisplayLink can periodically (say at 24 or 30 or 60 Hz) call a routine doing a setNeedsDisplay, which then causes the view's drawRect to be called, etc. The some other periodic code can change some state (moving some X Y button positions, etc.) during or between each frame to provide the appearance of movement or other animation effect, when the view is redrawn. Or OpenGL can be used to redraw some animated 3D world as things move. You can even have each frame change in response to user input. This is the most flexible way to animate, and allows you to customize animations in ways that are impossible for Core Animation, but it uses more power and can be so CPU intensive as to be a lot slower than Core Animation as well.
I am developing a game for iPhone and I came across a question whether this can be done using UIAnimation or I have to switch to OpenGL.
If you see the picture above, you can realize there is a rectangle (it will have background image) having many holes in it. User is supposed to touch on holes and initiate the animation. The holes are actually on the image and are not some view. Do you know any article or tutorial I need to read in order to understand this can be done using UIAnimation?
It's more like chess. When you tap a hole, there is a view placed and moved at z-axis and then when you press the other hole, the view is moved to that hole and so on.
I believe it can be done with UIViews too. The holes can be made by using an image with "transparent" holes in it. You can place this UIView on top of a background image(if required). When touches are detected, you can animate another view on top of this view using addSubview:. You can keep this other view outside the screen bounds initially so that the animation seems like a sliding animation.
yes UIView is also an option in your case. if you feel that you will use high quality lots of graphic and will do lots of animation stuff at once on the screen, openGL will be the best or perhaps the gane you are making is a 2d game so you must consider COCOS2D "http://www.cocos2d-iphone.org/" for kick starting your game you'll surely get many effects and other glittering stuff with it. and bes of all it is openGL based..!! Performance will be too high for you..!!
Best of luck..!!
I'm trying to place a red tint on all the screens of my iPhone application. I've experimented on a bitmap and found I get the effect I want by compositing a dark red color onto the screen image using Multiply (kCGBlendModeMultiply).
So the question is how to efficiently do this in real time on the iPhone?
One dumb way might be to grab a bitmap of the current screen, composite into the bitmap and then write the composited bitmap back to the screen. This seems like it would almost certainly be too slow. In addition, I need some way of knowing when part of the screen has been redrawn so I can update the tinting.
I can almost get the effect I want by putting a red, translucent, fullscreen UIView above everything. That tints everything red within further intervention on my part, but the effect is much "muddier" than results from the composite.
So do any wizards out there know of some mechanism I can use to automatically composite the red over the app in similar fashion to what the translucent red UIView does?
I managed to somewhat make this work but with some side-effects:
I setup a UIView on top of all my app-views (attached to the window) which is not userInteractionEnabled and which is opaque
This UIView carries some custom drawRect-method which first fills the complete area with red color and then after having made a "screenshot" of my window-viewhierarchy I am rendering this image with
CGContextSetBlendMode( c, kCGBlendModeMultiply);
to the UIView.
To constantly update this UIView to the current state of the apps UIViews I constantly produce "screenshots" and render them as fast as possible.
I setup an NSTimer which is doing this snapshotting/rendering in a defined frequency and which is added to the the NSRunLoop for "Tracking".
RESULT: some really laggy response from the UI with several fancy effects, but still usable though if you do not set the frequency of snapshotting/rendering to high.
See screenshot here...
The result looks okay, but the usability really suffers a lot. I had a look at the OpenGL-examples before trying this aproach, but OpenGL is a whole lot of different (mostly C) code which seems to be very near to the hardware and which gives you a real headache.
So, the described approach is what I will shoot for with my next app. I hope Apple accepts it even though it degrades UXP during nightvision mode. They should simply make CALayer filter-backed then my problem will definitely be solved a whole lot better and performing nicely.
You could try this: subclass UIView. Add code to -drawRect method to draw the overlay. Make your UIView subclass pose as UIView everywhere in your app with
class_poseAs ([CustomUIView class], [UIView class]);