IOS animation effects Cube Flip _ios

First look at the effect:

Now it's time to show the real technology:

First add a scrollviewto the controller, then add the imageview(Cube View group) to the corresponding position on the ScrollView , and of course, you can put the other sub controller View Implementation More versatile This is not the point.

Add scrollview*******
  [self createscrollview];

Create Cube View group
  [self Createcubicviewarray];

Add view to ScrollView for
  (int i=0; i<_viewarray.count; i++) {

    uiimageview *transview=_viewarray[i];

    The position corresponding to the view on the ScrollView
    transview.x=self.view.bounds.size.width * i;

Listen for scrollview sliding events, here to get to the displayed current page, previous page, next page , and then let these three pages to do at the same time 3DTransform transform

#pragma mark-scrollview sliding event-(void) Scrollviewdidscroll: (Uiscrollview *) scrollview{//Current page Nsinteger Currentpage=_c

  Urrentpage;

  Current View UIView *currentview=_viewarray[currentpage];

  Previous view UIView *lastview=nil;
  if (currentpage-1>=0) {lastview=_viewarray[currentpage-1];

  }//Next View Controller view UIView *nextview;
  if (currentpage+1<=3) {nextview=_viewarray[currentpage+1];

  }//This offset distance cgfloat currentoffset=scrollview.contentoffset.x-currentpage*self.view.bounds.size.width;

  The offset angle cgfloat deltaangle=currentoffset/self.view.bounds.size.width * m_pi_2;

  Current View Move changes ***************//Set Anchor point Currentview.layer.anchorpoint=cgpointmake (0.5, 0.5);

  Moving catransform3d move = catransform3dmaketranslation (0, 0, SELF.VIEW.BOUNDS.SIZE.WIDTH/2) to the front of the screen;

  Rotary Catransform3d rotate = catransform3dmakerotation (-deltaangle, 0, 1, 0);

  Translational Catransform3d plaintmove=catransform3dmaketranslation (currentoffset, 0, 0); Move the CA to the rear of the screenTransform3D back = catransform3dmaketranslation (0, 0,-SELF.VIEW.BOUNDS.SIZE.WIDTH/2); Connect Catransform3d Concat=catransform3dconcat (Catransform3dconcat (move, Catransform3dconcat (rotate, plaintMove)),

  back); Catransform3d Transform=catransform3dperspect (concat, Cgpointmake (CURRENTOFFSET/2, Self.view.bounds.size.height),

  5000.0f);

  Add changing effects currentview.layer.transform=transform;

  Next view Move changes ***************//Set Anchor point Nextview.layer.anchorpoint=cgpointmake (0.5, 0.5);

  Move to the front of the screen catransform3d move2 = catransform3dmaketranslation (0, 0, SELF.VIEW.BOUNDS.SIZE.WIDTH/2);

  Rotary Catransform3d Rotate2 = catransform3dmakerotation (-deltaangle+m_pi_2, 0, 1, 0);

  Translational Catransform3d plaintmove2=catransform3dmaketranslation (currentoffset-self.view.bounds.size.width, 0, 0);

  Move to the rear of the screen catransform3d Back2 = catransform3dmaketranslation (0, 0,-SELF.VIEW.BOUNDS.SIZE.WIDTH/2); Stitching Catransform3d Concat2=catransform3dconcat (Catransform3dconcat (Move2, CatrAnsform3dconcat (Rotate2, PlaintMove2)), Back2); Catransform3d Transform2=catransform3dperspect (CONCAT2, Cgpointmake (self.view.bounds.size.width/2+currentoffset/

  2, Self.view.bounds.size.height), 5000.0f);

  Add changing effects nextview.layer.transform=transform2;

  Last view move change ***************//Set Anchor point Lastview.layer.anchorpoint=cgpointmake (0.5, 0.5);

  Move to the front of the screen catransform3d move3 = catransform3dmaketranslation (0, 0, SELF.VIEW.BOUNDS.SIZE.WIDTH/2);

  Rotary Catransform3d rotate3 = catransform3dmakerotation (-deltaangle-m_pi_2, 0, 1, 0);

  Translational Catransform3d plaintmove3=catransform3dmaketranslation (currentoffset+self.view.bounds.size.width, 0, 0);

  Move to the rear of the screen catransform3d Back3 = catransform3dmaketranslation (0, 0,-SELF.VIEW.BOUNDS.SIZE.WIDTH/2); Stitching Catransform3d Concat3=catransform3dconcat (Catransform3dconcat (Move3, Catransform3dconcat, Rotate3

  )), BACK3); Catransform3d Transform3=catransform3dperspect (CONCAT3, Cgpointmake (-SELF.VIEW.BOUNDS.SIZE.WIDTH/2+CURRENTOFFSET/2, Self.view.bounds.size.height), 5000.0f);
Add changing effects lastview.layer.transform=transform3; }

Here remember to restore the 3D transformation, or slippery fast will appear page confusion

-(void) scrollviewdidenddecelerating: (Uiscrollview *) scrollview{

  //Change the selected page ordinal number
  [self changeindex];

  3D Change restore original state for
  (UIView * View in _viewarray) {

    view.layer.transform=catransform3didentity
  }
}

Yes, remember to add a very important perspective transformation function, the core is the affine matrix of the M34 property, so that will produce far smaller near the 3D effect, so that the animation more cool

3D perspective function
catransform3d catransform3dmakeperspective (cgpoint Center, float Disz)
{
  Catransform3d Transtocenter = Catransform3dmaketranslation (-center.x,-center.y, 0);
  Catransform3d transback = catransform3dmaketranslation (center.x, center.y, 0);
  Catransform3d scale = catransform3didentity;
  SCALE.M34 = -1.0f/disz;
  Return Catransform3dconcat (Catransform3dconcat (transtocenter, scale), transback);

This article is here, we have any comments and questions to remember timely feedback, I hope this article for everyone to develop iOS help.