Search code examples
iphoneobjective-cioscocoa-touchcore-animation

how to make status, tab and navigation bar animate like in the photos app


I'm making an app that uses the full screen to display an image like the photos app. Also like the photos app, I'm trying to make the navigation bar, status bar, and tab bar fade out after a certain amount of time or after the user taps the screen. I messed around a little with the UIView animation methods (ie animateWithDuration) but realized I'd need to use Core Animation in order accomplish what I wanted done.

So far I'm messing around with core animation and have come across a bunch of problems that I'm unsure how to solve:

a) is it possible to delay an animation before it starts (without using a separate thread).

b) How can I use Core Animation to make the status bar animate since we don't have access to the status bars view / layer?

c) How should I go about stopping the animations ie if the user taps the screen while the bars are fading out? Should I group them together in a cat transaction?

Just interested also in what approach people would take in trying to accomplish this task. So far this is all I have lol:

CABasicAnimation *fader = [CABasicAnimation animationWithKeyPath:@"opacity"];
[fader setDuration:2.0];
[fader setFromValue:[NSNumber numberWithFloat:.75]];
[fader setToValue:[NSNumber numberWithFloat:0]];
[[[[self tabBarController] tabBar]layer]addAnimation: fader forKey:@"BigFade"];

CABasicAnimation *fader2 = [CABasicAnimation animationWithKeyPath:@"opacity"];
[fader2 setDuration:2.0];
[fader2 setFromValue:[NSNumber numberWithFloat:1]];
[fader2 setToValue:[NSNumber numberWithFloat:0]];
[[[[self navigationController] navigationBar]layer]addAnimation: fader2 forKey:@"BigFade2"];

Solution

  • This code right here is pretty much a replica of a lot of the functionality in the photos app, and in it you can see how to make your views transparent and have them disappear after a certain amount of time / when the user taps the screen. https://github.com/kirbyt/KTPhotoBrowser.