iOS動(dòng)畫 — 轉(zhuǎn)場(chǎng) — Tap Fill Out

轉(zhuǎn)場(chǎng)動(dòng)畫繼續(xù)學(xué)習(xí)中，本次在github上看到一個(gè)效果Animated，如下圖，特此模仿下。

TapOne

很直接呈現(xiàn)出了轉(zhuǎn)場(chǎng)動(dòng)畫中的 presentViewController和 dismissModalViewControllerAnimated, 實(shí)現(xiàn)思路也是很直接的三部曲。

  • UIViewControllerAnimatedTransitioning （要實(shí)現(xiàn)的動(dòng)畫效果）
  • UIViewControllerTransitioningDelegate （重寫遵循上述效果）
  • viewController.transitioningDelegate = self （遵循上述代理）

直接來代碼

UIViewControllerAnimatedTransitioning （要實(shí)現(xiàn)的動(dòng)畫效果）

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>

@interface Animator : NSObject <UIViewControllerAnimatedTransitioning>

@property (nonatomic, assign) BOOL presenting; // 是否 presenting
@property (nonatomic, strong) UIColor *viewColor; // 呈現(xiàn)的一個(gè)顏色
@property (nonatomic, assign) CGPoint startingPoint; // 開始的位置

@end

#import "Animator.h"

@interface Animator ()

@property (nonatomic, strong) UIView *changeView;

@end

@implementation Animator

- (NSTimeInterval)transitionDuration:(id <UIViewControllerContextTransitioning>)transitionContext {
    return 0.5;
}

- (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext {
    
    UIView *containerView = [transitionContext containerView];
    containerView.backgroundColor = [UIColor whiteColor];
    if (self.presenting) {
        UIView *presentedControllerView =  [transitionContext viewForKey:UITransitionContextToViewKey];
//       [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey].view;
        CGPoint originalCenter = presentedControllerView.center;
        CGSize originalSize = presentedControllerView.frame.size;
        self.changeView = [[UIView alloc] init];
        self.changeView.frame = [self frameForBubble:originalCenter size:originalSize start:self.startingPoint];
        self.changeView.layer.cornerRadius = self.changeView.frame.size.height/2;
        self.changeView.center = self.startingPoint;
        // 設(shè)置起始點(diǎn) 0.01
        self.changeView.transform = CGAffineTransformMakeScale(0.001, 0.001);
        self.changeView.backgroundColor = self.viewColor;
        [containerView addSubview:self.changeView];
        
        presentedControllerView.center = self.startingPoint;
        presentedControllerView.transform = CGAffineTransformMakeScale(0.001, 0.001);
        presentedControllerView.alpha = 0;
        [containerView addSubview:presentedControllerView];
        
        [UIView animateWithDuration:[self transitionDuration:transitionContext] animations:^{
            self.changeView.transform = CGAffineTransformIdentity;
            presentedControllerView.transform = CGAffineTransformIdentity;
            presentedControllerView.alpha = 1;
            presentedControllerView.center = originalCenter;
        } completion:^(BOOL finished) {
            [transitionContext completeTransition:YES];
        }];
        
    }else {
     
        UIView *returningControllerView =  [transitionContext viewForKey:UITransitionContextFromViewKey];
//       [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey].view;  
        CGPoint originalCenter = returningControllerView.center;
        CGSize originalSize = returningControllerView.frame.size;
        
        self.changeView.frame = [self frameForBubble:originalCenter size:originalSize start:self.startingPoint];
        self.changeView.layer.cornerRadius = self.changeView.frame.size.height / 2;
        self.changeView.center = self.startingPoint;
        
        [UIView animateWithDuration:[self transitionDuration:transitionContext] animations:^{
            self.changeView.transform = CGAffineTransformMakeScale(0.001, 0.001);
            returningControllerView.transform = CGAffineTransformMakeScale(0.001, 0.001);
            returningControllerView.center = self.startingPoint;
            returningControllerView.alpha = 0;
            
        } completion:^(BOOL finished) {
            returningControllerView.center = originalCenter;
            [returningControllerView removeFromSuperview];
            [self.changeView removeFromSuperview];
            [transitionContext completeTransition:YES];
        }];
        
    }
    
}

- (CGRect)frameForBubble:(CGPoint)originalCenter size:(CGSize)originalSize start:(CGPoint)start {
    // 求最大值
    CGFloat lengthX = fmaxf(start.x, originalSize.width - start.x);
    CGFloat lengthY = fmaxf(start.y, originalSize.height - start.y);
    // 求平方根
    CGFloat offset = sqrt(lengthX * lengthX + lengthY * lengthY) * 2;
    // 求出圓的size
    CGSize size = CGSizeMake(offset, offset);
    // 轉(zhuǎn)化為 height
    return CGRectMake(0, 0, size.width, size.height);
}

@end

UIViewControllerTransitioningDelegate （重寫遵循上述效果）
viewController.transitioningDelegate = self （遵循上述代理)

#import "ViewController.h"
#import "SecondViewController.h"
#import "Animator.h"

@interface ViewController () <UIViewControllerTransitioningDelegate>

@property (weak, nonatomic) IBOutlet UIButton *goButton;
@property (nonatomic, strong) Animator *animator;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // self.goButton size == (60,60)
    self.goButton.layer.cornerRadius = 30.f;
    self.goButton.layer.masksToBounds = YES;
    // Animator init
    self.animator = [[Animator alloc] init];
}

- (IBAction)goAction:(id)sender {
    
    SecondViewController *secondVC = [[UIStoryboard storyboardWithName:@"Main" bundle:[NSBundle mainBundle]] instantiateViewControllerWithIdentifier:@"SecondViewController"];
    secondVC.transitioningDelegate = self;
    secondVC.modalPresentationStyle = UIModalPresentationCustom;
    [self presentViewController:secondVC animated:YES completion:nil];
    
}

#pragma mark - UIViewControllerTransitioningDelegate
- (nullable id <UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source {
    self.animator.presenting = YES;
    self.animator.startingPoint = self.goButton.center;
    self.animator.viewColor = self.goButton.backgroundColor;
    return self.animator;
}

- (nullable id <UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed {
    self.animator.presenting = NO;
    self.animator.startingPoint = self.goButton.center;
    self.animator.viewColor = self.goButton.backgroundColor;
    return self.animator;
}

@end

返回的時(shí)候

#import "SecondViewController.h"

@interface SecondViewController ()

@property (weak, nonatomic) IBOutlet UIButton *backButton;

@end

@implementation SecondViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor greenColor];
    // self.backButton size == (60,60)
    // backGroundColor = whiteColor titleColor = greenColor;
    self.backButton.layer.cornerRadius = 30.f;
    self.backButton.layer.masksToBounds = YES;
    // self.title == @"+", 轉(zhuǎn)換成 X
    self.backButton.transform = CGAffineTransformMakeRotation(M_PI_4);
}

- (IBAction)backAction:(id)sender {
    [self dismissViewControllerAnimated:YES completion:nil];
}

@end

上述就是簡(jiǎn)單的實(shí)現(xiàn)，我的理解是在我們?cè)?present 或 dismiss 的時(shí)候，增加相應(yīng)的動(dòng)畫，而動(dòng)畫的獲取又是由相應(yīng)的代理可以實(shí)現(xiàn)，這樣就簡(jiǎn)單實(shí)現(xiàn)了。

注意點(diǎn)1：viewControllerForKey & viewForKey

- (nullable __kindof UIViewController *)viewControllerForKey:(NSString *)key；
- (nullable __kindof UIView *)viewForKey:(NSString *)key NS_AVAILABLE_IOS(8_0);

注意的是兩者不要混淆了，特別是兩個(gè)Key 可能看錯(cuò)，并且viewForKey是iOS 8.0 之后的。而且viewForKey和viewControlelrForKey直接操縱view是有區(qū)別的，前者可能是復(fù)制一個(gè)view進(jìn)行操作，后者是ViewController對(duì)應(yīng)的View進(jìn)行操作，具體可以看看自定義轉(zhuǎn)場(chǎng)在iOS8中的那些坑, 而我直接一點(diǎn)感受是后期我們盡量用 viewForKey。

注意點(diǎn)2： modalPresentationStyle & modalTransitionStyle

  • modalPresentationStyle 彈出時(shí)的風(fēng)格
  • modalTransitionStyle 彈出時(shí)的動(dòng)畫風(fēng)格 
typedef NS_ENUM(NSInteger, UIModalTransitionStyle) {
    //默認(rèn)的，從下向上覆蓋
    UIModalTransitionStyleCoverVertical = 0,
    //水平翻轉(zhuǎn)
    UIModalTransitionStyleFlipHorizontal __TVOS_PROHIBITED,
    //溶解
    UIModalTransitionStyleCrossDissolve,
    //從下向上翻頁(yè)
    UIModalTransitionStylePartialCurl NS_ENUM_AVAILABLE_IOS(3_2) __TVOS_PROHIBITED,
};

typedef NS_ENUM(NSInteger, UIModalPresentationStyle) {
        //填充整個(gè)屏幕
        UIModalPresentationFullScreen = 0,
        //留下狀態(tài)欄
        UIModalPresentationPageSheet NS_ENUM_AVAILABLE_IOS(3_2) __TVOS_PROHIBITED,
        //四周留下變暗的空白，彈出在中間
        UIModalPresentationFormSheet NS_ENUM_AVAILABLE_IOS(3_2) __TVOS_PROHIBITED,
        //和跳轉(zhuǎn)到它的控制器保持一致
        UIModalPresentationCurrentContext NS_ENUM_AVAILABLE_IOS(3_2),
        //自定義
        UIModalPresentationCustom NS_ENUM_AVAILABLE_IOS(7_0),
        // iOS 8.0 之后用的
        UIModalPresentationOverFullScreen NS_ENUM_AVAILABLE_IOS(8_0),
        UIModalPresentationOverCurrentContext NS_ENUM_AVAILABLE_IOS(8_0),
       // modal出來是個(gè)popover
        UIModalPresentationPopover NS_ENUM_AVAILABLE_IOS(8_0) __TVOS_PROHIBITED,
        UIModalPresentationNone NS_ENUM_AVAILABLE_IOS(7_0) = -1,         
};

備注參考
https://satanwoo.github.io/2015/11/12/Swift-UITransition-iOS8/
http://www.cnblogs.com/hlwfirst/p/5459550.html

最后編輯于 ：
?著作權(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)容