I would like to imitate the minimize window effect of OS X on the UIView's iPhone. I was thinking about making two animations: the first one extend and distort the view and the second one reduce the view!
What do you think? My problem is to distort the view!
Do you have any idea how I could make the whole thing?
There has been a lot of discussion on this see the response from Brad Larson on How can I replicate the trashing animation of Mail.app
Related
I have a very intriguing obstacle to overcome. I am trying to display the live contents of a UIView in another, separate UIView.
What I am trying to accomplish is very similar to Mission Control in Mac OS X. In Mission Control, there are large views in the center, displaying the desktop or an application. Above that, there are small views that can be reorganized. These small views display a live preview of their corresponding app. The preview is instant, and the framerate is exact. Ultimately, I am trying to recreate this effect, as cheaply as possible.
I have tried many possible solutions, and the one shown here is as close as I have gotten. It works, however the - (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx method isn't called on every change. My solution was to call [cloneView setNeedsDisplay] using a CADisplayLink, so it is called on every screen refresh. It is very near my goal, but the framerate is extremely low. I think that [CALayer renderInContext:] is much too slow.
If it is possible to have two CALayers render the same source, that would be golden. However, I am not sure how to approach this. Luckily, this is simply a concept app and isn't destined for the App Store, so I can make use of the private APIs. I have looked into IOSurface and Quartz contexts, but I haven't been able to solve this puzzle so far. Any input would be greatly appreciated!
iOS and OSX are actually mostly the same underneath at the lowest level. (However, when you get higher up the stack iOS is actually largely more advanced than OSX as it is newer and had a fresh start)
However, in this case they both use the same thing (I believe). You'll notice something about Mission Control. It isolates "windows" rather than views. On iOS each UIWindow has a ".contentID" property and CALayerHost can use to make the render server share the render context between the 2 of them (2 layers that is).
So my advice is to make your views separate UIWindows and get native mirroring for free-(ish). (In my experience the CALayerHost takes over the target layers place with the render server and so if both the CALayerHost and the window are visible the window won't be anymore, only the layer host will be (which the way they are used on OSX and iOS isn't a problem).)
So if you are after true mirroring, 2 copies of it, you'll need to resort to the sort of thing you were thinking about.
1 Option for this is to create a UIView subclass that uses
https://github.com/yyfrankyy/iOS5.1-Framework-Headers/blob/master/UIKit.framework/UIView-Rendering.h#L12
this UIView private method to get an IOSurface for a target view and then using a CADisplayLink once per second get and draw the surface.
Another option which may work (I'm not sure as I don't know your setup or desired effect) is possibly just to use a CAReplicatorLayer which displays a mirror of a CALayer using the same backing store (very fast and efficient + public stable API).
Sorry I couldn't give you a fixed, "this is the answer reply", but hopefully I've given you enough ideas and possibilities to get started.
I've also included some links to things you might find useful to read.
What's the magic behind CAReplicatorLayer?
http://aptogo.co.uk/2011/08/no-fuss-reflections/
http://iphonedevwiki.net/index.php/SBAppContextHostManager
http://iphonedevwiki.net/index.php/SBAppContextHostView
http://iphonedevwiki.net/index.php/CALayerHost
http://iky1e.tumblr.com/post/33109276151/recreating-remote-views-ios5
http://iky1e.tumblr.com/post/14886675036/current-projects-understanding-ios-app-rendering
I am trying to switch between UIViews by making it look like you are turning a page in a book.
The UIViewAnimationTransitionCurlUp is pretty close if I could get it to curl toward the Left or Right. Is this possible?
I have tried to use the CATRansition but none of the animation types come close to a page turning.
Any suggestions on how to create this page animation transition that would turn a page toward the left or right?
Edit (June 2012) : It is now possible to use the native Apple implementation, check:
Page View Controller: Note that this is available since iOS 5.0.
Also check this other libs/methods:
Leaves: Not so realistic, but really easy to use.
PageCurl: Really nice effect, easy to use.
Implementing iBooks page curling using a conical deformation algorithm: Amazing, but it's just a proof of concept, difficult to expand.
There's nothing in the SDK that will do this for you. If you want this effect, you'll have to roll your own. "Classics" does a nice job with the page-flip animation.
You can manage this effect by changing the orientation of the UIViewController where the animation takes place.
I'm working on an iPhone game that involves only two dimensional, translation-based animation of just one object. This object is subclassed from UIView and drawn with Quartz-2D. The translation is currently put into effect by an NSTimer that ticks each frame and tells the UIView to change its location.
However, there is some fairly complex math that goes behind determining where the UIView should move during the next frame. Testing the game on the iOS simulator works fine, but when testing on an iPhone it definitely seems to be skipping frames.
My question is this: is my method of translating the view frame by frame simply a bad method? I know OpenGL is more typically used for games, but it seems a shame to set up OpenGL for such a simple animation. Nonetheless, is it worth the hassle?
It's hard to say without knowing what kind of complex math is going on to calculate the translations. Using OpenGL for this only makes sense if the GPU is really the bottleneck. I would suspect that this is not the case, but you have to test which parts are causing the skipped frames.
Generally, UIView and CALayer are implemented on top of OpenGL, so animating the translation of a UIView already makes use of the GPU.
As an aside, using CADisplayLink instead of NSTimer would probably be better for a game loop.
The problem with the iPhone simulator is it has access to the same resources as your mac. Your macs ram, video card etc. What I would suggest doing is opening instruments.app that comes with the iPhone SDK, and using the CoreAnimation template to have a look at how your resources are being managed. You could also look at allocations to see if its something hogging ram. CPU could also help.
tl;dr iPhone sim uses your macs ram and GFX card. Try looking at the sequence in Instruments to see if theres some lag.
I am curious as to whether or not there is an open source solution to replicate the flash button in the iOS camera applicaiton.
I have seem many other apps use this, but there doesn't seem to be a native way, so I assume there is a common source out there.
It is possible to get the flash button by using UIImagePickerController class, but most of the camera apps out there don't seem to be using this (or perhaps they subclass it, which is against apple's terms).
I am looking for a way to replicate the expanding behavior of the button. Any thoughts?
It doesn't sound too hard.
The way I'd do it is to separate the right curve of the button (as images), and make a UIView that has the left part of the button and the right curve as subviews.
When it's tapped, slide the right curve and animate the extra buttons in.
You could use a stretchable UIImage (see UIImage documentation) and then just animate the frame changing.
In the Apple 2010 WWDC Sample code (downloadable via iTunes, otherwise I'd post it here), there are several sample applications which use this control. They call the class ExpandyButton. I realize I'm answering my question, but hopefully someone out there can find this useful.
While looking for a similar solution to this problem I came across this code which was extremely helpful. Similar to ExpandyButton it fit my needs better.
https://github.com/ddebin/DDExpandableButton
Does anyone knows how to build a flip animation like the flipboard app?
Thanks
If you mean the page flip transition, have a look at the OpenGL transition class I wrote.
https://github.com/epatel/EPGLTransitionView
I added a couple of example transitions and one of them are a "page flip" transition.
Have a look at FlipView, it tries to replicate Flipboard app for iPad
Some of the features implemented are:
Multiple flip (just click on last pagination if u r at first or second for multi-flip).
Views arrangement if orientation changed like Flipboard
Selection of random layout
Hopefully this link is of some help to you :D
I remember from watching an interview with the CEO saying that all the flipping boards and the animations are done using HTML5! I can not find it now sorry :(
I managed to find the non-broken link to FlipView example on github: https://github.com/Reefaq/FlipView
Hope it helps
I've been looking for the same for weeks. If you use the 'origami' transition in the ipad's photo app, you'll see that it has a very similar flipboard effect. Though someone with much more programming chops can probably give you the specifics, I think they use core animation. In it, you can define the anchor point and basically transform the uiview along the z axis.