IOS High Imitation Micro-letter album Interface rollover transition animation effect _ios

When you point to a micro-letter album, want in the album Image interface jump view point Zane Comment, the micro-letter will use the interface Flip transition animation to jump to the comment interface, as if it is on the back of the picture interface, click Finish will flip back to the picture interface, which is different from the general navigation interface Sliding animation, feel very interesting, So I learned to do it, in fact, is also very simple, the following is the implementation of a similar effect chart:

Click on the image screen in the bottom right corner of the view comments will be flipped to the comment interface, the comment interface click the return button in the upper left corner will flip back to the picture interface, the real implementation of the method, and the traditional navigation bar transition in fact only a line of code differences, let us look at the overall

First we implement the image interface, which has a black background, a picture, and a button to view comments:

-(void) viewdidload {
[super viewdidload];
Self.view.backgroundColor = [Uicolor blackcolor];//background set to black
//Picture
Uiimageview *myimage = [[Uiimageview alloc] Initwithframe:cgrectmake (0, (Screenheight-screenwidth +)/2, ScreenWidth, SCREENWIDTH-100)];
Myimage.image = [UIImage imagenamed:@ "Image.jpg"];
[Self.view Addsubview:myimage];
Lower right corner View Comment button
uilabel *label = [[Uilabel alloc] Initwithframe:cgrectmake (SCREENWIDTH-100, SCREENHEIGHT-50, 80, 30) ];
Label.text = @ "View Comments";
Label.textcolor = [Uicolor whitecolor];
label.userinteractionenabled = YES;
UITapGestureRecognizer *labeltap = [[UITapGestureRecognizer alloc] initwithtarget:self action: @selector (Viewcomment) ];
[Label Addgesturerecognizer:labeltap];
[Self.view Addsubview:label];
}

There is nothing special here, now look at the click Response to view the comment text, which is the implementation of the Jump:

View Comments
-(void) viewcomment {
Commentviewcontroller *COMMENTVC = [[Commentviewcontroller alloc] init];
[Self.navigationcontroller PUSHVIEWCONTROLLER:COMMENTVC Animated:no];
Set page animation to flip from right
[UIView transitionWithView:self.navigationController.view duration:1 options: Uiviewanimationoptiontransitionflipfromright Animations:nil Completion:nil];
}

Can see, is more than the ordinary push a line of code, the original push part of our animated parameter to set to No, and then set the rollover animation can be, here options can be seen in the parameters of the animation is flipped from the right, duration to express the animation time, It's easy to flip to the comment interface.

Let's look at the code for the comment interface, which has a return button on the interface element. A picture, a line of text, but this return button is special, we redefine the navigation bar return button, if nothing, the navigation bar will actually bring a return button with an arrow, click on the normal slide back to the previous interface, Here we're going to replace it with our own buttons:

-(void) viewdidload {
[super viewdidload];
Self.view.backgroundColor = [Uicolor whitecolor];//background color set to white
//Custom navigation bar button
Uibarbuttonitem *backbutton = [ Uibarbuttonitem Alloc] initwithtitle:@ "return" style:uibarbuttonitemstylebordered target:self action: @selector (back)];
Self.navigationItem.leftBarButtonItem = Backbutton;
Picture
Uiimageview *myimage = [[Uiimageview alloc] Initwithframe:cgrectmake ((SCREENWIDTH-300)/2, (SCREENHEIGHT-200 ) (/2-100)];
Myimage.image = [UIImage imagenamed:@ "Image.jpg"];
[Self.view Addsubview:myimage];
A text
uilabel *label = [[Uilabel alloc] Initwithframe:cgrectmake ((SCREENWIDTH-200)/2, MYIMAGE.FRAME.ORIGIN.Y + M YImage.frame.size.height +)];
Label.text = @ "100 Praise, 100 reviews";
Label.textalignment = Nstextalignmentcenter;
[Self.view Addsubview:label];
}

As you can see, we've customized a Uibarbuttonitem button and placed it in the Leftbarbuttonitem position of the navigation bar, which replaces the original return button, and then sets the flip animation in the button-click response:

Return to previous page
-(void) Back {
//Set rollover animation to flip up from the left
[UIView TransitionWithView:self.navigationController.view Duration:1 options:uiviewanimationoptiontransitionflipfromleft Animations:nil Completion:nil];
[Self.navigationcontroller Popviewcontrolleranimated:no];
}

Still the same, but this time to set up the animation, and then pop, otherwise no effect, and pop animation parameters to be set to No, you can see this time the options of the parameter is from the left to flip, in the visual has a reverse direction turn back the effect.

Above, is the transition animation of the whole realization process, in fact, just add two lines of code, very simple, but occasionally use, or can bring very good results ~

Here's my sample project: Https://github.com/Cloudox/ReverseDemo

The above is a small set to introduce the iOS high imitation Micro-letter album Interface rollover transition animation effect, to achieve a simulation of the background data login effect, hope to help everyone, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!