自定義轉(zhuǎn)場(chǎng)-模仿簡(jiǎn)書(shū)的效果

當(dāng)看到了簡(jiǎn)書(shū)的轉(zhuǎn)場(chǎng)效果, 覺(jué)得很有意思就試著進(jìn)行做一個(gè). 自定義轉(zhuǎn)場(chǎng), 有一種后轉(zhuǎn)的效果出現(xiàn). 立體效果比較明顯.

簡(jiǎn)單的做一個(gè)demo

簡(jiǎn)書(shū)的轉(zhuǎn)場(chǎng)特效.gif

在上一篇文章中我已經(jīng)指出, 蘋果在WDCC2014年中提供了新的API給我們實(shí)現(xiàn)轉(zhuǎn)場(chǎng)效果.
與上一篇文章做一個(gè)效果的對(duì)比, 首先它多的地方就是需要進(jìn)行三維的偏轉(zhuǎn), 加有一定陰影.

  1. 三維效果需要有一種即視的立體感.

demo的代碼

Custom3D中代碼實(shí)現(xiàn),轉(zhuǎn)場(chǎng)的代理和動(dòng)畫的執(zhí)行方式
有一點(diǎn)需要了解的就是:(這個(gè)是 圖層3D旋轉(zhuǎn)的 屬性.其中M34很重要)
CATransform3D transform = CATransform3DIdentity; // 如何增加立體感，近大遠(yuǎn)小 // 400.0 可以理解為，人的眼睛離手機(jī)屏幕的垂直距離，越小，近大遠(yuǎn)小效果越明顯 transform.m34 = -1 / 400.0; transform = CATransform3DRotate(transform, _angel, 1, 0, 0);

// .h文件
#import <UIKit/UIKit.h>
// 遵守協(xié)議, 實(shí)現(xiàn)動(dòng)畫協(xié)議
@interface Custom3D : NSObject<UIViewControllerTransitioningDelegate,UIViewControllerAnimatedTransitioning>
// 需要接收外界傳入一個(gè)角度,來(lái)進(jìn)行3D旋轉(zhuǎn)角度
@property (assign, nonatomic) CGFloat angel;
// 需要外界提供需要modal出來(lái)的尺寸.
@property (assign, nonatomic) CGRect rect;
@end

// .m文件
#import "Custom3D.h"
#import "PresentationController.h"

@interface Custom3D()
// 設(shè)置3D的旋轉(zhuǎn), 即視感 修改M34屬性
@property (assign, nonatomic) CATransform3D transform;
// 用來(lái)判斷 是否處于 展示 狀態(tài)
@property (assign,nonatomic) BOOL isPop;

@end
@implementation Custom3D



#pragma mark -- UIViewControllerTransitioningDelegate代理方法

// 當(dāng)外界傳入angel的時(shí)候, 進(jìn)行設(shè)置transform的相關(guān)屬性
- (void)setAngel:(CGFloat)angel
{
    _angel = angel;
    
    CATransform3D transform = CATransform3DIdentity;
    
    // 如何增加立體感，近大遠(yuǎn)小
    // 400.0 可以理解為，人的眼睛離手機(jī)屏幕的垂直距離，越小，近大遠(yuǎn)小效果越明顯
    transform.m34 = -1 / 400.0;
    transform = CATransform3DRotate(transform, _angel, 1, 0, 0);
    self.transform = transform;
}

// 返回一個(gè)UIPresentationController的對(duì)象,該對(duì)象創(chuàng)建需要  展示控制器, 和 換出展示的控制器. 我們可以更改該對(duì)象,進(jìn)行設(shè)置展示控制器大小什么的.
- (UIPresentationController *)presentationControllerForPresentedViewController:(UIViewController *)presented presentingViewController:(UIViewController *)presenting sourceViewController:(UIViewController *)source
{
    PresentationController *presentVC = [[PresentationController alloc]initWithPresentedViewController:presented presentingViewController:presenting];
    
    presentVC.rect = self.rect;
    return presentVC;
}

// 當(dāng)展示出控制器, 需要誰(shuí)來(lái)控制動(dòng)畫的執(zhí)行
- (id<UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source
{
    self.isPop = YES;
    return self;
}
// 但退出控制器的時(shí)候,需要誰(shuí)來(lái)控制動(dòng)畫的執(zhí)行
- (id<UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed
{
    self.isPop = NO;
    return self;
}

// 設(shè)置動(dòng)畫事件
- (NSTimeInterval)transitionDuration:(id<UIViewControllerContextTransitioning>)transitionContext
{
    return 0.5;
}
// 當(dāng)展示和退出都是利用這個(gè)方法來(lái)做動(dòng)畫的, 怎么做呢, 需要注意的是: 彈出時(shí),和退出時(shí), 上下文中的transitionContext 的from和to 進(jìn)行了反轉(zhuǎn). 開(kāi)始是你modal我, 后來(lái)是我modal你
- (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext
{
    // 當(dāng)展示的時(shí)候
    if (self.isPop) {
        // 取出`to`控制器, modal出來(lái)的控制器
        UIViewController *toPresentVC = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
        // 取出 換出展示的控制器.
        UIViewController *fromPrenestVC = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
        // 設(shè)置錨點(diǎn), 讓其從下面出來(lái)
        toPresentVC.view.layer.anchorPoint = CGPointMake(0.5, 1);
        toPresentVC.view.layer.shadowColor = [UIColor grayColor].CGColor;
        toPresentVC.view.layer.shadowOffset = CGSizeMake(3, 3);
        
        toPresentVC.view.layer.shadowOpacity = 1.0;
        // 需要將modal出來(lái)的控制器,加到 上下文的 containerView中, 需要添加,否則不會(huì)展示出來(lái)view .
        [[transitionContext containerView] addSubview:toPresentVC.view];
        // 當(dāng)沒(méi)有被展示的時(shí)候 需要隱藏
        toPresentVC.view.hidden = YES;
        // 呼出展示控制器的控制器,的時(shí)候要有一定的陰影效果
        fromPrenestVC.view.layer.shadowOffset = CGSizeMake(10, 10);
        fromPrenestVC.view.layer.shadowOpacity = 1.0;
        fromPrenestVC.view.layer.shadowColor = [UIColor grayColor].CGColor;
        // 此控制器,需要將錨點(diǎn) 進(jìn)行更正, 如果從中心位置進(jìn)行反轉(zhuǎn)的話,會(huì)出現(xiàn)一半載里面,一半在外面,會(huì)將蒙版擋住.  所以錨點(diǎn)必須設(shè)置在底部中心處.
        fromPrenestVC.view.layer.anchorPoint = CGPointMake(0.5, 1);
        // 當(dāng)錨點(diǎn)設(shè)置時(shí)候, 會(huì)將原layer進(jìn)行了一定的改變, 錨點(diǎn)--找到定位點(diǎn), 似的layer向上移, 所以需要layer向下移動(dòng)
        fromPrenestVC.view.layer.frame = [UIScreen mainScreen].bounds;
        // 設(shè)置開(kāi)始時(shí) 展示控制器的 形變
        toPresentVC.view.transform = CGAffineTransformMakeTranslation(0, self.rect.size.height);
       
        // 設(shè)置展示動(dòng)畫
        [UIView animateWithDuration:0.5 animations:^{
            
            // 呼出展示控制器的控制器 的3D動(dòng)畫
            fromPrenestVC.view.layer.transform = self.transform;
      
//
            
        } completion:^(BOOL finished) {
            // 完成后在執(zhí)行 展示控制器 彈出
            [UIView animateWithDuration:0.5 animations:^{
                
                
                //首先觀察到, 系統(tǒng)會(huì)先3D 后又在 整體frame減小, 自己再次更改,讓動(dòng)畫顯得流暢
                fromPrenestVC.view.transform =     CGAffineTransformMakeScale(0.93, 0.93);
                // 展示控制器 彈出, 去掉原來(lái)設(shè)置的 形變值就行了
                toPresentVC.view.transform = CGAffineTransformIdentity;
                // 展示控制器顯示出來(lái)
              toPresentVC.view.hidden = NO;
            } completion:^(BOOL finished) {
                // 完成動(dòng)畫后,記得將上下文 關(guān)閉, 否則不能完成以后的動(dòng)畫
                [transitionContext completeTransition:YES];
            }];
            
            
        }];
        
    
    }
    // 退出的時(shí)候  dismiss的時(shí)候, 上下文中的結(jié)構(gòu)就改變了.  我們需要將后面的控制器 modal出來(lái)
    else{
        // 取出展示的控制器
        UIViewController *toPresentVC = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
        // 取出呼出展示控制器的控制器
        UIViewController *fromPrenestVC = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
        // 設(shè)置結(jié)束的動(dòng)畫
        [UIView animateWithDuration:0.5 animations:^{
            // 展示控制器的圖層 3D形變,需要再次后翻的動(dòng)畫
            toPresentVC.view.layer.transform = self.transform;
            // 呼出展示控制器的控制器,的形變進(jìn)行設(shè)置,讓整個(gè)控制器 向下移動(dòng) 設(shè)置的值.
            fromPrenestVC.view.transform = CGAffineTransformMakeTranslation(0, self.rect.size.height);
            
        } completion:^(BOOL finished) {
            
            // 完成后執(zhí)行第二段動(dòng)畫
            [UIView animateWithDuration:0.5 animations:^{
                // 展示控制器的 形變恢復(fù)
                toPresentVC.view.transform = CGAffineTransformIdentity;
            } completion:^(BOOL finished) {
                // 動(dòng)畫完成后 需要關(guān)閉上下文,否則不能執(zhí)行下一代動(dòng)畫
                [transitionContext completeTransition:YES];
            }];
            
        }];
   
    }
}
@end

PresentationController,專門為自己modal的控制器的尺寸設(shè)置的, 自己可以進(jìn)行尺寸的設(shè)置.

// .h文件
#import <UIKit/UIKit.h>

@interface PresentationController : UIPresentationController
// 需要外界傳入尺寸, 來(lái)設(shè)置modal出來(lái)的控制器的大小
@property (assign, nonatomic) CGRect rect;
@end

// .m文件

#import "PresentationController.h"
@interface PresentationController()
// 設(shè)置蒙版層
@property(nonatomic,strong) UIView *cover;

@end
@implementation PresentationController
// 對(duì)象中有containerView 中包含 展示的內(nèi)容(展示-- 呼出展示的 view ,控制器等相關(guān)的配置都需要一下的方法進(jìn)行設(shè)置)
- (void)containerViewWillLayoutSubviews
{
    [super containerViewWillLayoutSubviews];
        // 取出展示控制器的frame
        UIViewController *presentVC = self.presentedViewController;
    // 將外界傳入的rect 付給展示的控制器, 也就是設(shè)置展示控制器的frame
    presentVC.view.frame = self.rect;
        // 設(shè)置蒙版
        UIView *cover = [[UIView alloc]initWithFrame:[UIScreen mainScreen].bounds];
        cover.backgroundColor = [[UIColor alloc]initWithWhite:0.5 alpha:0.5];
        //給蒙版添加手勢(shì)
        UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(click)];
        [cover addGestureRecognizer:tap];
    
        self.cover = cover;
        // 加蒙版插到中間.
    
        [self.containerView insertSubview:cover atIndex:0];;
        

}
// 點(diǎn)擊蒙版 退出modal狀態(tài)
- (void)click
{

    [self.presentedViewController dismissViewControllerAnimated:YES completion:nil];
}
@end

viewcontoller文件


#import "ViewController.h"

#import "Custom3D.h"
@interface ViewController ()
// 點(diǎn)擊按鈕
@property (weak, nonatomic) IBOutlet UIButton *modal;
// 點(diǎn)擊觸發(fā)
- (IBAction)clickModal;
// 設(shè)置展示控制器
@property (strong, nonatomic)UIViewController *modalVC;
// 設(shè)置自定義轉(zhuǎn)場(chǎng)的代理, 用于轉(zhuǎn)場(chǎng)3D動(dòng)畫
@property (strong, nonatomic) Custom3D *custom;

@end

@implementation ViewController


- (void)viewDidLoad {
    [super viewDidLoad];
    self.modalVC = [[UIViewController alloc]init];
    self.modalVC.view.backgroundColor = [UIColor redColor];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

- (IBAction)clickModal {
    
    self.custom = [[Custom3D alloc]init];
    self.modalVC.transitioningDelegate = self.custom;
    self.custom.angel = M_1_PI * 0.1;
    
    self.custom.rect =  CGRectMake(0, [UIScreen mainScreen].bounds.size.height-200, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height);
    
    self.modalVC.modalPresentationStyle = UIModalPresentationCustom;
    
    [self presentViewController:self.modalVC animated:YES completion:nil];
}
@end

將這3段代碼,寫在文件中,便可以實(shí)現(xiàn)上述效果. 下一次給大家,講解圖片瀏覽器的功能實(shí)現(xiàn).

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 前言的前言 唐巧前輩在微信公眾號(hào)「iOSDevTips」以及其博客上推送了我的文章后，我的 Github 各項(xiàng)指標(biāo)...
    VincentHK閱讀 5,576評(píng)論 3贊 44
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,045評(píng)論 25贊 709
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫(kù)、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,330評(píng)論 4贊 61
  • 失去了年輕激情的心，身體冰冷的蜷縮在被窩，玩著手機(jī)，在尋找，似乎又想是學(xué)習(xí)著什么。 珊瑚絨的細(xì)膩貼著肌膚，最柔軟且...
    漣漪閱讀 256評(píng)論 0贊 0
  • 罵不出口
    發(fā)村閱讀 223評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容