IOS: Transition with modal ViewContorller - ios

I have custom action sheet that I create as VC. I present it with 'overCurrentContex' with the code
[self presentViewContoller:myVC animated:YES completion:nil];
I need to add dark background to it.
I added it with code
self.view.backgroundColor = [UIColor colorWithWhite:0.5 alpha:0.5];
But as I present it modally it slides from the bottom with my dark backgroundColor.
I need that this color appears like Fade.
How can I do it? I need to add custom transition to it?

As I understand it, you're wanting to have the ViewController slide up from the bottom then have the background color change (transition) to a darker color of your choice?
I'd probably use the alpha value of the background and animate it to become more opaque to achieve that effect.
Here's a possible animation of the alpha value using an animation block:
self.view.alpha = 0.0f;
float alphaValue = 1.0f;
[UIView animateWithDuration:1.0 delay:0.0 options:UIViewAnimationOptionCurveEaseInOut
animations:^(void) {
//The stuff you want to animate
self.view.alpha = alphaValue;
}
completion:^(BOOL finished){
//anything you want to do right after the animation is done
}];

Related

Change Transition Tint/Fade Colour of UIViewAnimationOptionTransitionFlipFromLeft

I'm switching between two container views in my program with UIViewAnimationOptionTransitionFlipFromLeft as such:
[UIView transitionWithView:self.view
duration:1.0
options:UIViewAnimationOptionTransitionFlipFromLeft
animations:^{
self.timerPage.hidden = true;
self.countdownPage.hidden = false;
} completion:nil
];
It works fine but what bugs me is the fact that my views are faded in and out to black, i would like the colour instead to be white. I've searched various threads but i couldn't find a solution to this exact problem.
I can't upload an image yet but the image in this question shows exactly what I'm talking about. The view fades to black during transition: UIView transitionFromView: how can I do black background during transition?
You can get the behavior you want by adding a subview or sublayer to your view with a clear background color and then setting the background color of that to white in your animation block.
UIView *whiteView = [[UIView alloc] init];
whiteView.frame = self.button.bounds;
[self.button addSubview:whiteView];
[UIView animateWithDuration:0.45 animations:^{
whiteView.backgroundColor = [UIColor whiteColor];
}];

Navigation Bar jumping when presenting view controller via UIPresentationController subclass

I'm building an iOS 8 app and using UIPresentationController to present a view controller in a custom way. (see my previous question about this here: Replicating the style of the iOS Mail App's Compose Function).
The issue I'm having is that when I present the controller, the navigation bar starts off as 64 points tall and then jumps/shrinks back to 44 once its presentation is finished. My guess is that the view controller realizes it is not covering the status bar and so it shrinks itself down once it comes to its final resting position. I'd like for the navigation bar to be 44 points tall the entire time and not jump/shrink.
The image below is what the view controller looks like at the end of the presentation. It is also what I want it to look like the entire time. Any thoughts on how to keep the navigation bar at 44 points the entire time?
UPDATE (3/24/2015):
I referenced a blog post from a while back to find some more information on this issue. Basically, UINavigationController draws its navigation bar either 64 or 44 points tall depending on if its view's frame is matched up with the app's window or not. So I need some way of telling the navigation controller that its final resting position will not be lined up with the window, and that the nav bar should be drawn 44 points tall.
http://blog.jaredsinclair.com/post/61507315630/wrestling-with-status-bars-and-navigation-bars-on
Finally found an answer to this question. It's explained in this previous stack overflow post:
Navigation bar gets adjusted after calling completeTransition: in custom transition
Thank you for not making me use my hard earned rep to start a bounty!
I had an issue a bit like yours, where the navigation bar would resize after [transitionContext completeTransition:YES] was called, based on visual contiguity of the navigationBar's frame sharing a border with the UIWindow's top. My navigation bar was nowhere near the top, so it resized itself to 44px instead of the normal "extend-under-the-status-bar" 64px. To get around this, I simply completed the transition before I animated my toViewController's alpha and position. That is, once everything was positioned properly to be animated in, I called completeTransition: to let the navigationController adjust itself while invisible. So far, this hasn't had any unintended side-effects, and the additional alpha in, move frame animations still continue after you completeTransition.
Here is my animateTransition: method in my presentation animator class that conforms to <UIViewControllerAnimatedTransitioning>
UIViewController *toViewController = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
UIViewController *fromViewController = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
UIViewController *presentedViewController = self.presenting ? toViewController : fromViewController;
UIView *containerView = [transitionContext containerView];
NSTimeInterval animationDuration = [self transitionDuration:transitionContext];
if (self.presenting) {
containerView.alpha = 0.0;
presentedViewController.view.alpha = 0.0;
[containerView addSubview:presentedViewController.view];
[UIView animateWithDuration:animationDuration delay:0 options:kNilOptions animations:^{
containerView.alpha = 1.0;
} completion:^(BOOL finished) {
presentedViewController.view.frameTop += 20;
//I complete the transition here, while my controller's view is still invisible,
// but everything is in its proper place. This effectively positions everything
// for animation, while also letting the navigation bar resize itself without jarring visuals.
[transitionContext completeTransition:YES];
//But we're not done quite yet...
[UIView animateWithDuration:animationDuration delay:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
presentedViewController.view.frameTop -= 20;
presentedViewController.view.alpha = 1.0;
} completion:nil];
}];
}
if (!self.presenting) {
[UIView animateWithDuration:animationDuration delay:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
presentedViewController.view.alpha = 0.0;
presentedViewController.view.frameTop += 20;
} completion:^(BOOL finished) {
[UIView animateWithDuration:animationDuration delay:0 options:kNilOptions animations:^{
containerView.alpha = 0.0;
} completion:^(BOOL done) {
[transitionContext completeTransition:YES];
}];
}];
}
Hope this helps anyone that finds themselves in my position!

Fading from one view to another without transitioning through black

I am trying to fade one view in while fading the other out using animateWithDuration and changing the alpha values of each. The problem I'm having is that the views seem to fade through a black background. I would like to keep the transitioning background a white color being that both of my views have white backgrounds.
How can I fade between my two views without transitioning through a black background?
Here's my code:
[self.view1 setAlpha:0.0];
[self.view addSubview:self.view1];
[UIView animateWithDuration:0.5
animations:^{self.view1.alpha = 1.0;self.view2.alpha = 0.0;}
completion:^(BOOL finished){[self.view2 removeFromSuperview];}];
How about something like this:
[UIView transitionWithView:self.view
duration:0.4
options:UIViewAnimationOptionTransitionCrossDissolve
animations:^{
[self.view addSubview:self.view1];
}
completion:^(BOOL finished) {
[self.view2 removeFromSuperview];
}];
Use: animateWithDuration:animations:completion:
Set the new image view alpha to 0.
Place the new image view in front of the current image view.
In animations: set alpha of the new image view to 1.0.
In completion: handler cleanup how ever you want.

iOS Graphic Appear and Fade Out with Alpha

I've been reading about UIView animateWithDuration which I'm trying to use so when a button is pressed a graphic appears then slowly fades out (i.e. alpha is set to 0).
I'm using the code below in my viewdidload just for test purposes however its not working:
[UIView animateWithDuration:10 animations:^{
self.completeImage.alpha = 1.0;
self.completeImage.alpha = 0.5;
self.completeImage.alpha = 0.0;
}];
Any ideas?
Thanks.
That is not working because automatically it sets the alpha to 0.0;
The 3 lines of code are executed at the same time (one after the other).
The proper way to use the UView animation block it is like this:
self.completeImage.alpha = 0.0;
[UIView animateWithDuration:2.0
animations:^{
// do first animation
self.completeImage.alpha = 1.0;
}
completion:^(BOOL finished){
[UIView animateWithDuration:2.0
animations:^{
// do second animation
self.completeImage.alpha = 0.0;
}
completion:^(BOOL finished){
;
}];
}];
Hope this achieve what you are looking for.
In addition:
" I'm trying to use so when a button is pressed a graphic appears
then slowly fades out (i.e. alpha is set to 0)."
As per your above information in the question, addition of the code in viewDidLoad will not prove fruitful. You need to add this code in the action target method of your button in order to play the animation on click of a button. Generally if you're using the nib, then the action method will be like below:
-(IBAction)on_pressing_my_button:(id)sender
{
///your animation code goes here..
}

How to cross-fade a UIScrollView back to the beginning

I have a horizontally-scrolling paging UIScrollView in an iPad app, containing lots of pages. On the last page, I tap on a button on the screen to reset back to page 1. I would like to be able to cross-dissolve this transition, but it doesn't seem to work:
[UIView transitionWithView:self.view duration:1.0 options:UIViewAnimationOptionTransitionCrossDissolve|UIViewAnimationOptionAllowAnimatedContent animations:^{
pagingScrollView.contentOffset = CGPointZero;
} completion:^(BOOL finished) {
[self refreshPages];
}];
I read that adding UIViewAnimationOptionAllowAnimatedContent will allow all content to transition, but it doesn't work. Instead, the screen cross-dissolves to the background colour, and when the transition is complete, the first page just appears.
you cannot fade-out a UIView (the scroller) AND simultaneously fade-in the same view...
you could just using different UIViews...
what you can do is:
1) fadeOut the scroller in the current position (to the backGround)
2) while the scroller is invisible, move it to the right position (with no animation)
3) fadeIn the scroller from the backGround
something like:
// START FIRST PART OF ANIMATION
[UIView animateWithDuration:0.5 delay:0.0 options: options:UIViewAnimationOptionTransitionCrossDissolve|UIViewAnimationOptionAllowAnimatedContent animations:^{
pagingScrollView.alpha = 0;
} completion:^(BOOL finished) {
// FIRST PART ENDED
// MOVE SCROLLER (no animation)
pagingScrollView.contentOffset = CGPointZero;
// START SECOND PART OF ANIMATION
[UIView animateWithDuration:0.5 delay:0.0 options: options:UIViewAnimationOptionTransitionCrossDissolve|UIViewAnimationOptionAllowAnimatedContent animations:^{
// fadeIn - animated
pagingScrollView.alpha = 1;
} completion:^(BOOL finished) {
// ANIMATION ENDED
[self refreshPages];
}];
}];
NEW EDIT:
thanks to amadour, who taught me something with his comments,
i hope he could add an answer of his own, i would vote for him
anyway, to answer to jowie original question:
i got the right animation just moving the contentOffset setting out of the animation block,
and removing UIViewAnimationOptionAllowAnimatedContent (not really needed), and passing pagingScrollView as parameter for transitionWithView
this worked for me:
pagingScrollView.contentOffset = CGPointZero;
[UIView transitionWithView:pagingScrollView duration:3.0 options:UIViewAnimationOptionTransitionCrossDissolve animations:^{
// pagingScrollView.contentOffset = CGPointZero; // move up, outside of animation block
} completion:^(BOOL finished) {
NSLog(#"-->> END amimation");
[self refreshPages];
}];

Resources