<h2>一 转场效果图和采用转场方式</h2>    <p>1 转场效果图 :</p>    <p><img alt="这里写图片描述" src="https://simg.open-open.com/show/568cd7d717e926e7cd66408ae859e619.gif"></p>    <p>2 采用方式 (方法):</p>    <p>—-> 2.1 自定义转场动画</p>    <p>—-> 2.2 协议</p>    <h2>二 转场实现需要获取的东西</h2>    <p>1 获取转场前图片的frame</p>    <p>2 设置一张临时imageView作为转场图片(图片并不是真实存在的)</p>    <p>3 获取图片放大展示的frame</p>    <h2>三 转场图解</h2>    <p><img alt="这里写图片描述" src="https://simg.open-open.com/show/f45bad8a077c5097eb949d399652be0c.png"></p>    <h2>四 转场动画思想</h2>    <p>1 通过在实现转场动画的类中定义协议方法,定义代理属性,明确谁可以提供需要的frame和imageView,将对方设置为代理,让代理提供需求,达到转场目的.</p>    <p>2 明确代码的书写位置,在哪里可以实现转场动画.</p>    <h2>五 协议(弹出动画)</h2>    <p>1 协议书写位置</p>    <p><img alt="这里写图片描述" src="https://simg.open-open.com/show/c977293eff907dcca1cf261a895f77ab.png"></p>    <p>2 协议方法 : (可以让外界提供需要的东西)</p>    <pre>   //MARK: - 定义协议用来拿到图片起始位置;最终位置和图片  protocol PersentDelegate : class {      //起始位置      func homeRect(indexPath : NSIndexPath) ->CGRect      //展示图片的位置      func photoBrowserRect(indexPath : NSIndexPath) ->CGRect      //获取imageView(用这张临时的图片来实现动画效果)      func imageView(indexPath : NSIndexPath) ->UIImageView  }</pre>    <p>3 在该该类中设置代理</p>    <pre>  //设置代理(代理一般都是用weak修饰)      weak var presentDelegate : PersentDelegate?</pre>    <p>4 实现转场动画的代码书写位置 : (上一篇送已经说明转场动画的书写位置)</p>    <p>—-> 4.1 得到一张图片</p>    <p>—-> 4.2 得到home中图片的起始frame</p>    <p>—-> 4.3 展示图片的frame</p>    <p>—-> 4.4 完成动画</p>    <p>—-> 4.5 图片由透明到清晰,通过alpha来实现</p>    <pre>  //获取转场的上下文:可以通过上下文获取到执行动画的view      func animateTransition(transitionContext: UIViewControllerContextTransitioning) {          isPresented ? animateForPresentView(transitionContext) : animateForDismissed(transitionContext)      }      //弹出      func animateForPresentView(transitionContext: UIViewControllerContextTransitioning) {          //1 取出弹出的view          let presentView = transitionContext.viewForKey(UITransitionContextToViewKey)!          //2 将弹出的view加入到contentView中          transitionContext.containerView()?.addSubview(presentView)          //3 执行动画          //3.1 获取需要执行的imageView          guard let persentDelegate = presentDelegate else {              return          }          guard let indexPath = indexPath else {              return          }          //调用方法,得到一张图片          let imageView = persentDelegate.imageView(indexPath)          //将图片添加到父控件中          transitionContext.containerView()?.addSubview(imageView)          //设置imageView的起始位置          imageView.frame = persentDelegate.homeRect(indexPath)          presentView.alpha = 0          //设置弹出动画的时候背景颜色为黑色          transitionContext.containerView()?.backgroundColor = UIColor.blackColor()          UIView.animateWithDuration(transitionDuration(transitionContext), animations: { () -> Void in              //设置展示图片的位置              imageView.frame = persentDelegate.photoBrowserRect(indexPath)              }) { (_) -> Void in              //修改图片透明度              presentView.alpha = 1.0              //移除图片              imageView.removeFromSuperview()              transitionContext.containerView()?.backgroundColor = UIColor.clearColor()              //完成动画              transitionContext.completeTransition(true)          }      }</pre>    <h2>六 传值</h2>    <p>1 如何通过协议获取home中某张图片的frame值?</p>    <p>—-> 1.1 通过在扎UN擦汗那个动画实现的方法中设置一个indexPath(用于外界传入角标)来确定frame</p>    <pre>  class PhotoBrowserAnimator: NSObject {      //设置角标      var indexPath : NSIndexPath?  }</pre>    <p>2 设置代理对象</p>    <p><img alt="这里写图片描述" src="https://simg.open-open.com/show/8af24730c6c31152f4b36c99605c717c.png"></p>    <pre>  //Mark: - 点击图片,弹出控制器  extension HomeViewController {          //定义为私有的          private func showPhotoBrowser( indexPath : NSIndexPath) {          //将图片的角标传入          photoBrowserAnimator.indexPath = indexPath          //设置代理          photoBrowserAnimator.presentDelegate = self  }</pre>    <p>3 实现协议方法(该部分代码需要写的比较多,所以扩充一个方法)</p>    <p>—-> 3.1 获取home中图片具体的frame值(重点掌握 : 如何将cell的frame值转为cell在window中的坐标值)</p>    <pre>  //MARK: - 实现协议中的方法  extension HomeViewController : PersentDelegate {      func homeRect(indexPath: NSIndexPath) -> CGRect {          //取出cell           let cell = (collectionView?.cellForItemAtIndexPath(indexPath))!          //将cell的frame值转成cell在window中的坐标          let homeFrame = collectionView!.convertRect(cell.frame, toCoordinateSpace: UIApplication.sharedApplication().keyWindow!)          //返回具体的尺寸          return homeFrame      }  }</pre>    <p>—-> 3.2 返回一张作为转场动画的临时图片(在同一个方法中书写)</p>    <pre>  func imageView(indexPath: NSIndexPath) -> UIImageView {          //创建imageView对象          let imageView = UIImageView()          //取出cell          let cell = (collectionView?.cellForItemAtIndexPath(indexPath))! as! HomeViewCell          //取出cell中显示的图片          let image = cell.imageView.image          //设置图片          imageView.image = image          //设置imageView相关属性(拉伸模式)          imageView.contentMode = .ScaleAspectFill          //将多余的部分裁剪          imageView.clipsToBounds = true          //返回图片          return imageView      }</pre>    <p>—-> 3.3 返回最终展示图片的frame值</p>    <pre>  func photoBrowserRect(indexPath: NSIndexPath) -> CGRect {          //取出cell          let cell = (collectionView?.cellForItemAtIndexPath(indexPath))! as! HomeViewCell          //取出cell中显示的图片          let image = cell.imageView.image          //计算方法后的图片的frame          return calculate(image!)      }</pre>    <p>—-> 3.4 如何计算根据传入的图片值,得出最终展示的图片值? 解答如下</p>    <p>4 创建一个类,内部只是提供一个计算展示图片的frame(外界也是可以调用的)</p>    <p><img alt="这里写图片描述" src="https://simg.open-open.com/show/391ccebf4ef87ca27bef134a8f6a21c6.png"></p>    <p>—-> 4.1 类中代码 :</p>    <pre>  import UIKit    //MARK: - 设置图片的frame      func calculate (image : UIImage) ->CGRect {      let imageViewX : CGFloat = 0.0      let imageViewW : CGFloat = UIScreen.mainScreen().bounds.width      let imageViewH : CGFloat = imageViewW / image.size.width * image.size.height      let imageViewY : CGFloat = (UIScreen.mainScreen().bounds.height - imageViewH) * 0.5        return CGRect(x: imageViewX, y: imageViewY, width: imageViewW, height: imageViewH)  }</pre>    <h2>七 协议(消失动画)</h2>    <p>1 和弹出动画一样的道理,但是该部分只需要获取当前展示图片的indexPath和imageView</p>    <p>2 明确谁可以提供这部分需求;将代理设置给谁?代码书写的位置?</p>    <p>3 定义协议 : (在转场动画的类中实现协议方法定义)</p>    <pre>  //MARK: - 定义协议来实现消失动画  protocol DismissDelegate : class {      //获取当前显示的图片的角标      func currentIndexPath() ->NSIndexPath      //获取imageView(用这张临时的图片来实现动画效果)      func imageView() ->UIImageView  }</pre>    <p>4 设置代理</p>    <pre>  class PhotoBrowserAnimator: NSObject {      //设置消失动画的代理      weak var dismissDelegate : DismissDelegate?  }</pre>    <p>5 消失动画</p>    <p>—-> 5.1 获取当前展示图片位置</p>    <p>—-> 5.2 获取imageView</p>    <p>—-> 5.3 根据用户滑动后的角标,来显示最终消失动画后图片在home的位置(用presentDelegate代理)</p>    <p>—-> 5.4 代码 :</p>    <pre>  //消失      func animateForDismissed (transitionContext: UIViewControllerContextTransitioning) {          //1 取出消失的view          let dismissView = transitionContext.viewForKey(UITransitionContextFromViewKey)!          dismissView.removeFromSuperview()          //2 执行动画          //2.1 校验(如果没有值,就直接返回)          guard let dismissDelegate = dismissDelegate else {              return          }          guard let presentDelegate = presentDelegate else {              return          }          // 2.2获取一张图片          let imageView = dismissDelegate.imageView()          // 2.3将图片添加到父控件中          transitionContext.containerView()?.addSubview(imageView)          // 2.4 获取当前正在显示的图片的角标          let indexPath = dismissDelegate.currentIndexPath()          // 2.5 设置起始位置          imageView.frame = presentDelegate.photoBrowserRect(indexPath)          //执行动画          UIView.animateWithDuration(transitionDuration(transitionContext), animations: { () -> Void in             imageView.frame = presentDelegate.homeRect(indexPath)              }) { (_) -> Void in              //完成动画              transitionContext.completeTransition(true)          }      }  }</pre>    <p>6 设置代理(因为创建PhotoBrowserController是在HomeViewController类中创建的)</p>    <pre>  //Mark: - 点击图片,弹出控制器  extension HomeViewController {          //定义为私有的          private func showPhotoBrowser( indexPath : NSIndexPath) {          //创建控制器对象          let showPhotoBrowserVC = PhotoBrowserController()          //设置dismiss的代理          photoBrowserAnimator.dismissDelegate = showPhotoBrowserVC  }</pre>    <p>—-> 6.1 明确只有展示图片的控制器才能提供这些需求,所以将其设置为代理</p>    <p>7 实现代理方法</p>    <p><img alt="这里写图片描述" src="https://simg.open-open.com/show/af46b35b59bde1fbece04a7c7a9e3050.png"></p>    <p>—-> 7.1 根据cell获取当前的indexPath值</p>    <pre>  //Mark: - 实现dismiss的代理方法  extension PhotoBrowserController : DismissDelegate {      func currentIndexPath() -> NSIndexPath {          //获取当前正在显示的cell          let cell = collectionView.visibleCells().first!          //根据cell获取indexPath          return collectionView.indexPathForCell(cell)!      }  }    </pre>    <p>—-> 7.2 返回一张图片(和7.1写在同一个方法中)</p>    <pre>  func imageView() -> UIImageView {          //创建UIImageView对象          let imageView = UIImageView()          //获取正在显示的cell          let cell = collectionView.visibleCells().first! as! PhotoBrowerViewCell          //取出cell中的图片          imageView.image = cell.imageView.image          //设置图片的属性          imageView.contentMode = .ScaleAspectFill          //将多出的图片裁剪          imageView.clipsToBounds = true          //返回图片          return imageView      }</pre>    <h2>八 细节处理</h2>    <p>1 在弹出动画中点击home中的图片通过转场动画成大图,那么会发现在图片变大的过程中home背景并没有消失,而是完全展示了大图才消失的.怎么解决?</p>    <p>—-> 1.1 通过在动画的时候将背景颜色设置为黑色,遮住home</p>    <pre>  //设置弹出动画的时候背景颜色为黑色          transitionContext.containerView()?.backgroundColor = UIColor.blackColor()</pre>    <p>—-> 1.2 等动画完成后再讲颜色设置为clearColor</p>    <pre>  transitionContext.containerView()?.backgroundColor = UIColor.clearColor()</pre>    <p>2 一定不要忘记转场动画完成后需要告诉系统转场动画完成,否则会出现莫名其妙的情况.</p>    <p>3 尽量的要对代理是否有值进行校验,但是也可以通过强制解包(不是很安全),还是通过判断安全点.</p>    <h2>九 总结</h2>    <p>1 该部分比较有难度,是对上一篇转场动画的加强.如果有看不懂的读者也是很正常,有什么问题可以直接给我留言,我会尽可能的解答.</p>    <p>2 代码可能考虑的还不是很完善,我只是尽量的去完成.最后如果大家觉得我写得还行,麻烦大家关注我的官方博客,谢谢!!!!</p>    <p>来自： <a href="/misc/goto?guid=4959672125209825665" rel="nofollow">http://blog.csdn.net/xf931456371/article/details/51288824</a></p>