How to give sliding animation to a single UIView? - ios

I have one screen, call it video screen where one video is shown with details and comments just like youtube. Now this view is slidable, means whenever user slides the screen, next or previous video comes by changing whole content view.
I am using [UIView transitionWithView] to give it sliding effect. By changing frame of content view, I am doing swiping right code like below.
[UIView transitionWithView:viewTop duration:0.4
options:UIViewAnimationOptionTransitionCrossDissolve
animations:^{
viewTop.frame = CGRectMake(SCREEN_WIDTH, viewTop.frame.origin.y, viewTop.frame.size.width, viewTop.frame.size.height);
}
completion:^(BOOL Finished){
[self getNextVideoDetail];
viewTop.frame = CGRectMake(-SCREEN_WIDTH, viewTop.frame.origin.y, viewTop.frame.size.width, viewTop.frame.size.height);
[UIView transitionWithView:viewTop duration:0.3
options:UIViewAnimationOptionTransitionCrossDissolve
animations:^{
viewTop.frame = CGRectMake(0, viewTop.frame.origin.y, viewTop.frame.size.width, viewTop.frame.size.height);
}
completion:nil
];
}];
Here, viewTop is my content view. Everything works fine but I want that whenever I slide the screen to left, before the view disappears completely, some part of the view should be shown at the right side. Because the code I wrote above will show white self.view and screen will be blank for some mili seconds.
Is it possible with only one UIView to navigate videos like giving mirror effect?

Use this:
CATransition *transition = [CATransition animation];
transition.type = kCATransitionPush;
transition.subtype = kCATransitionFromLeft;
transition.duration = 0.4;
[viewTop.layer addAnimation:transition forKey:nil];

Related

UIView transitionWithView custom animation option

I have an application that first displays a login screen. Once the user logs in, this code is executed:
[UIView transitionWithView:self.view.window
duration:0.7
options:UIViewAnimationOptionTransitionNone
animations:^{
self.view.window.rootViewController = menuController;
} completion:^(BOOL finished) {
// Code to run after animation
}];
This works as expected; however, I would like to define my own custom animation option instead of the flip from left/right option.
A simple example would be sliding the new view controller onto the screen from top to bottom. How can I do this when changing the rootViewController?
Also, is there a completely different approach to animate switching the rootViewController? I am not married to this solution, it is just the closest thing I can find through Google/SO search.
Any help would be great, thanks!
Using a CATransition should be able to give you the sort of animation you're looking for. Granted, I've never actually attempted this specifically with rootViewController, but to slide the view in from top to bottom, I'd suggest trying this:
CATransition *transition = [CATransition animation];
transition.duration = 1.0;
transition.type = kCATransitionFromBottom;
transition.subtype = kCATransitionFade;
CALayer *layer = self.view.window.rootViewController.view.layer;
[layer addAnimation:transition forKey:kCATransition];
For that change to happen you must first add the ViewController and its view to the parent viewController. A simple trick could be add it "on the roof" of your window (starting Y position = -self.view.bounds.size.height). And then use
[UIView animateWithDuration:
delay:
options:
animations:^{}
completion:^(BOOL finished){
self.view.window.rootViewController = menuController;
}];
Then simply inside the animation brackets create the animation you want.

custom sidebar in ios7

i am new in iOS development and facing little issue.i don't know this approach is good or bad but i not want to used any third party.I want to make sidebar like Facebook sidebar and my code is
- (IBAction)basicProfile:(id)sender {
menuViewController *destVC = [self.storyboard instantiateViewControllerWithIdentifier:#"menuView"];
CATransition *animation = [CATransition animation];
[animation setDuration:0.5];
[animation setType:kCATransitionPush];
[animation setSubtype:kCATransitionFromLeft];
[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
CGRect view = self.view.frame;
view.origin.x = 280;
if(self.view.frame.origin.x > 100 )
{
[UIView beginAnimations:nil context:(__bridge void *)(self.scrollView)];
[UIView setAnimationDuration:0.25];
NSLog(#"%f", self.view.frame.origin.y);
self.view.frame = CGRectMake(0,0,320,568);
[UIView commitAnimations];
}
else{
[self.showView setHidden:NO];
[UIView beginAnimations:nil context:(__bridge void *)(self.scrollView)];
[UIView setAnimationDuration:0.25];
NSLog(#"%f", self.view.frame.origin.y);
self.view.frame = CGRectMake(280,0,320,568);
[UIView commitAnimations];
[self.view addSubview:destVC.view]; // this line added menuView to profile view but not on sidebar
}
}
i have two uiview in storyborad one is profile and other is menuViewController.why menuView not loaded properly
result of above code
There are 2 approaches to do this:
Using 2 UIViews on the Same controller. You can add your MenuView along with your view and initial keep it hidden. Use a button to toggle to show/hide the Menu. It will be just like xview.hidden = TRUE / xview.hidden = FALSE to show/hide the view. You can use animation to give it a menu like appearance.
Use a different view controller for MenuDisplay and add it to the current view controllers like [xview addsubView:menuview.view] and [menuview.view removefromsuperview]
Step 01: Basically what you need is a viewController and 2 views (1 for sidebar and another the main view.)
Step 02 : You would than require to add both these views to the View Controller.
Step 03 : And than add a button to toggle using below:
-
(void)OnCollapsibleExtenderTouchUpInside
{
[UIView animateWithDuration:1.0 animations:^{
[sideBarObj ToggleVuPosition];
[mainVuObj ToggleVuSize];
}];
}
Note : There is already a explanation on stack overflow
You can follow this one:
Sidebar menu implementation on iOS like Facebook?
If your requirement is different, Do post comment.

Creating transitions on the navigation stack that show both source and destination views?

The native push transition shows the source view, and the transition over to the destination view seamlessly.
The modal transition shows the destination view overlaying the source view from the bottom.
I'd like a modal transition that works with the navigation controller.
So far I have this:
CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:#"transform.translation.y"];
anim.duration = .2;
anim.autoreverses = NO;
anim.removedOnCompletion = YES;
anim.fromValue = [NSNumber numberWithInt:sourceViewController.view.frame.size.height];
anim.toValue = [NSNumber numberWithInt:0];
[sourceViewController.navigationController.view.layer addAnimation:anim
forKey:kCATransition];
[sourceViewController.navigationController pushViewController:destinationController animated:NO];
This is in the -perform method in my segue subclass. The problem with this is that the navigation controller push is done almost immediately, and while the transition takes place, nothing of the source view is displayed. I want it to look as if it's overlaying.
I thought it might be possible to take a screenshot using Core Graphics and having that as a superview of the destination view, but I couldn't get it to work properly.
I also tried using one of the UIView animation methods like so:
[sourceViewController.view addSubview:destinationController.view];
[destinationController.view setFrame:sourceViewController.view.window.frame];
[destinationController.view setTransform:CGAffineTransformMakeTranslation(0, sourceViewController.view.frame.size.height)];
[destinationController.view setAlpha:1.0];
[UIView animateWithDuration:1.3
delay:0.0
options:UIViewAnimationOptionTransitionNone
animations:^{
[destinationController.view setTransform:CGAffineTransformMakeTranslation(0, 0)];
[destinationController.view setAlpha:1.0];
}
completion:^(BOOL finished){
[destinationController.view removeFromSuperview];
[sourceViewController.navigationController pushViewController:destinationController animated:NO];
}];
But again, there's an issue with this: the navigation bar isn't displayed until the view controller is actually pushed onto the navigation stack. So there's a sort of "jump" at the end of the animation when the navigation bar is suddenly displayed.
So what are my options with this?
I resolved this by taking the route of creating an image of the source view and transitioning over that.
Also, it should be noted that the "flash" doesn't exist on ios 7 so there isn't much custom code necessary.

UIView Animation slide in

I am trying to get my UIView to slide in from the right in the viewDidLoad method here's what I've got.
CGRect menuFrame = self.menu.frame;
menuFrame.origin.y = menuFrame.size.height+200;
[UIView animateWithDuration:1
delay:0.05
options: UIViewAnimationCurveEaseIn
animations:^{
self.menu.frame = menuFrame;
}
completion:^(BOOL finished){
NSLog(#"Animation Complete!");
}];
I am not sure what has gone wrong here I appreciate any help greatly.
This isn't what you asked, but it is worth saying anyway: viewDidLoad is a bad place for this code. viewDidLoad is called because the view controller has obtained its view, not because that view has appeared or will soon appear in the interface. It might soon appear in the interface, which is why your code has seemed to work up until now, but it might not.
The correct place for this code is probably viewWillAppear or viewDidAppear. You probably want to call this code only once, though, the first time the view appears. If you want to prevent the code from being called, because you've already animated menu into view on an earlier viewDidAppear call, simply include a conditional check to see whether menu already has a frame within the visible view.
By the way, another reason for avoiding things having to do with frames and bounds in viewDidLoad is that if your app launches into landscape and this is your root view, x and y are reversed.
It looks like you are trying to slide your menu in from the bottom as the Y position is pushed down initially by 200.
Usually you start by adding the view as a subview in its offscreen position and then set the onscreen position in the animation block.
And, make sure that you pass 1.0 as the animation duration.
use those transition.subtype for different effects
CATransition* transition = [CATransition animation];
transition.duration = 0.5;
transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
transition.subtype = kCATransitionFromLeft; //kCATransitionMoveIn; //, kCATransitionPush, kCATransitionReveal, kCATransitionFade
//transition.subtype = kCATransitionFromTop; //kCATransitionFromLeft, kCATransitionFromRight, kCATransitionFromTop, kCATransitionFromBottom
[appDelegate.navigation.view.layer addAnimation:transition forKey:nil];
viewController *DairyVC = [[viewController alloc] initWithNibName:#"viewController" bundle:nil];
[appDelegate.navigation pushViewController:DairyVC animated:YES];

addsubview animation works only first time

I am trying add subview with animation effect using the code which work fine for the first time below.
CATransition *transition = [CATransition animation];
transition.duration = 1.0;
transition.type = kCATransitionMoveIn;
transition.subtype = kCATransitionFromRight;
[newView.layer removeAllAnimations]
[newView.layer addAnimation:transition forKey:nil];
[self.masterview addSubview:newView];
There is a back button in newView which removes the View from the superview.
[newView removeFromSuperview];
Now when I try adding newView as subview again using the above code,its first adds the view as a subview(without animation) and again with animation.
Instead of removing newView from superview, why not you can just set a frame like
newView.frame = CGRectMake(0, -500, CGRectGetWidth(newView.frame), CGRectGetHeight(newView.frame));
so that you can just hide it from showing. Just an idea. :-)
When you remove the view from its super view it keeps its frame as it is. So, i think you have to change the newView location to be placed in the new location again.
It will work fine for all the times.But the only difference you have to find is that you need to wai for the duration of animation. It will not animate continuously. It will take a minimum time that you mentioned in the duration.

Resources