iOS视差滚动效果（如雅虎新闻摘要应用） [英] iOS Parallax Scrolling effect (like in Yahoo News Digest app)

问题描述

我想知道如何实现类似于Yahoo News Digest应用程序的视差滚动。当用户水平滚动时，背景图像以不同的速度滚动，启用分页。

I would like to know how to implement parallax scrolling similar to Yahoo News Digest app. In which when user scroll horizontally background image scrolls in a different speed with the paging is enabled.

可能是他们使用带有背景视图的ScrollView。不完全确定。提示实现这样的滚动会很棒。我已经检查了类似的问题，但找不到我想要的答案。

May be they do it with a ScrollView with a background view. Not exactly sure. Hint to implement such scrolling would be great. I have checked similar questions but couldn't find the answer I was looking for.

推荐答案

我之前用2完成了这个滚动视图。

I've done this before with 2 scrollviews.

你有主要的细节滚动视图，然后是它背后的视差滚动视图（或者你想要的任何地方）。

You have the main detail scroll view and then the parallax scroll view behind it (or wherever you want it).

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

Then you become the delegate of the detail scrollview.

在方法 scrollView：didScroll 你然后可以调整视差视图的滚动。

In the method scrollView:didScroll you can then adjust the scroll of the parallax view.

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

If you're just doing the x axis then you want something like this...

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内容偏移百分比设置为相同。

This will set the scrollviews content offset "percentage" to be the same on each.

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

To get the parallax effect you just need to make the contentSize of each scrollview different.

如果视差滚动视图的内容大小比详细滚动视图大，则滚动速度会更快。如果内容大小较小，则滚动较慢。

If the parallax scroll view has a bigger content size than the detail scroll view it will scroll faster. If it has a smaller content size it will scroll slower.

这篇关于iOS视差滚动效果（如雅虎新闻摘要应用）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！