IOS implementation of the Micro-Trust Circle album Review Interface rollover transition animation _ios

Let's take a look at 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 parameters to set NO , and then set the rollover animation can options be seen here, the parameters can see that the animation is started from the right to flip, duration indicating 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 = [[Uibarbuttonit
  Em 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, 300, 200)];
  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 + Myima
  Ge.frame.size.height + 20, 200, 30)];
  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 navigation bar leftBarButtonItem position, 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 the animation parameters to be set NO , you can see this time the options parameter is from the left to flip, in the visual has a reverse direction turn back the effect.

Summarize

Above, is the transition animation of the full implementation of the process, in fact, just add two lines of code, very simple, but occasionally use, or can bring very good effect ~ Hope this article content for everyone's study and work can bring some help, if there is doubt can message exchange.