custom segue to achieve slide menu from left to right - ios

I am new to animation, and trying to write a custom segue to achieve slide out a side menu from left to right, overlay the home view, and occupy half of the screen.
There is a custom segue code:
#import "CustomSegue.h"
#implementation CustomSegue
- (void)perform {
UIViewController *contentVC = self.sourceViewController;
UIViewController *sideBarVC = self.destinationViewController;
CGRect sideFrame = sideBarVC.view.frame;
[sideBarVC.view setFrame: CGRectMake(0, 0, 0, contentVC.view.frame.size.height)];
CGRect animationFrame = contentVC.view.frame;
sideFrame = sideBarVC.view.frame;
animationFrame.size.width = contentVC.view.frame.size.width / 2;
[UIView animateWithDuration:0.3
delay:0.0
options:UIViewAnimationOptionCurveEaseOut
animations:
^{
sideBarVC.view.frame = animationFrame;
}
completion:
^(BOOL finished) {
sideBarVC.view.frame = animationFrame;
contentVC.view.alpha = 0.5f;
[[contentVC.view superview] addSubview:sideBarVC.view];
}];
}
#end
I add some variable to see if the frame is correct, and it is correct when I change the frame.
But I don't see my "expected" animation: sideBarVC.view.frame = animationFrame;
Could some one help on this? Thanks.

If you want to have a slide from left to right animation, you will firstly have to set the original X of animating view's frame to be a negative value, then in the animation block, set original x to be 0. Something like that.
sideFrame = sideBarVC.view.frame;
sideBarVC.view.frame = CGRectOffset(sideFrame, - contentVC.view.frame.size.width, 0);
[[contentVC.view superview] addSubview:sideBarVC.view];
[UIView animateWithDuration:0.3 animations:^{
sideBarVC.view.frame = sideFrame;
contentVC.view.alpha = 0.5f;
} completion:nil];
Using your code I don't see animation happens, because sideBarVC.view is added in the completion block of the animation. By then the animation has already finished, and sideBarVC.view is added as subview and its frame is set.

Tunred out I misunderstand the position. Using below code could achieve the animation,
but it still has one problem, the side bar menu is under navigation tool bar on top of the screen. Do anyone know how to solve it?
- (void)perform {
UIViewController *contentVC = self.sourceViewController;
UIViewController *sideBarVC = self.destinationViewController;
CGRect sideFrame = sideBarVC.view.frame;
[sideBarVC.view setFrame: CGRectMake(-(contentVC.view.frame.size.width), 0, contentVC.view.frame.size.width/2, contentVC.view.frame.size.height)];
CGRect animationFrame = contentVC.view.frame;
sideFrame = sideBarVC.view.frame;
animationFrame.size.width = contentVC.view.frame.size.width / 2;
sideBarVC.view.alpha = 0;
[[[contentVC.view superview] window] addSubview:sideBarVC.view]; < -- this is important, not [superview addSubView]
[UIView animateWithDuration:1
delay:0.0
options:UIViewAnimationOptionCurveEaseOut
animations:^{
sideBarVC.view.frame = animationFrame;
sideBarVC.view.alpha = 1;
}
completion:^(BOOL finished) {
sideBarVC.view.alpha = 1;
sideBarVC.view.frame = animationFrame;
}];

For Swift 3
override func perform() {
let contentVC = self.sourceViewController;
let sideBarVC = self.destinationViewController;
var sideFrame = sideBarVC.view.frame
sideBarVC.view.frame = CGRect(x: -(contentVC.view.frame.size.width), y: 0, width: contentVC.view.frame.size.width/2, height: contentVC.view.frame.size.height)
sideFrame = sideFrame.offsetBy(dx: -1 * contentVC.view.frame.size.width, dy: 0)
contentVC.view.superview?.addSubview(sideBarVC.view)
UIView.animate(withDuration: 0.3) {
sideBarVC.view.frame = sideFrame
contentVC.view.alpha = 0.5
}
}

Related

Objective-c animation with constraints instability issue for trailing constraint

I'm developing an IOS app using objective-c. I came across with an instability problem when animating a view's constraints. The animation works well regarding the final position of the frame, but randomly, the trailing(right) constraint is omitted for the first animation block(left constraint never reach to -20 constant value), however leading(left), top and bottom constraints are working as expected.
Please see the video I uploaded. In the first tap, the animation is working as expected, but in the second tap the issue occurs. Please advice.
Video showing the problem
- (void)animateTransition:(nonnull id<UIViewControllerContextTransitioning>)transitionContext {
// 1
UIView *containerView = transitionContext.containerView;
UIViewController* toViewController = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
// 2
[containerView addSubview:toViewController.view];
if([toViewController isKindOfClass:[ImageViewController class]]){
ImageViewController *vcImage = (ImageViewController*)toViewController;
vcImage.constraintLeft.constant = 20;
vcImage.constraintTop.constant = self.selectedCardFrame.origin.y + 60.0;
vcImage.constraintRight.constant = 20.0;
vcImage.constraintBottom.constant = 0;//self.CollectionView.bounds.size.height - (self.selectedCardFrame.origin.y + self.selectedCardFrame.size.height);
[toViewController.view layoutIfNeeded];
NSTimeInterval duration = [self transitionDuration:transitionContext];
[toViewController.view layoutIfNeeded];
[UIView animateWithDuration:duration animations:^{
//First animation block
vcImage.constraintRight.constant = -20.0;
vcImage.constraintLeft.constant = -20.0;
vcImage.constraintTop.constant = -20.0;
vcImage.constraintBottom.constant = 0;
[toViewController.view layoutIfNeeded];
//toViewController.configureRoundedCorners(shouldRound: false)
} completion:^(BOOL finished) {
//Second animation block
[UIView animateWithDuration:duration animations:^{
vcImage.constraintLeft.constant = 0;
vcImage.constraintTop.constant = 0.0;
vcImage.constraintRight.constant = 0;
vcImage.constraintBottom.constant = 0;
[toViewController.view layoutIfNeeded];
//toViewController.configureRoundedCorners(shouldRound: false)
} completion:^(BOOL finished) {
[transitionContext completeTransition:finished];
}];
}];
}
}
Updated code after #Sh_Khan 's comment.
- (void)animateTransition:(nonnull id<UIViewControllerContextTransitioning>)transitionContext {
// 1
UIView *containerView = transitionContext.containerView;
UIViewController* toViewController = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
// 2
[containerView addSubview:toViewController.view];
if([toViewController isKindOfClass:[ImageViewController class]]){
ImageViewController *vcImage = (ImageViewController*)toViewController;
NSTimeInterval duration = [self transitionDuration:transitionContext];
[UIView animateWithDuration:0 animations:^{
vcImage.constraintLeft.constant = 20;
vcImage.constraintTop.constant = self.selectedCardFrame.origin.y + 60.0;
vcImage.constraintRight.constant = 20.0;
vcImage.constraintBottom.constant = 0;
[toViewController.view layoutIfNeeded];
} completion:^(BOOL finished) {
[UIView animateWithDuration:duration animations:^{
//First animation block
vcImage.constraintRight.constant = -20.0;
vcImage.constraintLeft.constant = -20.0;
vcImage.constraintTop.constant = -20.0;
vcImage.constraintBottom.constant = 0;
[toViewController.view layoutIfNeeded];
//toViewController.configureRoundedCorners(shouldRound: false)
} completion:^(BOOL finished) {
//Second animation block
[UIView animateWithDuration:duration animations:^{
vcImage.constraintLeft.constant = 0;
vcImage.constraintTop.constant = 0.0;
vcImage.constraintRight.constant = 0;
vcImage.constraintBottom.constant = 0;
[toViewController.view layoutIfNeeded];
//toViewController.configureRoundedCorners(shouldRound: false)
} completion:^(BOOL finished) {
[transitionContext completeTransition:finished];
}];
}];
}];
}
}
Before setting your imageView try reorienting the photo. Something tells me the image view is having a hard time determining the orientation of the image. I had this happen during a transition once and would explain why you are seeing the behavior only some of the time. I am a bit rusty with Objective C but give this a shot and use it to before setting your imageView image.
-(UIImage*)normalizeImage:(UIImage*)currentImage {
if (currentImage.imageOrientation == UIImageOrientationUp){
return currentImage;
}
UIGraphicsBeginImageContextWithOptions(currentImage.size, NO, currentImage.scale);
[currentImage drawInRect:CGRectMake(0, 0, currentImage.size.width, currentImage.size.height)];
UIImage *_newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return _newImage;
}

I want to animate UITableView on Button Click

I have UITableView and i want to animate when user click on Button.
For Selected State --> BOTTOM TO TOP
For UnSelected State --> TOP TO BOTTOM
For that I have tried Below Code.
My TableView frame (0,39, width, height)
- (IBAction)onInviteFriendsButtonClick:(UIButton *)sender {
sender.selected =! sender.selected;
if (sender.selected) {
CGRect napkinBottomFrame = self.tblVWInviteFriend.frame;
napkinBottomFrame.origin.y = [UIScreen mainScreen].bounds.size.height;
self.tblVWInviteFriend.frame = napkinBottomFrame;
[UIView animateWithDuration:0.5 delay:0.0 options: UIViewAnimationOptionTransitionCurlUp animations:^{
self.tblVWInviteFriend.frame = CGRectMake(0, 39, self.tblVWInviteFriend.frame.size.width, self.tblVWInviteFriend.frame.size.height);
} completion:^(BOOL finished){/*done*/}];
}
else {
CGRect napkinBottomFrame = self.tblVWInviteFriend.frame;
napkinBottomFrame.origin.y = 39;
self.tblVWInviteFriend.frame = napkinBottomFrame;
[UIView animateWithDuration:0.5 delay:0.0 options: UIViewAnimationOptionTransitionCurlDown animations:^{
self.tblVWInviteFriend.frame = CGRectMake(0, -[UIScreen mainScreen].bounds.size.height, self.tblVWInviteFriend.frame.size.width, self.tblVWInviteFriend.frame.size.height);
} completion:^(BOOL finished){/*done*/}];
}
}
When i click button it will animate from BOTTOM TO TOP properly.
but when i click button again it will again gone from BOTTOM TO TOP.
Because you have set frame.origin.y of tableview is -y or XY coordinate.
self.tblVWInviteFriend.frame = CGRectMake(0, -[UIScreen mainScreen].bounds.size.height, self.tblVWInviteFriend.frame.size.width, self.tblVWInviteFriend.frame.size.height);
replace with this
self.tblVWInviteFriend.frame = CGRectMake(0, [UIScreen mainScreen].bounds.size.height, self.tblVWInviteFriend.frame.size.width, self.tblVWInviteFriend.frame.size.height);
Try this :
- (IBAction)onInviteFriendsButtonClick:(UIButton *)sender {
sender.selected =! sender.selected;
if (sender.selected) {
CGRect napkinBottomFrame = txtAOP.frame;
napkinBottomFrame.origin.y = [UIScreen mainScreen].bounds.size.height;
txtAOP.frame = napkinBottomFrame;
[UIView animateWithDuration:0.5 delay:0.0 options: UIViewAnimationOptionTransitionCurlUp animations:^{
txtAOP.frame = CGRectMake(0, 39, txtAOP.frame.size.width, txtAOP.frame.size.height);
} completion:^(BOOL finished){/*done*/}];
}
else {
CGRect napkinBottomFrame = txtAOP.frame;
napkinBottomFrame.origin.y = -[UIScreen mainScreen].bounds.size.height;
txtAOP.frame = napkinBottomFrame;
[UIView animateWithDuration:0.5 delay:0.0 options: UIViewAnimationOptionTransitionCurlDown animations:^{
txtAOP.frame = CGRectMake(0,39 , txtAOP.frame.size.width, txtAOP.frame.size.height);
} completion:^(BOOL finished){/*done*/}];
}
}

UIView jumps down at beginning

I need to change UIView position on scroll of tableview. When i change the frame size of UIView in the animation block it goes down and than move to correct position. Please look at my code.
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
CGPoint scrollVelocity = [_collectionViewLeaderboard.panGestureRecognizer velocityInView:_collectionViewLeaderboard.superview];
if (scrollVelocity.y > 0.0f){
NSLog(#"going down");
[UIView animateWithDuration:0.3f
animations:^ {
_headerview.frame = CGRectMake(0, 0, _headerview.frame.size.width, _headerview.frame.size.height);
_headerviewSecond.frame = CGRectMake(0, _headerview.frame.size.height, _headerviewSecond.frame.size.width, _headerviewSecond.frame.size.height);
self.collectionViewLeaderboard.frame = CGRectMake(self.view.frame.origin.x, _headerviewSecond.frame.size.height+_headerview.frame.size.height, self.view.frame.size.width, self.view.frame.size.height);
frameconditon = _headerview.frame;
} completion:^ (BOOL completed) {
}];
}
else if (scrollVelocity.y < 0.0f){
NSLog(#"going up");
//CGAffineTransform transform = CGAffineTransformMake(1, 0, 0, 1, _headerview.frame.origin.x, _headerview.frame.origin.y);
[UIView animateWithDuration:5.0 animations:^{
NSLog(#"test");
_headerview.frame = CGRectMake(0, -(_headerview.frame.size.height), _headerview.frame.size.width, _headerview.frame.size.height);
_headerviewSecond.frame = CGRectMake(0, (_headerview.frame.size.height)-40, _headerviewSecond.frame.size.width, _headerviewSecond.frame.size.height);
} completion:^(BOOL finished) {
}];
self.collectionViewLeaderboard.frame = CGRectMake(self.view.frame.origin.x, _headerviewSecond.frame.size.height, self.view.frame.size.width, self.view.frame.size.height);
}
}
headerview should move to top of view and it work but when i run it first time, it goes down and back to correct postion. How will i change constraints at the time of scrolling.
For constraint based views try to animate through changing constraints constant property using an outlet.

How to do animation like app launch when you tap on the app icon on iOS homescreen?

I wants to do animation something similar to app launch on the ios home screen. Like the whole collection view goes to scale up and the launched app covered the whole screen.
I am using the iOS 7 new api for viewcontroller transitions.
And I am using the parent collection viewcontroller snapshot to appropriate animation.
But still I am not getting enough like what animation is actually is happening at that time?
To get the performance and look you want, you may have to perform transforms on the view layers.
I put up a little demo on GitHub, but the relevant code is below.
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
MyCellView *cell = (MyCellView *)[self collectionView:collectionView cellForItemAtIndexPath:indexPath];
self.detailViewController = [[DetailViewController alloc] initWithNibName:nil bundle:nil];
self.detailViewController.labelString = [NSString stringWithFormat:#"%i", indexPath.row];
[self.view.superview addSubview:self.detailViewController.view];
// tap position relative to collection view
float screenX = self.collectionView.frame.origin.x + cell.center.x;
float screenY = self.collectionView.frame.origin.y + cell.center.y - self.collectionView.contentOffset.y;
// tap position relative to view frame
float translateX = (self.view.frame.size.width / -2.0) + screenX;
float translateY = (self.view.frame.size.height / -2.0) + screenY;
CATransform3D transform_detail = CATransform3DScale(CATransform3DMakeTranslation(translateX, translateY, 0.0), 0.0, 0.0, 0.0);
CATransform3D transform_main = CATransform3DScale(CATransform3DMakeTranslation(-translateX * 5.0, -translateY * 5.0, 0.0), 5.0, 5.0, 5.0);
self.detailViewController.view.layer.transform = transform_detail;
[UIView animateWithDuration:0.5 animations:^{
self.detailViewController.view.layer.transform = CATransform3DIdentity;
self.view.layer.transform = transform_main;
} completion:^(BOOL finished) {
self.view.layer.transform = CATransform3DIdentity;
}];
}
You need to use custom segues.
This tutorial should help you and below is the code excerpt.
- (void)perform {
UIViewController *sourceViewController = self.sourceViewController;
UIViewController *destinationViewController = self.destinationViewController;
// Add the destination view as a subview, temporarily
[sourceViewController.view addSubview:destinationViewController.view];
// Transformation start scale
destinationViewController.view.transform = CGAffineTransformMakeScale(0.05, 0.05);
// Store original centre point of the destination view
CGPoint originalCenter = destinationViewController.view.center;
// Set center to start point of the button
destinationViewController.view.center = self.originatingPoint;
[UIView animateWithDuration:0.5
delay:0.0
options:UIViewAnimationOptionCurveEaseInOut
animations:^{
// Grow!
destinationViewController.view.transform = CGAffineTransformMakeScale(1.0, 1.0);
destinationViewController.view.center = originalCenter;
}
completion:^(BOOL finished){
[destinationViewController.view removeFromSuperview]; // remove from temp super view
[sourceViewController presentViewController:destinationViewController animated:NO completion:NULL]; // present VC
}];
}

Navigation bar gets adjusted after calling completeTransition: in custom transition

My goal is to provide zooming modal transition from for the user from a view similar as springboard icons zoom in when launching apps.
The presented view controller zooms in correctly, but the navigation bar has wrong position under the status bar. This position gets corrected after calling [transitionContext completeTransition:finished];. How can I make it correct from the beginning of the transition?
This is a screen recording of the bug: http://youtu.be/7LKU4lzb-uw (the glitch is in the 6th second of the recording)
The UIViewControllerAnimatedTransitioning code:
- (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext
{
UIViewController *fromViewController = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
UIViewController *toViewController = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
UIView *container = [transitionContext containerView];
CGPoint viewCenter = self.view.center;
CGSize viewSize = self.view.frame.size;
CGSize controllerSize = toViewController.view.frame.size;
CGFloat controllerFromX = viewCenter.x - (controllerSize.width / 2);
CGFloat controllerFromY = viewCenter.y - (controllerSize.height / 2);
CGAffineTransform transform = CGAffineTransformMakeTranslation(controllerFromX, controllerFromY);
transform = CGAffineTransformScale(transform, viewSize.width / controllerSize.width, viewSize.height / controllerSize.height);
if (self.reverse) {
[container insertSubview:toViewController.view belowSubview:fromViewController.view];
} else {
toViewController.view.transform = transform;
[container addSubview:toViewController.view];
}
[UIView animateKeyframesWithDuration:ZoomTransitioningDuration
delay:0
options:0
animations:^{
if (self.reverse) {
fromViewController.view.alpha = 0.0f;
fromViewController.view.transform = transform;
} else {
toViewController.view.transform = CGAffineTransformIdentity;
}
}
completion:^(BOOL finished) {
[transitionContext completeTransition:finished];
}];
}
The problem is that you are setting the transform before inserting the destination view controller's view into the container.
Switching the order should fix it:
if (self.reverse) {
[container insertSubview:toViewController.view belowSubview:fromViewController.view];
} else {
[container addSubview:toViewController.view];
toViewController.view.transform = transform;
}
See point 4 here. Since you've applied a transform prior to inserting the navigation controller's view as a subview, the layout engine doesn't think the navigation bar is at the top edge of the window, and therefore doesn't need to be adjusted to avoid the status bar.
I've found a solution, although pretty hacky. I have to manually adjust the navigation bar frame before the animation starts:
if (self.reverse) {
[container insertSubview:toViewController.view belowSubview:fromViewController.view];
} else {
toViewController.view.transform = transform;
[container addSubview:toViewController.view];
// fix navigation bar position to prevent jump when completeTransition: is called
if ([toViewController isKindOfClass:[UINavigationController class]]) {
UINavigationController* navigationController = (UINavigationController*) toViewController;
UINavigationBar* bar = navigationController.navigationBar;
CGRect frame = bar.frame;
bar.frame = CGRectMake(frame.origin.x, frame.origin.y + 20.0f, frame.size.width, frame.size.height);
}
}
Add the toViewControllerView first to the ContainerView, then set the toViewControllerView transform as given below.
[container addSubview:toViewController.view];
toViewController.view.transform = transform;
This will solve the problem.
This is still a hack, based on Ondřej Mirtes' one but it works better if you have an in-call status bar and you're on iOS8
if([toViewController isKindOfClass:[UINavigationController class]]) {
UINavigationController *navCtrl = (UINavigationController *)toViewController;
UINavigationBar *navBar = navCtrl.navigationBar;
if(navBar.frame.origin.y == 0 && navBar.frame.size.height == 44) {
navBar.frame = CGRectMake(0, 0, navBar.frame.size.width, fmin(44 + [UIApplication sharedApplication].statusBarFrame.size.height, 64));
}
}
Remains ugly though :/

Resources