转场动画（三） --交互式转场缩小动画

一捏合放大的图片自动缩小隐藏

在点击放大的视图容器中有scrollView 可以缩放
在scrollView的代理方法中可以拿到缩放的比例

    /**
     只要缩放就会调用
     
     transform
     a,d        缩放比例
     tx, ty     位移
     a,b,c,d    共同决定旋转
     */
    func scrollViewDidZoom(scrollView: UIScrollView) {
        print(imageView.transform.a)
    }

这个是在浏览器内部cell中的监听，要控制界面的缩放应该有控制器来做
在此设置代理方法，提供缩放的比例给控制器

  protocol PhotoBrowerCellDelegate: NSObjectProtocol {
      /**
       cell代理
     
       - parameter scale: 缩放比例
       */
      func photoBrowerCellZoom(scale: CGFloat)
  }

weak var photoDelegate: PhotoBrowerCellDelegate?

scrollView代理方法中传递缩放比例

     /**
     只要缩放就会调用
     
     transform
     a,d        缩放比例
     tx, ty     位移
     a,b,c,d    共同决定旋转
     */
    func scrollViewDidZoom(scrollView: UIScrollView) {
        print(imageView.transform.a)
        photoDelegate?.photoBrowerCellZoom(imageView.transform.a)
    }

然后在控制器中实现代理方法此时控制器可以知道视图缩放比例
在代理方法中实现交互式转场
实现交互转场需要遵守协议 --UIViewControllerInteractiveTransitioning

public protocol UIViewControllerInteractiveTransitioning : NSObjectProtocol {
    public func startInteractiveTransition(transitionContext: UIViewControllerContextTransitioning)
    
    optional public func completionSpeed() -> CGFloat
    optional public func completionCurve() -> UIViewAnimationCurve
}

此协议中一共三个方法后两个是可选的只需实现第一个即可

定义个变量记录视图缩放比例在代理方法中记录比例

    func photoBrowerCellZoom(scale: CGFloat) {
        print(scale)
        photoScale = scale
    }

在交互转场代理方法中做动画

extension PhotoBrowerController: UIViewControllerInteractiveTransitioning {
    
    // 开始交互转场
    func startInteractiveTransition(transitionContext: UIViewControllerContextTransitioning) {
        // 设置形变
        view.transform = CGAffineTransformMakeScale(photoScale, photoScale)
        // 设置透明度
        view.alpha = photoScale
    }
}

然后在缩放代理方法中判断条件调用代理方法做动画

if scale < 1 {
            startInteractiveTransition(<#T##transitionContext: UIViewControllerContextTransitioning##UIViewControllerContextTransitioning#>)
        }

参数中传递的对象需要遵守 --UIViewControllerContextTransitioning协议
另写一分类遵守协议实现协议方法
点进协议看头文件需要必须实现的方法好多全部复制进去一一实现

// MARK -UIViewControllerContextTransitioning context 提供了转场所有细节
extension PhotoBrowerController: UIViewControllerContextTransitioning {
    
    // This must be called whenever a transition completes (or is cancelled.)
    // Typically this is called by the object conforming to the
    // UIViewControllerAnimatedTransitioning protocol that was vended by the transitioning
    // delegate.  For purely interactive transitions it should be called by the
    // interaction controller. This method effectively updates internal view
    // controller state at the end of the transition.
    // 结束转场动画  必须实现
    func completeTransition(didComplete: Bool) {
        // 关闭当前的控制器
        dismissViewControllerAnimated(true, completion: nil)
        
    }
    
    /**
     容器视图
     - returns: 当前视图的父视图就是容器视图
     */
    func containerView() -> UIView? { return view.superview }
    func isAnimated() -> Bool { return true }
    func isInteractive() -> Bool { return true }
    func transitionWasCancelled() -> Bool { return false }
    func presentationStyle() -> UIModalPresentationStyle { return UIModalPresentationStyle.Custom }
    
    func updateInteractiveTransition(percentComplete: CGFloat) {}
    func finishInteractiveTransition() {}
    func cancelInteractiveTransition() {}
    
    func viewControllerForKey(key: String) -> UIViewController? { return self }
    func viewForKey(key: String) -> UIView? { return view }
    func targetTransform() -> CGAffineTransform { return CGAffineTransformIdentity }
    
    func initialFrameForViewController(vc: UIViewController) -> CGRect { return CGRectZero }
    func finalFrameForViewController(vc: UIViewController) -> CGRect { return CGRectZero }
}

此时在上边开始交互转场的方法中填入 self
运行此时已经可以实现
但是背景视图依然存在需要隐藏掉

    func photoBrowerCellZoom(scale: CGFloat) {
        print(scale)
        photoScale = scale
        // 设置隐藏
        hiddenInterBackView(scale < 1)
        if scale < 1 {
            startInteractiveTransition(self)
        }
    }
    
    private func hiddenInterBackView(hidden: Bool) {
        collectionView.backgroundColor = hidden ? UIColor.clearColor() : UIColor.blackColor()
        saveBtn.hidden = hidden
        closeBtn.hidden = hidden
    }

此时已经可以实现缩小动画了但是重新放大的时候发现边界会有白边
因为在代理方法中设置放大比例中用的上边定义的photoScale 是浮点型
我们重新设置比例和alpha

    func photoBrowerCellZoom(scale: CGFloat) {
        print(scale)
        photoScale = scale
        // 设置隐藏
        hiddenInterBackView(scale < 1)
        if scale < 1 {
            startInteractiveTransition(self)
        } else {
            view.transform = CGAffineTransformIdentity
            view.alpha = 1.0
        }
    }

接下来实现缩放后图片的消失效果

增加代理方法通知控制器缩放结束

protocol PhotoBrowerCellDelegate: NSObjectProtocol {
    /**
     cell代理
     
     - parameter scale: 缩放比例
     */
    func photoBrowerCellZoom(scale: CGFloat)
    
    /**
     缩放完成
     */
    func photoBrowerCellEndZoom()
}

在scrollView代理方法中调用通知控制器

    func scrollViewDidEndZooming(scrollView: UIScrollView, withView view: UIView?, atScale scale: CGFloat) {
        
        var offsetX = (scrollView.bounds.width - view!.frame.width) * 0.5
        offsetX = offsetX < 0 ? 0 : offsetX
        
        var offsexY = (scrollView.bounds.height - view!.frame.height) * 0.5
        offsexY = offsexY < 0 ? 0 : offsexY
        
        scrollView.contentInset = UIEdgeInsets(top: offsexY, left: offsetX, bottom: 0, right: 0)
        
        // 通知代理缩放结束
        photoDelegate?.photoBrowerCellEndZoom()
    }

控制器中实现缩放结束动画

    func photoBrowerCellEndZoom() {
        if photoScale < 0.8 {
            // 结束转场
            completeTransition(true)
        } else {
            // 回复原状
            UIView.animateWithDuration(0.25, animations: { 
                self.view.transform = CGAffineTransformIdentity
                self.view.alpha = 1.0
                }, completion: { (_) in
                    self.photoScale = 1.0
                    self.hiddenInterBackView(false)
            })

        }
    }

此时缩放后可以消失

二缩小返回原来的位置

浏览器中可以滑动显示别的图片当缩放的时候要返回到当前的图片的原来的位置，所以要记录下来当前显示图片的indexpath
浏览器控制器提供获取当前索引的方法

    // MARK: - 当前显示图片的索引
    func currentIndexPath() -> NSIndexPath {
        let indexPath = collectionView.indexPathsForVisibleItems().last!
        return indexPath
    }

然后在解除转场中实现放回原位置的动画
取到 fromVC 就是当前的图片浏览器控制
然后用pictureView 算出indexPath 所在的位置
动画设置图片的目标位置

func animateTransition(transitionContext: UIViewControllerContextTransitioning) {
        
        // MainViewController 弹出视图的控制器
//        let fromVc = transitionContext.viewControllerForKey(UITransitionContextFromViewControllerKey)
        // 要展现的控制器
//        let toVc = transitionContext.viewControllerForKey(UITransitionContextToViewControllerKey)
        
        
        if isPresent {
            let toView = transitionContext.viewForKey(UITransitionContextToViewKey)!
            transitionContext.containerView()?.addSubview(presentPicView)
            
//            toView.alpha = 0.0
            
            let fromRect = pictureView?.cellScreenFrame(picIndexP!)
            let toRect = pictureView?.cellDesFrame(picIndexP!)
            
            presentPicView.frame = fromRect!
            
            UIView.animateWithDuration(transitionDuration(transitionContext), animations: {
//                toView.alpha = 1.0
                self.presentPicView.frame = toRect!
                
                
            }) { (_) in
                
                self.presentPicView.removeFromSuperview()
                transitionContext.containerView()?.addSubview(toView)
                
                // 此方法必须实现（API 注明）
                // 动画结束之后一定要执行，如果不执行，系统会一直等待，无法进行后续交互
                
                transitionContext.completeTransition(true)
            }

        } else {
            // 解除转场的时候 fromVc 是 present出来的控制器  反了一下
            
            let fromVc = transitionContext.viewControllerForKey(UITransitionContextFromViewControllerKey) as! PhotoBrowerController
            let indexPath = fromVc.currentIndexPath()
            let desRect = pictureView!.cellScreenFrame(indexPath)
            
            let fromView = transitionContext.viewForKey(UITransitionContextFromViewKey)!
            UIView.animateWithDuration(transitionDuration(transitionContext), animations: { 
                fromView.frame = desRect
                }, completion: { (_) in
                    
                    fromView.removeFromSuperview()
                    // 解除转场 会把容器视图和内部视图 销毁
                    transitionContext.completeTransition(true)
            })

        }

    }

运行结果发现并不是我们所想
结束后的位置并不是我们之前想要的位置
将collectionView 添加上黑色背景观察
发现动的是整体的大view在动不是单纯的图片在动
所以要取到这个单独的图片

    // MARK: - 当前显示的图片
    func currentImageView() -> UIImageView {
        let cell = collectionView.cellForItemAtIndexPath(currentIndexPath()) as! PhotoBrowerCell
        return cell.imageView
    }

先获取到显示的图片添加到转场上下文的容器视图然后将fromView 也就是添加在视图上的大view 从容器视图中移除
动画中设置图片的目标frame 完成后将图片移除

// 解除转场的时候 fromVc 是 present出来的控制器  反了一下
            
            let fromVc = transitionContext.viewControllerForKey(UITransitionContextFromViewControllerKey) as! PhotoBrowerController
            let indexPath = fromVc.currentIndexPath()
            let desRect = pictureView!.cellScreenFrame(indexPath)
            
            let showImageView = fromVc.currentImageView()
            transitionContext.containerView()?.addSubview(showImageView)
            
            let fromView = transitionContext.viewForKey(UITransitionContextFromViewKey)!
            fromView.removeFromSuperview()
            UIView.animateWithDuration(transitionDuration(transitionContext), animations: {
                showImageView.frame = desRect
                }, completion: { (_) in
                    
                    showImageView.removeFromSuperview()
                    // 解除转场 会把容器视图和内部视图 销毁
                    transitionContext.completeTransition(true)
            })

此时图片会跳一下在去目标frame
设置下图片的中心点位于 fromView 的中心
showImageView.center = fromView.center
此时缩放完成后会回到中心点放大下再缩小因为之前在缩放完成后有复位动作
回到缩放完成方法中加入条件判断如果缩放比例小于0.8 直接解除转场就不要再复位了

    func scrollViewDidEndZooming(scrollView: UIScrollView, withView view: UIView?, atScale scale: CGFloat) {
        
        if scale >= 0.8 {
            var offsetX = (scrollView.bounds.width - view!.frame.width) * 0.5
            offsetX = offsetX < 0 ? 0 : offsetX
            
            var offsexY = (scrollView.bounds.height - view!.frame.height) * 0.5
            offsexY = offsexY < 0 ? 0 : offsexY
            
            scrollView.contentInset = UIEdgeInsets(top: offsexY, left: offsetX, bottom: 0, right: 0)
        }
    
        // 通知代理缩放结束
        photoDelegate?.photoBrowerCellEndZoom()
    }

此时看起来都是那么的好只是放大一张图片后滑动滑动之后的图片放大不了
因为之前的cell 放大后 transform 没有形变恢复

所以要恢复形变

    private func resetScrollView() {
        scrollView.transform = CGAffineTransformIdentity
        scrollView.contentInset = UIEdgeInsetsZero
        scrollView.contentSize = CGSizeZero
        scrollView.contentOffset = CGPointZero
    }

至此转场动画也就完成了。

转场动画（三） --交互式转场缩小动画

一 捏合放大的图片自动缩小隐藏

二 缩小返回原来的位置

推荐阅读更多精彩内容

一捏合放大的图片自动缩小隐藏

二缩小返回原来的位置