美文网首页程序员
图片展示、隐藏转场动画

图片展示、隐藏转场动画

作者: zhonglaoban | 来源:发表于2018-05-08 23:01 被阅读34次

通过UIViewControllerAnimatedTransitioning实现图片的转场动画,效果类似手机自带的照片查看器。详细过程如下:
先看看效果:


QQ20180507-223238-HD.gif

首先造一个ShowImageController控制器

class ShowImageController: UIViewController {

}

那么它能做什么,首先要能展示图片,给它一个UIImageView

class ShowImageController: UIViewController {
/// 图像视图
    private lazy var imageView: UIImageView = {
        let iv = UIImageView()
        
        return iv
    }()
}
    

其次,它还要支持缩放,给它一个UIScrollView

class ShowImageController: UIViewController {
    /// 图像视图
    private lazy var imageView: UIImageView = {
        let iv = UIImageView()
        
        return iv
    }()
    /// 滚动视图
    private lazy var scrollView: UIScrollView = {
        let s = UIScrollView(frame: self.view.bounds)
        s.backgroundColor = UIColor.black
        // 支持缩放
        // 1. 设置代理
        s.delegate = self
        // 2. 最小大缩放比例
        s.minimumZoomScale = 1
        s.maximumZoomScale = 2.0
        
        return s
    }()
}

添加一个构造方法

  • 捕捉一个屏幕快照dummyView
  • 设置transitioningDelegate
init(sourceView:UIImageView) {
    super.init(nibName: nil, bundle: nil)
    
    self.setImage(image: sourceView.image)
    let window = UIApplication.shared.keyWindow
    self.showPicDelegate.dummyView = sourceView.snapshotView(afterScreenUpdates: false)
    self.showPicDelegate.sourceRect = sourceView.convert(sourceView.bounds, to: window)
    self.showPicDelegate.destRect = imageSize(sourceView.image!)
    self.transitioningDelegate = self.showPicDelegate
    modalPresentationStyle = UIModalPresentationStyle.custom
}

然后实现transitioningDelegate,新建ShowPicAnimator类,添加属性

class ShowPicAnimator: NSObject, UIViewControllerTransitioningDelegate, UIViewControllerAnimatedTransitioning {
    ///是开始还是结束
    var isPresent: Bool = true
    ///快照
    var dummyView: UIView?
    ///起始位置
    var sourceRect: CGRect = CGRect.zero
    ///结束位置
    var destRect: CGRect = CGRect.zero
}

添加代理方法

// 指定谁负责转场动画
func animationController(forPresented presented: UIViewController, presenting: UIViewController, source: UIViewController) -> UIViewControllerAnimatedTransitioning? {
    isPresent = true
    return self
}
func animationController(forDismissed dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning? {
    isPresent = false
    return self
}
//UIViewControllerAnimatedTransitioning
func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
    return 0.3
}
/* self实现动画
1. 计算动画的起始位置
2. 计算动画的目标位置
*/
func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
}

具体实现细节见代码

相关文章

网友评论

    本文标题:图片展示、隐藏转场动画

    本文链接:https://www.haomeiwen.com/subject/absbrftx.html