ios 实现类似微信预览的转场效果

github地址:ZoomingTransition
相信大家都用过微信,在聊天时点击图片,会从图片弹出预览页。在预览页点击关闭,会缩回到原图片。今天带一起来实现这个效果。

example.gif

1.先引入这个库

pod 'ZoomingTransition'

2.创建你自己的PushVC继承自ZoomPushVC,并实现ZoomTransitionAnimatorDelegate

class MyPushVC : ZoomPushVC,ZoomTransitionAnimatorDelegate{

var lastSelectedIndexPath: IndexPath? = nil

//your own code...


func transitionWillStart() {
    guard let lastSelected = self.lastSelectedIndexPath else { return }
    self.collectionView.cellForItem(at: lastSelected)?.isHidden = true
}

func transitionDidEnd() {
    guard let lastSelected = self.lastSelectedIndexPath else { return }
    self.collectionView.cellForItem(at: lastSelected)?.isHidden = false
}

func referenceImage() -> UIImage? {
    guard
        let lastSelected = self.lastSelectedIndexPath,
        let cell = self.collectionView.cellForItem(at: lastSelected) as? CustomCell
    else {
        return nil
    }

    return cell.imageView.image
}

func imageFrame() -> CGRect? {
    guard
        let lastSelected = self.lastSelectedIndexPath,
        let cell = self.collectionView.cellForItem(at: lastSelected) as? CustomCell
    
    else {
        return nil
    }
    
    return FrameHelper.getTargerFrame(originalView: cell.imageView, targetView: self.view)



}
     
}

3.当在UICollectionview点击图片时,记录下index

class MyPushVC : ZoomPushVC,ZoomTransitionAnimatorDelegate{

//with the code above ...

func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
    
    self.lastSelectedIndexPath = indexPath
    let vc = PreviewVC()
    vc.image = self.slices[indexPath.row]
    self.navigationController?.pushViewController(vc, animated: true)
    
}

}

4.创建你自己的PopVC,实现ZoomTransitionAnimatorDelegate

class PreviewVC: UIViewController,ZoomTransitionAnimatorDelegate{

//...your own code

//when back button clicked
@objc func close(){
    
    self.navigationController?.popViewController(animated: true)
   
}

func transitionWillStart() {
   // self.imageView.isHidden = true
    self.view.alpha = 0
}

func transitionDidEnd() {
  //  self.imageView.isHidden = true
    self.view.alpha = 1
}

func referenceImage() -> UIImage? {
    return FrameHelper.getScreenshot(with: self.view)
}

func imageFrame() -> CGRect? {
   
    return self.view.frame
}
}

这样就可以实现了,省去了自己写转场动画的烦恼,是不是很简单呢?
github地址:ZoomingTransition 欢迎点赞

你可能感兴趣的:(ios 实现类似微信预览的转场效果)