pageViewController 的视差效果

Posted

技术标签:

【中文标题】pageViewController 的视差效果【英文标题】:Parallax effect for the pageViewController 【发布时间】:2015-04-27 04:29:00 【问题描述】:

我有一个pageViewController - 我想添加一个带有图像视图的滚动视图,当我滚动我的pageViewController 中的页面时 - 背景应该以相同的方向滚动但看不到。我在故事板中使用auto-layout

所以我添加了 pageViewController:

pageController = [[UIPageViewController alloc] initWithTransitionStyle:UIPageViewControllerTransitionStyleScroll
                                                 navigationOrientation:UIPageViewControllerNavigationOrientationHorizontal
                                                               options:nil];
pageController.delegate = self;
pageController.dataSource = self;
[self addChildViewController:pageController];

CGRect pageFrame = self.view.frame;
pageFrame.origin.y += 50.f;
pageFrame.size.height -= 50.f;
pageController.view.frame = pageFrame;
pageController.view.backgroundColor = [UIColor clearColor];
[self.view addSubview:pageController.view];

获取它的滚动视图:

for (UIView *possibleScrollView in pageController.view.subviews) 
    if ([possibleScrollView isKindOfClass:[UIScrollView class]]) 
        ((UIScrollView *)possibleScrollView).delegate = self;
    

并监听它的委托:

- (void) scrollViewDidScroll:(UIScrollView *)scrollView

    NSLog(@"%f", scrollView.contentOffset.x);
    [parlaxScrollView setContentOffset:CGPointMake(scrollView.contentOffset.x * .2f, scrollView.contentOffset.y) animated:NO];

当我滚动到第二页时,我得到了一些令人困惑的结果:

378.500000
386.500000
403.500000
419.000000
448.000000
469.000000
...
747.000000
750.000000
375.000000 ///!!!!!THE CONTENT OFFSET RETURNED TO THE INITIAL VALUE!!!!!

为什么我的内容视图偏移会重置?它有什么问题?

【问题讨论】:

【参考方案1】:

我认为您需要跟踪当前正在显示的页面并将宽度添加到内容偏移量。

类似这样的: 让 currentPage:Int

【讨论】:

我通过使用 SwipeView 库解决了这个问题 - 感谢您的建议【参考方案2】:

5 年后,抱歉耽搁了? 也许其他人仍然会遇到同样的问题。

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

相反,您可以:

    向页面视图控制器的视图添加平移手势:

    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
    
    

【讨论】:

以上是关于pageViewController 的视差效果的主要内容,如果未能解决你的问题,请参考以下文章

使用CSS和JavaScript创建基本的视差滚动效果

SpriteKit - SKCameraNode 视差效果?

平滑滚动和滚动的视差效果

视差映射期间奇怪的分层效果

基于Vue实现商城详情页“视差滚动”效果

在 UIScrollView 中滚动图像时添加视差效果