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

时间:2017-08-14 17:00:27

标签: ios swift animation uiviewcontroller transitions

我想在我的应用中添加自定义转换,然后按照here找到这个惊人的答案。

它运作良好,但我想更进一步。我希望第一页上的视图是alpha 0或者首先隐藏,但是当用户在两个页面之间向下滑动时,我会慢慢淡入。顶视图将具有透明背景,因此它看起来好像是以背景颜色进入。 我可以在Snapchat中看到一个很好的例子,当在页面之间滑动时,如下面的屏幕截图所示。 enter image description here

当新视图呈现稳定的蓝色时,背景会慢慢变为蓝色。

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

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

2 个答案:

答案 0 :(得分: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.0fromView.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)
}

别忘了将它连接到按钮!

答案 1 :(得分:0)

我在我的应用程序中执行类似的操作,在手势完成时显示图像。我真的在我的应用程序中淡化了图像,但我修改了它只是稍微改变就消失了。在我的情况下,我只是淡入或淡出图像。我在下面使用扩展名,但下面的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)

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