IOS-Swift 自定義圖像轉場交換入門教學(二)

新增Pop Transition


我們來修正animateTransition()這個程式碼,程式碼如下：

let containerView = transitionContext.containerView
let toView = transitionContext.view(forKey: .to)!
let herbView = presenting ? toView : 
  transitionContext.view(forKey: .from)!

herbView是告訴目前是由viewContoller to HerbDetailsVC 或是  HerbDetailsVC to viewContoller,當present 彈出時到 HerbDetailsVC 時 image將會慢慢擴展全螢幕,當彈回時images將回回到原始尺寸.

接下來再補上以下程式碼至animateTransition()裡來做原尺寸以及最後尺寸的檢測

let initialFrame = presenting ? originFrame : herbView.frame
let finalFrame = presenting ? herbView.frame : originFrame

let xScaleFactor = presenting ?

  initialFrame.width / finalFrame.width :
  finalFrame.width / initialFrame.width

let yScaleFactor = presenting ?

  initialFrame.height / finalFrame.height :
  finalFrame.height / initialFrame.height

現在加入以下程式碼至animateTransition()裡,當按下image時會擴展到全螢幕

let scaleTransform = CGAffineTransform(scaleX: xScaleFactor, 
                                            y: yScaleFactor)

if presenting {
  herbView.transform = scaleTransform
  herbView.center = CGPoint(
    x: initialFrame.midX,
    y: initialFrame.midY)
  herbView.clipsToBounds = true
}

containerView.addSubview(toView)
containerView.bringSubview(toFront: herbView)

UIView.animate(withDuration: duration, delay:0.0, 
  usingSpringWithDamping: 0.4, initialSpringVelocity: 0.0,
  animations: {
    herbView.transform = self.presenting ?
      CGAffineTransform.identity : scaleTransform
    herbView.center = CGPoint(x: finalFrame.midX, y: finalFrame.midY)
  }, 
  completion: { _ in
    transitionContext.completeTransition(true)
  }
)

發覺我們這樣還不夠完美,執行後可以看到原始尺寸從左上方彈出,為什麼呢？原來我們originFrame 初始值為(0,0),現在我們增加一些程式碼讓從原來的位置彈出

程式碼如下：

transition.originFrame = 
selectedImage!.superview!.convert(selectedImage!.frame, to: nil)

transition.presenting = true
selectedImage!.isHidden = true

加入Dismiss Transition

打開ViewController.swift , 修正animationController(forDismissed:),加入以下程式碼：

transition.presenting = false
return transition

告訴動畫你正要關閉視圖控制器

現在我們來執行看看,動畫顯示方式還不錯,但是按完滾動的圖片後.彈出後在彈回就消失了？
這時我們在修改一些程式碼


打開PopAnimator.swift新增新的屬性到類別上

var dismissCompletion: (()->Void)?

這行程式碼是要做,當dissmiss彈回時能夠觸發,因此我們需把以下程式碼放置animateTransition()裡的completion handler上,好讓動畫結束後能夠執行

if !self.presenting {
  self.dismissCompletion?()
}

打開ViewContorller.swift 並加入程式碼至viewDidLoad():

transition.dismissCompletion = {
  self.selectedImage!.isHidden = false
}

裝置翻轉處理

打開ViewContorller.swift 把以下程式碼加入到類別裡

override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
  super.viewWillTransition(to: size, with: coordinator)

}

加入以下程式碼至viewWillTransitionToSize裡

coordinator.animate(
  alongsideTransition: { context in
    self.bgImage.alpha = (size.width>size.height) ? 0.25 : 0.55
  }, 
  completion: nil
)

當翻轉時要讓圖面列表尺寸能夠有所改變,因此加入使程式碼到alongsideTransiton的block裡

self.positionListItems()

現在我們來執行看看,這樣就完成了.

(攤手...終於打完了..)

(連結第一篇..)