swift - 导航 View 将全屏转换为具有角半径的 View

Question

我正在尝试从启动画面创建应用程序主屏幕动画，例如启动屏幕完成(全)屏幕颜色转换为应用程序 Logo 背景颜色后。目前，下面的代码是我所期望的存档。但是，该转换 CAShapeLayer 与圆角半径无关。没有圆角半径，它可以正常工作，当我尝试使用圆形/椭圆形/圆角半径动画时，它看起来像下面的 gif 所示。

尝试了其他一些创建圆形动画的 StackOverflow 答案，但这些答案不起作用。 Here one of those .

    weak var viewTransitionContext: UIViewControllerContextTransitioning!

    func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
        viewTransitionContext = transitionContext

        guard let fromVC = viewTransitionContext.viewController(forKey: .from) else { return }
        guard let toVC = viewTransitionContext.viewController(forKey: .to) else { return }

        if fromVC.isKind(of: SOGSplashViewController.self) && toVC.isKind(of: SOGHomeViewController.self) {
            guard let toVCView = transitionContext.view(forKey: .to) else { return }
            guard let fromVCView = transitionContext.view(forKey: .from) else { return }

            let containerView = transitionContext.containerView
            let labelWidth = UIDevice.width() * 0.75
            let labelHeight = labelWidth * 0.7
            let xAxis = (UIDevice.width() - labelWidth)/2.0
            let yAxis = ((UIDevice.height()/2.0) - labelHeight)/2.0
            let labelRect = CGRect(x: xAxis, y: yAxis, width: labelWidth, height: labelHeight)
            let radius = (UIDevice.height()/2.0)*0.1
            let fromFrame = fromVCView.bounds
            let animationTime = transitionDuration(using: transitionContext)

            let maskLayer = CAShapeLayer()
            maskLayer.isOpaque = false
            maskLayer.fillColor = fromVCView.backgroundColor?.cgColor
            maskLayer.backgroundColor = UIColor.clear.cgColor
            maskLayer.path = toPathValue.cgPath

            let maskAnimationLayer = CABasicAnimation(keyPath: "path")
            maskAnimationLayer.fromValue = (UIBezierPath(rect: fromFrame)).cgPath
            maskAnimationLayer.toValue = toPathValue.cgPath
            maskAnimationLayer.duration = animationTime
            maskAnimationLayer.delegate = self as? CAAnimationDelegate

            containerView.addSubview(fromVCView)
            containerView.addSubview(toVCView)
            fromVCView.layer.add(maskAnimationLayer, forKey: nil)
            maskLayer.add(maskAnimationLayer, forKey: "path")
            containerView.layer.addSublayer(maskLayer)

            let deadLineTime = DispatchTime.now() + .seconds(1)
            DispatchQueue.main.asyncAfter(deadline: deadLineTime) {
                UIView.animate(withDuration: 0.2, animations: {
                    maskLayer.opacity = 0
                }, completion: { (isSuccess) in
                    self.viewTransitionContext.completeTransition(true)
                })
            }
        }
    }

Answer 1

如果您通过像 Core Animation 这样的通用方式来实现，将矩形路径转换为圆角矩形路径是一个非常复杂的操作。您应该更好地使用 CALayer< 的 cornerRadius 属性 这是可动画的。

这是一个基于约束的动画的工作示例:

class ViewController: UIViewController {
    @IBOutlet var constraints: [NSLayoutConstraint]!
    @IBOutlet var contentView: UIView!

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    override func viewDidAppear(_ animated: Bool) {
        self.contentView.layer.cornerRadius = 10.0
        self.animate(nil)
    }

    @IBAction func animate(_ sender: Any?) {
        for c in constraints {
            c.constant = 40.0
        }
        UIView.animate(withDuration: 4.0) {
            self.view.layoutIfNeeded()
            self.contentView.layer.cornerRadius = 40.0
        }
    }
}

contentView 指向应进行动画处理的内部 View ，constraints 指定义从 View Controller 的 View 到内容 View 的距离的四个布局约束。

这只是一个简单、粗略的示例，当然可以改进。