模仿简书文章详情页点击专题3D翻转效果

pushgif.gif

获取屏幕的宏

//获取当前屏幕高
#define  SCREEN_HEIGHT [UIScreen mainScreen].bounds.size.height

//获取当前屏幕宽
#define  SCREEN_WIDTH  [UIScreen mainScreen].bounds.size.width

创建三个视图，最底层显示文章详情页，中间的用一个button做蒙板，最上层的push菜单界面

@interface ViewController ()

@property (nonatomic, strong) UIView *bgView;
@property (nonatomic, strong) UIView *pushView;
@property (nonatomic, strong) UIButton *coverBtn;

@end

@implementation ViewController

#pragma mark - 懒加载

- (UIView *)bgView
{
    if (!_bgView) {
        _bgView = [[UIView alloc] initWithFrame:[UIScreen mainScreen].bounds];
        _bgView.backgroundColor = [UIColor redColor];
        
        UIButton *showBtn = [[UIButton alloc] initWithFrame:CGRectMake(100, 200, 100, 50)];
        showBtn.backgroundColor = [UIColor blackColor];
        [showBtn setTitle:@"show" forState:UIControlStateNormal];
        [showBtn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
        [showBtn addTarget:self action:@selector(showBtnClick) forControlEvents:UIControlEventTouchUpInside];
        [_bgView addSubview:showBtn];
    }
    
    return _bgView;
}

- (UIView *)pushView
{
    if (!_pushView) {
        _pushView = [[UIView alloc] initWithFrame:CGRectMake(0, SCREEN_HEIGHT, SCREEN_WIDTH, 250)];
        _pushView.backgroundColor = [UIColor greenColor];
        
        UIButton *hideBtn = [[UIButton alloc] initWithFrame:CGRectMake(100, 100, 100, 50)];
        hideBtn.backgroundColor = [UIColor blackColor];
        [hideBtn setTitle:@"hide" forState:UIControlStateNormal];
        [hideBtn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
        [hideBtn addTarget:self action:@selector(hideBtnClick) forControlEvents:UIControlEventTouchUpInside];
        [_pushView addSubview:hideBtn];
    }
    
    return _pushView;
}

- (UIView *)coverView
{
    if (!_coverBtn) {
        _coverBtn = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT)];
        _coverBtn.backgroundColor = [UIColor blackColor];
        _coverBtn.alpha = 0.0;
        [_coverBtn addTarget:self action:@selector(hideBtnClick) forControlEvents:UIControlEventTouchUpInside];
    }
    
    return _coverBtn;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    [self createView];
}

- (void)createView
{
    [self.view addSubview:self.bgView];
    [self.view addSubview:self.coverView];
    [self.view addSubview:self.pushView];
}

#pragma mark - UIButtonClick

- (void)showBtnClick
{
    [UIView animateWithDuration:0.5 animations:^{
        _pushView.frame = CGRectMake(0, SCREEN_HEIGHT - _pushView.frame.size.height, SCREEN_WIDTH, _pushView.frame.size.height);
        
        CALayer *layer = _bgView.layer;
        CATransform3D rotationAndPerspectiveTransform = CATransform3DIdentity;//获取一个标准默认的CATransform3D仿射变换矩阵
        rotationAndPerspectiveTransform.m34 = 1.0 / -300; //透明效果
        layer.transform = CATransform3DRotate(rotationAndPerspectiveTransform, 5.0f * M_PI / 180.0f, 1.0f, 0.0f, 0.0f);//旋转
        layer.zPosition = -5555 ;//大于 SCREEN_HEIGHT [UIScreen mainScreen].bounds.size.height/2 * 5.0f * M_PI / 180.0f
        
        _coverBtn.alpha = 0.4;
    } completion:^(BOOL finished) {
        [UIView animateWithDuration:0.3 animations:^{
            _bgView.transform = CGAffineTransformMakeScale(0.8, 0.95);//x和y方向缩放倍数
            
            _coverBtn.alpha = 0.5;
        }];
    }];
}

- (void)hideBtnClick
{
    [UIView animateWithDuration:0.3 animations:^{
        CALayer *layer = _bgView.layer;
        CATransform3D rotationAndPerspectiveTransform = CATransform3DIdentity;//获取一个标准默认的CATransform3D仿射变换矩阵
        rotationAndPerspectiveTransform.m34 = 1.0 / 300;//透明效果
        layer.transform = CATransform3DRotate(rotationAndPerspectiveTransform, -5.0f * M_PI / 180.0f, 1.0f, 0.0f, 0.0f);//旋转
        layer.zPosition = -5555;//大于 SCREEN_HEIGHT [UIScreen mainScreen].bounds.size.height/2 * 5.0f * M_PI / 180.0f 
        
        _coverBtn.alpha = 0.4;
        
        _pushView.frame = CGRectMake(0, SCREEN_HEIGHT, SCREEN_WIDTH, _pushView.frame.size.height);
    } completion:^(BOOL finished) {
        [UIView animateWithDuration:0.3 animations:^{
            _bgView.transform = CGAffineTransformMakeScale(1.0, 1.0);//恢复原型
            _coverBtn.alpha = 0.0;
        }];
    }];
}

相关资料：
zPosition
CATransform3D 矩阵变换之立方体旋转实现细节