iOS動畫之自定義轉(zhuǎn)場動畫(push)

push.gif

iOS7 開始蘋果推出了自定義轉(zhuǎn)場的 API 。從此，任何可以用 CoreAnimation 實現(xiàn)的動畫，都可以出現(xiàn)在兩個 ViewController 的切換之間。并且實現(xiàn)方式高度解耦，這也意味著在保證代碼干凈的同時想要替換其他動畫方案時只需簡單改一個類名就可以了，真正體會了一把高顏值代碼帶來的愉悅感。
其實網(wǎng)上關(guān)于自定義轉(zhuǎn)場動畫的教程很多，這里我是希望同學(xué)們能易懂，易上手。

轉(zhuǎn)場分兩種Push和Modal,所以自定義轉(zhuǎn)場動畫也就肯定分兩種，今天我們講的是Push

自定義轉(zhuǎn)場動畫Push

想在Push的時候?qū)崿F(xiàn)自定義轉(zhuǎn)場動畫首先要遵守一個協(xié)議UINavigationControllerDelegate

蘋果在 UINavigationControllerDelegate 中給出了幾個協(xié)議方法，通過返回類型就可以很清楚地知道各自的具體作用。

//用來自定義轉(zhuǎn)場動畫
- (nullable id <UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController
                                   animationControllerForOperation:(UINavigationControllerOperation)operation
                                                fromViewController:(UIViewController *)fromVC
                                                  toViewController:(UIViewController *)toVC  NS_AVAILABLE_IOS(7_0);

//為這個動畫添加用戶交互

- (nullable id <UIViewControllerInteractiveTransitioning>)navigationController:(UINavigationController *)navigationController
                          interactionControllerForAnimationController:(id <UIViewControllerAnimatedTransitioning>) animationController NS_AVAILABLE_IOS(7_0);

在第一個方法里只要返回一個準守UIViewControllerInteractiveTransitioning協(xié)議的對象,并在里面實現(xiàn)動畫即可

  1. 創(chuàng)建繼承自 NSObject 并且聲明 UIViewControllerAnimatedTransitioning 的的動畫類。

  2. 重載 UIViewControllerAnimatedTransitioning 中的協(xié)議方法。

//返回動畫時間
- (NSTimeInterval)transitionDuration:(nullable id <UIViewControllerContextTransitioning>)transitionContext;

//將動畫的代碼寫到里面即可
- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext;

首先我自定義一個名為CustomAnimateTransitionPush的類繼承于NSObject準守了UIViewControllerAnimatedTransitioning協(xié)議


    self.transitionContext=transitionContext;
    
    // 獲取動畫的源控制器和目標(biāo)控制器
    ViewController * fromVC = (ViewController *)[transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
    PushViewController *toVC = (PushViewController *)[transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
    UIView *contView = [transitionContext containerView];
    
    UIButton *button = fromVC.button;
    
    UIBezierPath *maskStartBP =  [UIBezierPath bezierPathWithOvalInRect:button.frame];
    // 都添加到container中。注意順序
    [contView addSubview:fromVC.view];
    [contView addSubview:toVC.view];
    
    
    //*******************************下面代碼就是自定義動畫了大家把想要實現(xiàn)的動畫寫在下面即可**********************//
    
    //創(chuàng)建兩個圓形的 UIBezierPath 實例；一個是 button 的 size ，另外一個則擁有足夠覆蓋屏幕的半徑。最終的動畫則是在這兩個貝塞爾路徑之間進行的
    CGPoint finalPoint;
    //判斷觸發(fā)點在那個象限
    if(button.frame.origin.x > (toVC.view.bounds.size.width / 2)){
        if (button.frame.origin.y < (toVC.view.bounds.size.height / 2)) {
            //第一象限
            finalPoint = CGPointMake(button.center.x - 0, button.center.y - CGRectGetMaxY(toVC.view.bounds)+30);
        }else{
            //第四象限
            finalPoint = CGPointMake(button.center.x - 0, button.center.y - 0);
        }
    }else{
        if (button.frame.origin.y < (toVC.view.bounds.size.height / 2)) {
            //第二象限
            finalPoint = CGPointMake(button.center.x - CGRectGetMaxX(toVC.view.bounds), button.center.y - CGRectGetMaxY(toVC.view.bounds)+30);
        }else{
            //第三象限
            finalPoint = CGPointMake(button.center.x - CGRectGetMaxX(toVC.view.bounds), button.center.y - 0);
        }
    }
    
    
    CGFloat radius = sqrt((finalPoint.x * finalPoint.x) + (finalPoint.y * finalPoint.y));
    UIBezierPath *maskFinalBP = [UIBezierPath bezierPathWithOvalInRect:CGRectInset(button.frame, -radius, -radius)];
    
    //創(chuàng)建一個 CAShapeLayer 來負責(zé)展示圓形遮蓋
    
    CAShapeLayer *maskLayer = [CAShapeLayer layer];
    maskLayer.path = maskFinalBP.CGPath; //將它的 path 指定為最終的 path 來避免在動畫完成后會回彈
    toVC.view.layer.mask = maskLayer;
    
    CABasicAnimation *maskLayerAnimation = [CABasicAnimation animationWithKeyPath:@"path"];
    maskLayerAnimation.fromValue = (__bridge id)(maskStartBP.CGPath);
    maskLayerAnimation.toValue = (__bridge id)((maskFinalBP.CGPath));
    maskLayerAnimation.duration = [self transitionDuration:transitionContext];
    maskLayerAnimation.timingFunction = [CAMediaTimingFunction  functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    maskLayerAnimation.delegate = self;
    
    [maskLayer addAnimation:maskLayerAnimation forKey:@"path"];
    
    
    //*******************************上面代碼就是自定義動畫了大家把想要實現(xiàn)的動畫寫在上面即可**********************//

在控制器里面用來自定義轉(zhuǎn)場動畫的方法里返回剛才自定義的動畫類


-(id<UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController animationControllerForOperation:(UINavigationControllerOperation)operation fromViewController:(UIViewController *)fromVC toViewController:(UIViewController *)toVC
{
    
    if(operation==UINavigationControllerOperationPush)
    {
        //自定義的動畫類
        CustomAnimateTransitionPush *animateTransitionPush=[CustomAnimateTransitionPush new];
        return animateTransitionPush;
    }
    else
    {
        return nil;
    }
    
}

到此為止自定義轉(zhuǎn)場動畫就完成了
pop的動畫只是把push動畫反過來做一遍這里就不細講了，有疑問的可以去看代碼

上面說到這個方法是為這個動畫添加用戶交互的所以我們要在pop時實現(xiàn)滑動返回
最簡單的方式應(yīng)該就是利用UIKit提供的UIPercentDrivenInteractiveTransition類了，這個類已經(jīng)實現(xiàn)了UIViewControllerInteractiveTransitioning協(xié)議，同學(xué)men可以通過這個類的對象指定轉(zhuǎn)場動畫的完成百分比。

//為這個動畫添加用戶交互

- (nullable id <UIViewControllerInteractiveTransitioning>)navigationController:(UINavigationController *)navigationController
                          interactionControllerForAnimationController:(id <UIViewControllerAnimatedTransitioning>) animationController NS_AVAILABLE_IOS(7_0);
第一步 添加手勢

  UIPanGestureRecognizer *gestureRecognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePan:)];
  [self.view addGestureRecognizer:gestureRecognizer];
第二步 通過用戶滑動的變化確定動畫執(zhí)行的比例

- (void)handlePan:(UIPanGestureRecognizer *)gestureRecognizer {
    
    /*調(diào)用UIPercentDrivenInteractiveTransition的updateInteractiveTransition:方法可以控制轉(zhuǎn)場動畫進行到哪了，
      當(dāng)用戶的下拉手勢完成時，調(diào)用finishInteractiveTransition或者cancelInteractiveTransition，UIKit會自動執(zhí)行剩下的一半動畫，
      或者讓動畫回到最開始的狀態(tài)。*/
    
  
    
    if([gestureRecognizer translationInView:self.view].x>=0)
    {
        //手勢滑動的比例
        CGFloat per = [gestureRecognizer translationInView:self.view].x / (self.view.bounds.size.width);
        per = MIN(1.0,(MAX(0.0, per)));
        
        if (gestureRecognizer.state == UIGestureRecognizerStateBegan) {
            
            [self.navigationController popViewControllerAnimated:YES];
            
        }else if (gestureRecognizer.state == UIGestureRecognizerStateChanged){
            
            [ self.interactiveTransition updateInteractiveTransition:per];
            
        }else if (gestureRecognizer.state == UIGestureRecognizerStateEnded || gestureRecognizer.state == UIGestureRecognizerStateCancelled){
            if (per > 0.5) {
                [ self.interactiveTransition finishInteractiveTransition];
            }else{
                [ self.interactiveTransition cancelInteractiveTransition];
            }
             self.interactiveTransition = nil;
        }
        
        
    }
}
第三步 在為動畫添加用戶交互的代理方法里返回UIPercentDrivenInteractiveTransition的實例
- (id <UIViewControllerInteractiveTransitioning>)navigationController:(UINavigationController *)navigationController
                          interactionControllerForAnimationController:(id <UIViewControllerAnimatedTransitioning>) animationController {
    return self.interactiveTransition;
}

如果感覺這篇文章對您有所幫助，順手點個喜歡，謝謝啦
代碼放在了GitHub上大家可以下載。

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

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

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