Search code examples
iosswiftuipageviewcontrolleruivisualeffectviewuiblureffect

Fade in object on page turn in Page View Controller


I am trying to fade a UIBlur background in as the page is entering in a PageViewController.

For example, Page 1 has no UI Blur on the background, but I want page 2 to fade a Dark Blur on the background of the controller as the page is appearing.

What happens currently is the page appears, the half a second later the blur is applied.

Here's what I have currently for page 2:

    @IBOutlet weak var blurEffect: UIVisualEffectView!


        override func viewDidLoad() {
            super.viewDidLoad()
            let overlay = blurEffect
            overlay.effect = nil
        }

        override func viewDidAppear(animated: Bool) {
            let overlay = blurEffect
            overlay.effect = nil
            UIView.animateWithDuration(0.5) {
                overlay.effect = UIBlurEffect(style: .Dark)
            }
        }

Solution

  • It's not clear what you actually want, but if you want to present a view controller over another where you are blurring the presenting view controller as the background for the presented view controller. You should:

    1. Changing the presented view controller's view's background color to clear color.
    2. Adding a UIVisualEffectView at the bottom of the presented view controller's view hierarchy.
    3. Changing the segue to a modal segue or present the view controller modally.
    4. Change the presentation style of the segue to over current context or setting the presentation of the presented view controller viewController.modalPresentationStyle = .OverCurrentContext
    5. Change transition to either Cross Dissolve or Cover Vertical viewController.modalTransitionStyle = .CoverVertical

    I'm sure you can apply this technique in other ways as well, though it is performance expensive.