iOS黑科技【动画特效篇-1】 立方体翻转特效--CubicTurning

iOS黑科技【动画特效篇】第一期

今天起为大家带来iOS动画特效合集，APP如美女，动画如衣裳，别让你家的美女再裸奔了，赶紧为她披上漂亮的衣装吧！

废话不多说，直接上效果：

CubicTurning.gif

亲喜欢的话就直接带走吧：
https://github.com/XMDashen/CubicPageTurning.git
顺便给个赞哦！(* ￣3)(ε￣ *)

下面进入正题，是时候展现真正的技术了：

首先在控制器里添加一个scrollView，再在scrollView上的对应位置上添加要展示的imageView(立方体视图组)，当然也可以放上其它子控制器的view实现更多功能这个随意不是重点

//*******添加scrollView*******
    [self createScrollView];
    
//******创建立方体视图组******
    [self createCubicViewArray];

//添加视图到scrollView上
    for (int i=0; i<_viewArray.count; i++) {
        
        UIImageView *transView=_viewArray[i];
        
        //视图在scrollView上对应的位置
        transView.x=self.view.bounds.size.width * i;

监听scrollView的滑动事件，在这里要先获取到显示的当前页、上一页、下一页，然后让这三个页面同时做3DTransform变换

#pragma mark - scrollView滑动事件
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
    
    //当前页数
    NSInteger currentPage=_currentPage;
    
    //当前视图
    UIView *currentView=_viewArray[currentPage];
    
    //上一个视图
    UIView *lastView=nil;
    
    if (currentPage-1>=0) {
        
        lastView=_viewArray[currentPage-1];
    }
    
    //下一个视图控制器视图
    UIView *nextView;
    
    if (currentPage+1<=3) {
        
        nextView=_viewArray[currentPage+1];
    }
    
    //本次偏移距离
    CGFloat currentOffset=scrollView.contentOffset.x-currentPage*self.view.bounds.size.width;
    
    //本次偏移角度
    CGFloat deltaAngle=currentOffset/self.view.bounds.size.width * M_PI_2;
    
    //****************当前视图移动变幻***************
    
    //设置锚点
    currentView.layer.anchorPoint=CGPointMake(0.5, 0.5);
    
    //向屏幕前方移动
    CATransform3D move = CATransform3DMakeTranslation(0, 0, self.view.bounds.size.width/2);
    
    //旋转
    CATransform3D rotate = CATransform3DMakeRotation(-deltaAngle, 0, 1, 0);
    
    //平移
    CATransform3D plaintMove=CATransform3DMakeTranslation( currentOffset, 0, 0);
    
    //向屏幕后方移动
    CATransform3D back = CATransform3DMakeTranslation(0, 0, -self.view.bounds.size.width/2);
    
    //连接
    CATransform3D concat=CATransform3DConcat( CATransform3DConcat(move, CATransform3DConcat(rotate, plaintMove)),back);
    
    CATransform3D transform=CATransform3DPerspect(concat, CGPointMake(currentOffset/2, self.view.bounds.size.height), 5000.0f);
    
    //添加变幻特效
    currentView.layer.transform=transform;
    
    //****************下一个视图移动变幻***************
    
    //设置锚点
    nextView.layer.anchorPoint=CGPointMake(0.5, 0.5);
    
    //向屏幕前方移动
    CATransform3D move2 = CATransform3DMakeTranslation(0, 0, self.view.bounds.size.width/2);
    
    //旋转
    CATransform3D rotate2 = CATransform3DMakeRotation(-deltaAngle+M_PI_2, 0, 1, 0);
    
    //平移
    CATransform3D plaintMove2=CATransform3DMakeTranslation( currentOffset-self.view.bounds.size.width, 0, 0);
    
    //向屏幕后方移动
    CATransform3D back2 = CATransform3DMakeTranslation(0, 0, -self.view.bounds.size.width/2);
    
    //拼接
    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);
    
    //添加变幻特效
    nextView.layer.transform=transform2;
    
    //****************上一个视图移动变幻***************
    
    //设置锚点
    lastView.layer.anchorPoint=CGPointMake(0.5, 0.5);
    
    //向屏幕前方移动
    CATransform3D move3 = CATransform3DMakeTranslation(0, 0, self.view.bounds.size.width/2);
    
    //旋转
    CATransform3D rotate3 = CATransform3DMakeRotation(-deltaAngle-M_PI_2, 0, 1, 0);
    
    //平移
    CATransform3D plaintMove3=CATransform3DMakeTranslation( currentOffset+self.view.bounds.size.width, 0, 0);
    
    //向屏幕后方移动
    CATransform3D back3 = CATransform3DMakeTranslation(0, 0, -self.view.bounds.size.width/2);
    
    //拼接
    CATransform3D concat3=CATransform3DConcat(CATransform3DConcat(move3, CATransform3DConcat(rotate3, plaintMove3)),back3);
    
    CATransform3D transform3=CATransform3DPerspect(concat3, CGPointMake(-self.view.bounds.size.width/2+currentOffset/2, self.view.bounds.size.height), 5000.0f);
    
    //添加变幻特效
    lastView.layer.transform=transform3;
}

这里记得要复原一下3D变换，不然滑快了会出现页面错乱

-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
    
    //改变选中页序号
    [self changeIndex];
    
    //3D变幻恢复原状态
    for (UIView * view in _viewArray) {
        
        view.layer.transform=CATransform3DIdentity;
    }
}

对了，记得添加一个很重要的透视变换函数，核心在于仿射矩阵的m34属性，这样才会产生远小近大的3D效果，让动画更炫酷

//3D透视函数
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);
}

这一期就到这里了，亲们有什么意见和问题记得及时反馈哦，喜欢的话点个关注给个赞(づ￣3￣)づ╭❤～