【问题标题】:How to create a navigation transition like the Apple news app?如何创建像 Apple 新闻应用一样的导航过渡?
【发布时间】:2019-01-08 01:36:08
【问题描述】:

我发现这篇文章是为了创建类似于 Apple 新闻应用程序的导航转换:https://blog.rocketinsights.com/how-to-create-a-navigation-transition-like-the-apple-news-app/

过渡是一种缩放效果。

该代码非常适合推送动画,但对于弹出动画(关闭 DetailViewController),我有一个黑屏,而不是我的主视图控制器。

由于文章没有提供完整的源代码下载,我发布在github上,申请UICollectionViewController满足我的需求:testZoomTransition

【问题讨论】:

  • 您的测试项目链接只是一个空的基本 iOS 项目。里面没有自定义代码。
  • 抱歉,项目已更新。
  • 很高兴您提供了一个测试项目的链接,但您还应该在问题中显示代码的相关部分。你的回答有点没用,因为我们不知道代码是什么之前你做了任何改变。
  • 另外,你真的是指 push 和 pop 吗?这看起来更像现在和解雇。对于推送和弹出,我希望看到一个导航栏。
  • 是的,我需要推送和弹出,我在下面发布了我的解决方案。

标签: ios swift animation uinavigationcontroller uiviewanimationtransition


【解决方案1】:

我找到了一个解决方案,通过简化源代码,可能不太优雅,但有效。

Git 已更新。

func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
    let presenting = operation == .push

    // Determine which is the master view and which is the detail view that we're navigating to and from. The container view will house the views for transition animation.
    let containerView = transitionContext.containerView

    guard let fromView = transitionContext.view(forKey: UITransitionContextViewKey.from),
        let toView = transitionContext.view(forKey: UITransitionContextViewKey.to) else {
            transitionContext.completeTransition(!transitionContext.transitionWasCancelled)
            return
    }

    containerView.backgroundColor = fromView.backgroundColor

    let mainView = presenting ? fromView : toView
    let detailView = presenting ? toView : fromView

    // Determine the starting frame of the detail view for the animation. When we're presenting, the detail view will grow out of the thumbnail frame. When we're dismissing, the detail view will shrink back into that same thumbnail frame.
    let finalFrame = presenting ? detailView.frame : thumbnailFrame

    //scale factor between thumbnailFrame and size of
    let scaleFactorX = thumbnailFrame.size.width / detailView.frame.size.width
    let scaleFactorY = thumbnailFrame.size.height / detailView.frame.size.height

    if presenting {

        // Shrink the detail view for the initial frame. The detail view will be scaled to CGAffineTransformIdentity below.
        detailView.transform = CGAffineTransform(scaleX: scaleFactorX, y: scaleFactorY)
        detailView.center = CGPoint(x: thumbnailFrame.midX, y: thumbnailFrame.midY)
        detailView.clipsToBounds = true
    }


    // Set the initial state of the alpha for the master and detail views so that we can fade them in and out during the animation.
    detailView.alpha = presenting ? 0 : 1
    mainView.alpha = presenting ? 1 : 0

    // Add the view that we're transitioning to to the container view that houses the animation.
    containerView.addSubview(toView)
    containerView.bringSubview(toFront: detailView)


    // Animate the transition.
    UIView.animate(withDuration: duration, delay: 0.0, usingSpringWithDamping: 1, initialSpringVelocity: 1.0, options: .curveEaseInOut, animations: {
        // Fade the master and detail views in and out.
        detailView.alpha = presenting ? 1 : 0
        mainView.alpha = presenting ? 0 : 1

        if presenting {
            detailView.transform = CGAffineTransform.identity
            detailView.center = CGPoint(x: finalFrame.midX, y: finalFrame.midY)
        }
        else {
            detailView.transform = CGAffineTransform(scaleX: scaleFactorX, y: scaleFactorY)
            detailView.center = CGPoint(x: self.thumbnailFrame.midX, y: self.thumbnailFrame.midY)
        }


    }) { finished in
        transitionContext.completeTransition(finished)
    }
}

【讨论】:

  • 与您在原始帖子中显示的图片相比,开始动画对我来说似乎很慢。当我点击时,从我点击单元格到动画开始时,动画似乎有第二个延迟。除了这个之外,您还需要进行任何更改吗?
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2019-03-16
  • 2019-05-02
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多