模仿簡(jiǎn)書文章詳情頁(yè)點(diǎn)擊專題3D翻轉(zhuǎn)效果

pushgif.gif

獲取屏幕的宏

//獲取當(dāng)前屏幕高
#define  SCREEN_HEIGHT [UIScreen mainScreen].bounds.size.height

//獲取當(dāng)前屏幕寬
#define  SCREEN_WIDTH  [UIScreen mainScreen].bounds.size.width

創(chuàng)建三個(gè)視圖,最底層顯示文章詳情頁(yè),中間的用一個(gè)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;//獲取一個(gè)標(biāo)準(zhǔn)默認(rèn)的CATransform3D仿射變換矩陣
        rotationAndPerspectiveTransform.m34 = 1.0 / -300; //透明效果
        layer.transform = CATransform3DRotate(rotationAndPerspectiveTransform, 5.0f * M_PI / 180.0f, 1.0f, 0.0f, 0.0f);//旋轉(zhuǎn)
        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方向縮放倍數(shù)
            
            _coverBtn.alpha = 0.5;
        }];
    }];
}

- (void)hideBtnClick
{
    [UIView animateWithDuration:0.3 animations:^{
        CALayer *layer = _bgView.layer;
        CATransform3D rotationAndPerspectiveTransform = CATransform3DIdentity;//獲取一個(gè)標(biāo)準(zhǔn)默認(rèn)的CATransform3D仿射變換矩陣
        rotationAndPerspectiveTransform.m34 = 1.0 / 300;//透明效果
        layer.transform = CATransform3DRotate(rotationAndPerspectiveTransform, -5.0f * M_PI / 180.0f, 1.0f, 0.0f, 0.0f);//旋轉(zhuǎn)
        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);//恢復(fù)原型
            _coverBtn.alpha = 0.0;
        }];
    }];
}

相關(guān)資料:
zPosition
CATransform3D 矩陣變換之立方體旋轉(zhuǎn)實(shí)現(xiàn)細(xì)節(jié)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容