Question

我想创建一个模态动画，其中顶部布局向上滑动，底部布局向下滑动。

与此图片类似：

注意：图片来自Vertical Screen Split Transitions (Animation)

Answer 1

创建一个对象并出售自定义present动画：

class TheVendor: NSObject, UIViewControllerTransitioningDelegate {
    func animationController(forPresented presented: UIViewController, presenting: UIViewController, source: UIViewController) -> UIViewControllerAnimatedTransitioning? {
        return TheAnimator()
    }
}

然后创建动画师：

class TheAnimator: NSObject, UIViewControllerAnimatedTransitioning {
    func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
        // return a duration
    }
    func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
        // return the custom animation
    }
}

然后当你present时，进行正确的绑定：

presentedViewController.transitioningDelegate = TheVendor()
presentedViewController.modalPresentationStyle = .custom

Answer 2

以下是您问题的解决方案：

class ViewController: UIViewController {

// Your image view what to split
@IBOutlet weak var imgView: UIImageView!

override func viewDidLoad() {

    super.viewDidLoad()
}

override func viewDidAppear(_ animated: Bool) {

    super.viewDidAppear(true)

    // Start split animation
    self.splitAnimation(imgView: self.imgView)
}

override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.
}

func splitAnimation(imgView: UIImageView){

    let topHalf = imgView.image?.topHalf

    let bottomHalf = imgView.image?.bottomHalf

    let imgViewTop = UIImageView(frame: CGRect(x: 0, y: 0, width: imgView.frame.size.width, height: imgView.frame.size.height/2.0))
    imgViewTop.image = topHalf

    let imgViewBottom = UIImageView(frame: CGRect(x: 0, y: imgView.frame.size.height/2.0, width: imgView.frame.size.width, height: imgView.frame.size.height/2.0))
    imgViewBottom.image = bottomHalf

    imgView.addSubview(imgViewTop)
    imgView.addSubview(imgViewBottom)

    imgView.image = nil

    UIView.animate(withDuration: 1.5, delay: 1.0, options: .curveLinear, animations: {

        imgViewTop.frame = CGRect(x: 0, y: -imgView.frame.size.height/2.0, width: imgView.frame.size.width, height: imgView.frame.size.height/2.0)
        imgViewBottom.frame = CGRect(x: 0, y: imgView.frame.size.height, width: imgView.frame.size.width, height: imgView.frame.size.height/2.0)

    }, completion: { (complete) in

        imgViewTop.removeFromSuperview()
        imgViewBottom.removeFromSuperview()
        imgView.removeFromSuperview()
    })
}
}

现在将此扩展添加到您的班级：

extension UIImage {

var topHalf: UIImage? {
    guard let cgImage = cgImage, let image = cgImage.cropping(to: CGRect(origin: .zero, size: CGSize(width: size.width, height: size.height/2))) else { return nil }
    return UIImage(cgImage: image, scale: 1, orientation: imageOrientation)
}
var bottomHalf: UIImage? {
    guard let cgImage = cgImage, let image = cgImage.cropping(to: CGRect(origin: CGPoint(x: 0,  y: CGFloat(Int(size.height)-Int(size.height/2))), size: CGSize(width: size.width, height: CGFloat(Int(size.height) - Int(size.height/2))))) else { return nil }
    return UIImage(cgImage: image)
}
}

根据您自己管理动画的持续时间

在Xcode 9.3和Swift 4.1中测试的代码

如何创建一个模态动画，其中向上滑动屏幕的上半部分并向下滑动屏幕的下半部分

2 个答案: