iOS视差滚动效果(如雅虎新闻摘要应用程序)

我想知道如何实现类似于雅虎新闻摘要应用程序的视差滚动。 其中当用户滚动水平背景图像时,以不同的速度滚动,并且分页被启用。

可能是他们用ScrollView做背景视图。 不完全确定。 提示实施这种滚动会很好。 我检查了类似的问题,但找不到我正在寻找的答案。

我以前用2个滚动条做过这个。

你有主要的细节滚动视图,然后在它后面的视差滚动视图(或任何你想要的)。

然后你成为细节滚动视图的代表。

scrollView:didScroll方法中,您可以调整视差视图的滚动条。

如果你只是做x轴,那么你想要这样的东西…

 CGFloat detailMaxOffset = self.detailScrollView.contentSize.width - CGRectGetWidth(self.scrollView.frame); CGFloat percentage = self.detailScrollView.contentOffset.x / maxOffset; CGFloat parallaxMaxOffset = self.parallaxScrollView.contentSize.width - CGRectGetWidth(self.parallaxScrollView.frame); [self.parallaxScrollView setContentOffset:CGPointMake(percentage * parallaxOffset, 0); 

这将设置scrollviews内容偏移“百分比”是相同的每个。

要获得视差效果,只需使每个滚动视图的contentSize不同即可。

如果视差滚动视图具有比详细滚动视图更大的内容尺寸,则它将滚动得更快。 如果内容较小,则会滚动较慢。

这是答案。 我从uitableview子类化它,使数据可重复使用,并包装在uiview中。 https://github.com/michaelhenry/MHYahooParallaxView

谢谢,凯尔

100%的工作和水坝容易

在imageview上查看图像视图的大小。 默认情况下alpha为视图集0。

 //MARK: Scroll View Delegate methods -(void)scrollViewDidScroll:(UIScrollView *)scrollView{ NSLog(@"X: %f Y: %f",scrollView.contentOffset.x,scrollView.contentOffset.y); CGFloat scrollY = _mainScrollView.contentOffset.y; CGFloat height = _alphaView.frame.size.height; CGFloat alphaMonitor = scrollY/height; _alphaView.alpha = alphaMonitor; } 

Swift 3

下面是我如何得到视差效果在Swift 3中工作在tvOS应用程序中的垂直滚动。

在ViewDidLoad()中:

  parallaxScrollView.delegate = self detailScrollView.delegate = self 

和以下:

 override func viewDidLayoutSubviews() { self.detailScrollView!.contentSize = CGSize(width: 1920, height: 2700) self.parallaxScrollView?.contentSize = CGSize(width: 1920, height: 3000) } //// THE SCROLL VIEW func scrollViewDidScroll(_ scrollView: UIScrollView) { // Parallax effect let detailMaxOffset = self.detailScrollView.contentSize.height - self.detailScrollView.frame.height; let percentage = self.detailScrollView.contentOffset.y / detailMaxOffset let parallaxMaxOffset = self.parallaxScrollView.contentSize.height - self.parallaxScrollView.frame.height; let parallaxOffset = CGPoint(x:0,y:(percentage * parallaxMaxOffset)) self.parallaxScrollView.setContentOffset((parallaxOffset), animated: false) }