水平滚动与ios的视差背景 [英] Horizontal scrolling with parallax background for ios

问题描述

我面临着创建介绍视图的挑战，比如Cleanio应用程序（ https://itunes.apple.com/fr/app/cleanio-pressing-la-demande/id885856031?mt=8 ）。

以下是它的样子：

I'm facing a challenge of creating an introduction view, something like the "Cleanio" app (https://itunes.apple.com/fr/app/cleanio-pressing-la-demande/id885856031?mt=8).
Here is how it looks like:

因此，背景和叠加层是独立移动的不是以相同的速度。

有没有人有一个起点如何实现？

So, the background and the overlay are moving independently and not in the same speed.
Does anyone have a start point how to realize that?

推荐答案

是的。

你需要的是两个 UIScrollView 。这些都应该是主视图的子视图（彼此不包含在内。

What you need is two UIScrollViews. These should both be subviews of the main view (not contained in each other.

底部的图像包含你的图像，顶部的图像包含内容。

The bottom one has your image in it and the top one has the content.

将它们称为 imageScrollView 和 contentScrollView 。

成为 contentScrollView 的代表。

内容将如下所示...

The contents will look something like this...

contents:    [---page 1---][---page 2---][---page 3---][---page 4---]
image:       [------------the image------------]
screen:      [---screen---]

关键是那个图像小于所有页面并且大于屏幕。

Key is that image is smaller than all the pages and bigger than the screen.

滚动视图的帧宽度与屏幕相同。此图表仅用于显示内容宽度不是帧宽。

因此，屏幕保持原样，两个滚动视图在其上移动。

So, the screen stays where it is and the two scroll views move over it.

现在是视差部分......

Now the parallax part...

- (CGFloat)maxOffsetForScrollView:(UIScrollView *)scrollView
{
    CGFloat contentWidth = scrollView.contentSize.width;
    CGFloat frameWidth = CGRectGetWidth(scrollView.frame);

    return contentWidth - frameWidth;
}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    // this is the delegate method for the content scroll view.
    // I'm only doing horizontal stuff here, you can do vertical too if you want

    CGFloat maximumContentOffset = [self maximumOffsetForScrollView:self.contentScrollView];
    CGFloat currentOffset = self.contentScrollView.contentOffset.x;

    CGFloat percentageOffset = currentOffset/maximumContentOffset;

    CGFloat maximumImageOffset = [self maximumContentOffsetForScrollView:self.imageScrollView];
    CGFloat actualImageOffset = maximumImageOffset * percentageOffset;

    [self.imageScrollView setContentOffset:CGPointMake(actualImageOffset, 0)];
}

这将从内容视图中获取百分比偏移量并使图像视图偏移相同的百分比偏移。

This takes the percentage offset from the content view and offsets the image view by the same percentage offset.

结果是视差效应。您可以通过更改图像和内容的相对大小来使其更快或更慢。更多页面（或更小的图像）=更慢的视差。

The result is a parallax effect. You can make it faster or slower by changing the relative sizes of the image and the content. More pages (or smaller image) = slower parallax.

这篇关于水平滚动与ios的视差背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！