在自定义动画过渡期间淡入背景视图

Question

我想向我的应用程序添加自定义过渡，并按照here 找到的这个惊人答案进行操作。

效果很好，但我想更进一步。我想在第一页上有一个 alpha 0 或最初隐藏但随着用户在两个页面之间向下滑动而慢慢淡入的视图。顶视图将具有透明背景，因此它看起来好像带有背景颜色。 我的意思的一个很好的例子可以在 snapchat 中看到，当在页面之间滑动时，如下面的屏幕截图所示。

背景慢慢变成蓝色，当新视图出现时，它是纯蓝色的。

我了解此代码必须按照我遵循的原始问题答案中的说明放入演示控制器中，但是我不确定我将如何实现它。此外，当将 shouldRemovePresentersView 设置为 false 时，我会在这里崩溃

func animateTransition(using transitionContext: 
    UIViewControllerContextTransitioning) {
        let inView   = transitionContext.containerView
        let toView   = transitionContext.view(forKey: .to)!
        let fromView = transitionContext.view(forKey: .from)!
}

Answer 1

看起来你想做一些类似于 here 所做的事情。因此，我将使用相同的来源来帮助您更好地理解。

要添加淡入/淡出动画，您只需在 func animateTransition(using transitionContext: UIViewControllerContextTransitioning) 方法中调整 alpha 值（不透明度）。

func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
    let inView   = transitionContext.containerView
    let toView   = transitionContext.view(forKey: .to)!
    let fromView = transitionContext.view(forKey: .from)!

    var frame = inView.bounds

    switch transitionType {
    case .presenting:
        frame.origin.y = -frame.size.height
        toView.frame = frame

        // set initial alpha value to 0.0
        toView.alpha = 0.0

        inView.addSubview(toView)
        UIView.animate(withDuration: transitionDuration(using: transitionContext), animations: {
            toView.frame = inView.bounds

            // animate to 1.0
            toView.alpha = 1.0

        }, completion: { finished in
            transitionContext.completeTransition(!transitionContext.transitionWasCancelled)
        })
    case .dismissing:
        toView.frame = frame
        inView.insertSubview(toView, belowSubview: fromView)

        UIView.animate(withDuration: transitionDuration(using: transitionContext), animations: {
            frame.origin.y = -frame.size.height
            fromView.frame = frame

            // animate to 0.0
            fromView.alpha = 0.0
        }, completion: { finished in
            transitionContext.completeTransition(!transitionContext.transitionWasCancelled)
        })
    }
}

进一步分解：

• 呈现新的 ViewController：这里的初始值为 0.0，因为 ViewController 一开始看起来是淡入的，然后慢慢淡入。因此在动画块中使用 toView.alpha = 1.0 以便淡入 ViewController。
• 关闭当前的 ViewController：这里的初始值为 1.0（隐含的，不需要设置它），因为 ViewController 起初看起来是不透明的，然后慢慢淡出。因此在动画块中使用toView.alpha = 0.0，以便在 ViewController 中淡入淡出。

您可以将任何其他动画放在相应的动画块中，基本上就在toView.alpha = 1.0和fromView.alpha = 0.0旁边。

至于将shouldRemovePresentersView设置为false时出现的崩溃，我认为答案的作者已经为此提供了解决方案。 您可以check a comparison 了解如何修复崩溃。

编辑：从按钮转换：

@IBAction func didTapShowButton(_ sender: UIButton) {
    let controller = storyboard!.instantiateViewController(withIdentifier: "SecondViewController") as! SecondViewController
    present(controller, animated: true)
}

别忘了把它连接到按钮上！

Answer 2

我在我的应用程序中做了类似的事情，当一个手势完成时我会显示一个图像。我真的在我的应用程序中淡出图像，但我修改它以淡入淡出，只需稍作改动。在我的情况下，我只是淡入或淡出图像。我在下面使用了一个扩展，但下面的 animateWithDuration 示例可能会对您有所帮助。见以下代码：

    public extension UIImage {
    func showAndFadeOut(atPoint point: CGPoint, sender:UIViewController) {
        let buttonView = UIImageView(image: self)
        buttonView.center = point
        sender.view.addSubview(buttonView)

        UIView.animate(withDuration: 3.0, delay: 0.0, options: .curveEaseOut, animations: {
            buttonView.alpha = 0

        }, completion:  { finished in
            buttonView.removeFromSuperview()
        })
    }

    func showAndFadeIn(atPoint point: CGPoint, sender:UIViewController) {
        let buttonView = UIImageView(image: self)
        buttonView.center = point
        sender.view.addSubview(buttonView)
        buttonView.alpha = 0

        UIView.animate(withDuration: 3.0, delay: 0.0, options: .curveEaseIn, animations: {
            buttonView.alpha = 1
        }, completion:  { finished in
            buttonView.removeFromSuperview()
        })
    }
}

你可以这样使用它：

image.showAndFadeIn(atPoint: gestureEndPoint, sender: self)

希望这会有所帮助。我删除了完成块中的按钮，但如果您希望该视图留在屏幕上，只需删除该行代码即可。