iOS swift交互式转场动画

交互式转场动画

交互式转场动画，提高动画与用户交互性，从而提升用户体验。
通过手势、重力感觉等交互操作，使原本连贯的动画分解，逐渐变化。

思路：
把原本的动画的过渡，抽象成百分比形式（UIPercentDrivenInteractiveTransition协议实现原理），与交互操作的变化系数关联起来。

UIPercentDrivenInteractiveTransition

UIViewControllerInteractiveTransitioning 协议为我们提供一系列便利的方法，可以通过一个百分比控制交互切换的过程

api.png

从系统的api可以看出，交互式转场动画兼容iOS7以上

• update(float)
  更新动画进度的百分比，一般通过手势识别长度计算出的值
• cancel ( )
  取消交互，返回切换前的状态
• finish ( )
  完成交互，更新到切换后的状态

demo

【交互式转场动画】，是建立在【非交互式转场动画】的基础之上
【非交互式】只需要提供present和dismiss的动画即可
【交互式】则需要在【非交互式】基础上多提供--交互式动画控制器

ps: 非交互式转场动画，我之前也有文章涉及，这里就不作细述

新建一个工具类继承于UIPercentDrivenInteractiveTransition，实现交互切换的协议

import UIKit

//判断是【交互式】还是【非交互式】
private var isInteractive = false

//判断是presented还是dismiss
private var isPresenting  = false

class MenuTransitionHepler: UIPercentDrivenInteractiveTransition,UIViewControllerAnimatedTransitioning,UIViewControllerTransitioningDelegate {
    
    //step.4
    //实现UIPercentDrivenInteractiveTransition交互切换协议
    //present切换启动手势
    private var enterPanGesture: UIScreenEdgePanGestureRecognizer!
    
    //present交互动画控制器
    var sourceViewController : UIViewController! {
        didSet{
            self.enterPanGesture = UIScreenEdgePanGestureRecognizer()
            self.enterPanGesture.addTarget(self, action: #selector(MenuTransitionHepler.handelOnStagePan(pan:)))
            self.enterPanGesture.edges=UIRectEdge.left
            self.sourceViewController.view.addGestureRecognizer(self.enterPanGesture)
            
        }
    }
    
    //present手势长度比率，控制动画进度
    func handelOnStagePan(pan:UIPanGestureRecognizer){
        
        let view_transition = pan.translation(in: pan.view!.superview)
        //手势滑动长度与屏幕宽度的比率，用于控制切换动画进度
        let d = view_transition.x / (pan.view?.bounds.width)! * 0.5
        
        
        print(d)
        
        switch pan.state {
        case UIGestureRecognizerState.began:
            isInteractive=true
            //调用fromVC调用present方法，此方法是storyboard的线跳
            self.sourceViewController.performSegue(withIdentifier: "presentMenu", sender: self)
            
            break
        case UIGestureRecognizerState.changed:
            //更新切换动画进度
            self.update(d)
            
            break
        default:
            isInteractive = false
            if(d > 0.2){
                //更新动画到完成状态
                self.finish()
            }
            else {
                //返回动画到切换前的状态
                self.cancel()
            }
            break
        }
        
    }
    
    //dismiss切换启动手势
    private var exitPanGesture: UIPanGestureRecognizer!
    
    //dismiss交互动画控制器
    var menuViewController: UIViewController! {
        didSet {
            self.exitPanGesture = UIPanGestureRecognizer()
            self.exitPanGesture.addTarget(self, action:#selector(MenuTransitionHepler.handleOffstagePan(pan:)))
            self.menuViewController.view.addGestureRecognizer(self.exitPanGesture)
        }
    }
    
    //dismiss手势长度比率，控制动画进度
    func handleOffstagePan(pan: UIPanGestureRecognizer){
        let view_transition = pan.translation(in: pan.view!)
        
        let d = view_transition.x / (pan.view?.bounds.width)! * -0.5
        
        switch pan.state {
        case UIGestureRecognizerState.began:
            isInteractive=true
            self.menuViewController.dismiss(animated: true, completion: nil)
            
            break
        case UIGestureRecognizerState.changed:
            self.update(d)
            
            break
        default:
            isInteractive = false
            if(d > 0.1){
                self.finish()
            }
            else {
                self.cancel()
            }
            break
        }
    }
    
}

上述代码中，主要实现几个功能：
1、添加present和dismiss的动画切换控制器（即VC）
2、为VC添加交互手势
3、设置手势响应方法，判断手势状态更新切换进度

在MenuTransitionHepler工具类最外面，添加 UIViewControllerTransitioningDelegate的实现方法

 

//step.1
//UIViewControllerTransitioningDelegate代理方法
extension MenuTransitionHepler{
    //presented
    func animationController(forPresented presented: UIViewController, presenting: UIViewController, source: UIViewController) -> UIViewControllerAnimatedTransitioning? {
        isPresenting=true
        return self
    }
    
    //dismissed
    func animationController(forDismissed dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning? {
        isPresenting=false
        return self
    }
    
    func interactionControllerForPresentation(using animator: UIViewControllerAnimatedTransitioning) -> UIViewControllerInteractiveTransitioning? {
        return isInteractive ? self : nil
    }
    
    func interactionControllerForDismissal(using animator: UIViewControllerAnimatedTransitioning) -> UIViewControllerInteractiveTransitioning? {
        return isInteractive ? self : nil
    }
}

接下来就是实现非交互切换的方法（交互式切换需要实现此方法），这里就卖个关子，感兴趣的童鞋可以看demo源码

最后在fromVC设置自定义present的动画控制器和代理

 

import UIKit

class fromVC: UIViewController {

    //step.5
    //初始化自定义转场动画协议对象
    let transitionHelper = MenuTransitionHepler()
    
    override func viewDidLoad() {
        super.viewDidLoad()

        //step.6
        //设置转场动画的fromVC
        self.transitionHelper.sourceViewController=self
    }
    
    
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        
        //step.7
        //设置转场动画的toVC
        let menu = segue.destination as! MenuVC
         
        //step.8
        //设置transitioningDelegate为【自定义转场协议】
        menu.transitioningDelegate = self.transitionHelper

        self.transitionHelper.menuViewController = menu
    }
    
}

finish！如果在左边缘开始滑动，效果如下图：P

效果图.gif

总结

总体来说，iOS7后实现转场动画确实很方便

非交互式转场动画，实现转场协议，设置动画时间、动画逻辑、动画实现即可

交互式转场动画，则在非交互式的基础上，多设置动画控制器（VC）、触发交互的方法

附带 Demo传送门，demo实现效果比较简单，后期也有改成侧滑框架的可能