实现一个复杂动画的界面转场(Swift)

前端之家收集整理的这篇文章主要介绍了实现一个复杂动画的界面转场(Swift)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

效果

项目地址: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

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

//返回动画
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
  • @H_502_143@

    所以,开发者要做的就是

    • 把toView添加到转场ContainView中,并且定义好toView的初始位和状态
    • 定义好FromView和ToView的转场结束时候的状态
    • 创建fromView到toView动画
    • @H_502_143@

      用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
        • @H_502_143@ @H_502_143@

          整个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_502_143@ @H_502_143@

              Mask动画

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

              • 用CAShapeLayer作为对应View的mask
              • 通过动画CAShapeLayer的path属性-实现一个逐渐扩大的圆来实现对应的mask动画
              • @H_502_143@

                代码如下

                maskLayer.path = toPath.CGPath
                let basicAnimation = CABasicAnimation(keyPath: "path")
                basicAnimation.duration = duration
                basicAnimation.fromValue = fromPath.CGPath
                basicAnimation.toValue = toPath.CGPath
                basicAnimation.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相关文章