视差滚动效果（类似Yahoo天气）

Question

视差滚动效果（类似Yahoo天气）

iosgraphicsparallax

5

这不是一个严格的编程问题，而更像是“如何完成此任务”的问题。

我很好奇（并且正在开发一个可能需要这样做的应用程序），左右视差滚动是如何实现的。要确切地知道我的意思，请查看Yahoo Weather应用程序（它是免费的 - 不必担心）。

他们是使用一个视图控制器还是为每个显示的视图单独使用控制器？
实现这个的最简单的方法是什么？我已经找到了这个主题，有点解释了一下，但是他们是在何时从服务器获取信息的呢？当视图被更改或在应用程序启动时？

非常感谢提供任何有关实现这种滚动的信息。

- Majster

3个回答

0

我基于标准的UIPageViewController子类和自动布局约束实现了一个小型原型，用于视差效果。如果你想要看一下，它已经相当完整地记录在案: TestParallax

简而言之，视差的核心是在 scrollViewDidScroll 委托方法中完成的:

extension PageViewController: UIScrollViewDelegate {

    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let screenWidth = scrollView.bounds.width
        /*
         In a UIPageViewController, the initial contentOffset.x is not 0, but equal to the screen width
         (so that the offset goes between (1 * screenWidth) and 0 when going to the previous view controller, 
         and from (1 * screenWidth) to (2 * screenWidth) when going to the next view controller).
         Also, it's reset to the screenWidth when the scroll to a previous or next view controller is complete.
         Therefore, we calculate a new 'horizontalOffset' starting at 0, and going:
         - negative from 0 to (-screenWidth/2) when scrolling to the next view controller,
         - and from 0 to (screenWidth/2) when scrolling to the previous view controller.
         */
        let horizontalOffset = (scrollView.contentOffset.x - screenWidth)/2

        // Special case: initial situation, or when the horizontalOffset is reset to 0 by the UIPageViewController.
        guard horizontalOffset != 0 else {
            previousPageController?.offsetBackgroundImage(by: screenWidth/2)
            currentPageController?.offsetBackgroundImage(by: 0)
            nextPageController?.offsetBackgroundImage(by: -screenWidth/2)
            return
        }

        // The background image of the current page controller should always be offset by the horizontalOffset (which may be positive or negative)
        guard let currentPageController = currentPageController else { return }
        currentPageController.offsetBackgroundImage(by: horizontalOffset)

        if horizontalOffset > 0 { // swiping left, to the next page controller

            // The background image of the next page controller starts with an initial offset of (-screenWidth/2), then we apply the (positive) horizontalOffset
            if let nextPageController = nextPageController {
                let nextOffset = -screenWidth/2 + horizontalOffset
                nextPageController.offsetBackgroundImage(by: nextOffset)
            }
        } else { // swiping right, to the previous page controller

            // The background image of the previous page controller starts with an initial offset of (+screenWidth/2), then we apply the (negative) horizontalOffset
            if let previousPageController = previousPageController {
                let previousOffset = screenWidth/2 + horizontalOffset
                previousPageController.offsetBackgroundImage(by: previousOffset)
            }
        }
    }
}

- Frederic Adda

0

您不应更改页面视图控制器滚动视图的委托。这可能会破坏其正常行为。

相反，您可以：

在页面视图控制器的视图上添加一个平移手势：

let panGesture = UIPanGestureRecognizer(target: self, action: #selector(panRecognized(gesture:)))
view.addGestureRecognizer(panGesture)
panGesture.delegate = self

添加新函数以了解视图的滚动方式。

@objc func panRecognized(gesture: UIPanGestureRecognizer) {
    // Do whatever you need with the gesture.translation(in: view)
}

将您的 ViewController 声明为 UIGestureRecognizerDelegate。

实现此函数：

func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool {
    return true
}

- Tulleb

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Leonard Pauli · Accepted Answer

其实很简单：

子类化UIScrollView
添加UIView *parallaxView;作为@property
添加CGFloat parallaxFactor作为@property
重写layoutSubviews
调用super，然后使用self.scrollOffset*parallaxFactor来定位parallaxView

就是这样！

我自己也制作了一个多功能的UIScrollView子类，非常容易使用，非常适合这种情况！在GitHub上获取它：https://github.com/LeonardPauli/LPParallaxScrollView

祝你好运！