实现一个复杂动画的界面转场（Swift）

概述效果图 项目地址：ImageMaskTransition 转场原理 对于模态展示（Modal） iOS 8之后，可以通过设置ViewController的转场代理 transitioningDelegate 这个转场代理是一个协议类型UIViewControllerTransitioningDelegate.由于我们是非交互式转场，所以只需要实现协议的两个方法即可 // MARK: - UIVie 效果图

项目地址：ImageMaskTransition

转场原理 对于模态展示（Modal）

iOS 8之后，可以通过设置VIEwController的转场代理

TransitioningDelegate

这个转场代理是一个协议类型UIVIEwControllerTransitioningDelegate.由于我们是非交互式转场，所以只需要实现协议的两个方法即可

// MARK: - UIVIEwControllerTransitioningDelegate -func animationControllerForPresentedController(presented: UIVIEwController,presentingController presenting: UIVIEwController,sourceController source: UIVIEwController) -> UIVIEwControllerAnimatedTransitioning? {   //这里返回present的动画}func animationControllerFordismissedController(dismissed: UIVIEwController) -> UIVIEwControllerAnimatedTransitioning? {    //这里返回dismiss的动 }

对于NavigationController来说，则可以设置NavigationController的delegate来返回自定义的动画。

navigationController.delegate

这里的delegate是UINavigationControllerDelegate类型，在不考虑交互式转场的情况下，我们只需要实现以下方法即可

//返回动画func navigationController(navigationController: UINavigationController,animationControllerForOperation operation: UINavigationControllerOperation,fromVIEwController fromVC: UIVIEwController,toVIEwController toVC: UIVIEwController) -> UIVIEwControllerAnimatedTransitioning? {    switch operation {    case .Pop:       //返回Pop时候    case .Push:        //返回Push时候的动画    default:         return nil    }}

细心的朋友应该发现了，不管是模态还是Push，都是返回一个UIVIEwControllerAnimatedTransitioning协议类型的对象

通用的Animator

定义一个类，让其遵循UIVIEwControllerAnimatedTransitioning协议，来实现实际的动画，

class ImageMaskAnimator: NSObject,UIVIEwControllerAnimatedTransitioning {}

由于实现了UIVIEwControllerAnimatedTransitioning协议，所以要提供两个方法

func TransitionDuration(TransitionContext: UIVIEwControllerContextTransitioning?) -> NSTimeInterval {  //这里返回动画的时间}func animateTransition(TransitionContext: UIVIEwControllerContextTransitioning) {  //这里进行实际的动画}

转场的原理

在上文提到的TransitionDuration方法中，可以看到有一个参数是TransitionContext，这个是转场上下文。通过转场上下文，可以获得fromVIEw,toVIEw以及containVIEw,

let fromVIEw = TransitionContext.vIEwForKey(UITransitionContextFromVIEwKey)!let toVIEw = TransitionContext.vIEwForKey(UITransitionContextToVIEwKey)!let containVIEw = TransitionContext.containerVIEw()!

其中，关系如图

转场开始的时候，上下文自动把FromVIEw添加到转场ContainVIEw 转场结束的时候，上下文自动把FromVIEw移除ContainVIEw

所以，开发者要做的就是

把toVIEw添加到转场ContainVIEw中，并且定义好toVIEw的初始位和状态 定义好FromVIEw和ToVIEw的转场结束时候的状态 创建fromVIEw到toVIEw动画 用CIFilter截图并添加高斯模糊

细心的朋友能看到，在最上面转场的时候，不管是present还是dismiss,第一个Controller的看起来都是”模糊”的。其实是采用截图，然后添加一个ImageVIEw覆盖到转场的ContainVIEw上实现的效果。其中，截图，并添加模糊的代码如下

extension UIVIEw{    func blurScreenShot(blurRadius:CGfloat)->UIImage?{        guard self.supervIEw != nil else{            return nil        }        UIGraphicsBeginImageContextWithOptions(CGSize(wIDth: frame.wIDth,height: frame.height),false,1)        layer.renderInContext(UIGraphicsGetCurrentContext()!)        let image = UIGraphicsGetimageFromCurrentimageContext()        UIGraphicsEndImageContext();        guard let blur = CIFilter(name: "CIGaussianBlur") else{            return nil        }        blur.setValue(CIImage(image: image),forKey: kCIInputimageKey)        blur.setValue(blurRadius,forKey: kCIinputRadiusKey)        let ciContext  = CIContext(options: nil)        let result = blur.valueForKey(kCIoUtputimageKey) as! CIImage!        let boundingRect = CGRect(x:0,y: 0,wIDth: frame.wIDth,height: frame.height)        let cgImage = ciContext.createCGImage(result,fromrect: boundingRect)        let filteredImage = UIImage(CGImage: cgImage)        return filteredImage    }}

Tips:在模拟器上，CIFilter的效率很差，但是真机上很快

Present/Push动画过程

首先，我们要做一些准备工作，其中，核心是坐标系转换

Tips：
Swift通过以下代码块来实现条件编译，可以通过条件编译来适配多版本Swift

#if //...#else.. #endif

整个动画的准备过程

//获取必要参数       let fromVIEw = TransitionContext.vIEwForKey(UITransitionContextFromVIEwKey)!        let toVIEw = TransitionContext.vIEwForKey(UITransitionContextToVIEwKey)!        let containVIEw = TransitionContext.containerVIEw()!        let frame = UIScreen.mainScreen().bounds        maskContentVIEw = UIImageVIEw(frame: frame)        maskContentVIEw.backgroundcolor = UIcolor.lightGraycolor()        //如果是Present或者push        if self.TransitionType == .Present {            //模拟器上禁用Blur            #if (arch(i386) || arch(x86_64)) && os(iOS)                print("Wow,CIFilter is too slow on simulator,So I disable blur on Simulator")            #else               //截图，生成blur                self.blurImage = fromVIEw.blurScreenShot(3.0)                maskContentVIEw.image = fromVIEw.blurScreenShot(3.0)            #endif            //Blur作为背景，添加到ContainVIEw            maskContentVIEw.frame = containVIEw.bounds            containVIEw.addSubvIEw(self.maskContentVIEw)            let fromImageVIEw = self.config.fromImageVIEw            //Frame的坐标系适配            let adjustFromrect = fromImageVIEw.convertRect(fromImageVIEw.bounds,toVIEw: containVIEw)            let toImageVIEw = self.config.toImageVIEw!            let adjustToRect = toImageVIEw.convertRect(toImageVIEw.bounds,toVIEw: containVIEw)            //添加一个ImageVIEw，来显示动画            imageVIEw = UIImageVIEw(frame: adjustFromrect)            imageVIEw.image = fromImageVIEw.image            containVIEw.addSubvIEw(imageVIEw)            //设置阴影            imageVIEw.layer.shadowcolor = UIcolor.blackcolor().CGcolor            imageVIEw.layer.shadowOffset = CGSizeMake(2.0,2.0)            imageVIEw.layer.shadowRadius = 10.0            imageVIEw.layer.shadowOpacity = 0.8           //开始动画           //动画代码....

到这里，视图的层次结构如下

ContainVIEw
fromVIEw maskContentVIEw imageVIEw

整个Present的动画分为三个部分

//第一步，移动ImageVIEw到toVIEw的对应Frame，同时变化Scale  UIVIEw.animateWithDuration(0.5 / 1.6 * self.config.presentDuration,animations: {                self.imageVIEw.frame = adjustToRect                self.imageVIEw.transform = CGAffinetransformMakeScale(1.2,1.2)            }) { (finished) in                  //第二步，恢复ImageVIEw的Transfrom                UIVIEw.animateWithDuration(0.3 / 1.6 * self.config.presentDuration,animations: {                    self.imageVIEw.transform = CGAffinetransformIDentity                    self.imageVIEw.layer.shadowOpacity = 0.0                }) { (finished) in                    //第三步，添加toVIEw，然后开始mask动画                    containVIEw.addSubvIEw(toVIEw)                    containVIEw.bringSubvIEwToFront(self.imageVIEw)                    let adjustFrame = self.imageVIEw.convertRect(self.imageVIEw.bounds,toVIEw: self.maskContentVIEw)                    toVIEw.maskFrom(adjustFrame,duration: 0.8 / 1.6 * self.config.presentDuration,complete: {                        //所有动画完成，进行清理                        self.maskContentVIEw.removeFromSupervIEw()                        self.imageVIEw.removeFromSupervIEw()                        self.maskContentVIEw = nil                        self.imageVIEw = nil                        //通知上下文，转场完成                        TransitionContext.completeTransition(true)                    })                }            }

在最后一步进行Mask的时候，视图的层次如下

ContainVIEw
fromVIEw maskContentVIEw toVIEw imageVIEw @H_403_472@Mask动画

Mask动画其实比较简单，我们都知道CALayer有一个mask属性，它也是一个CALayer，整个Mask动画的过程如下

用CAShapeLayer作为对应VIEw的mask 通过动画CAShapeLayer的path属性－实现一个逐渐扩大的圆来实现对应的mask动画

代码如下

maskLayer.path = topath.CGPathlet basicAnimation = CABasicAnimation(keyPath: "path")basicAnimation.duration = durationbasicAnimation.fromValue = fromPath.CGPathbasicAnimation.tovalue = topath.CGPathbasicAnimation.timingFunction = camediatimingFunction(name: kcamediatimingFunctionEaseInEaSEOut)maskLayer.addAnimation(basicAnimation,forKey: "pathMask")self.layer.mask = maskLayer

其中，fromPath是开始的圆环，topath是结束的圆环。

圆环的绘制采用贝赛尔曲线

let fromPath = UIBezIErPath(arcCenter: fromCenter,radius: fromRadius,startAngle: 0,endAngle: CGfloat(M_PI) * 2,clockwise: true)

事务

这里用事务进行包裹，进而在动画完成的时候进行反馈

CATransaction.begin()CATransaction.setCompletionBlock {    //这里动画完成了 }//上文的Mask代码CATransaction.commit()

dismiss/Pop的原理类似,不再赘述

最后

完整代码地址：ImageMaskTransition
欢迎Follow我的Github，LeoMobileDeveloper

总结

以上是内存溢出为你收集整理的实现一个复杂动画的界面转场（Swift）全部内容，希望文章能够帮你解决实现一个复杂动画的界面转场（Swift）所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。