UIScrollView 子视图的视差效果 [英] Parallax effect with UIScrollView subviews

问题描述

我正在尝试在 UIScrollView 内的 UIView 上创建视差效果.效果似乎有效，但效果不佳.

I'm trying to create a Parallax effect on a UIView inside a UIScrollView. The effect seems to work, but not so well.

1. 首先，我将两个 UIView 子视图添加到 UIScrollView 并设置 UIScrollViews contentSize.
2. 视图汇总并创建 {320, 1000} 的 contentSize.

3. 然后我在 scrollViewDidScroll 中实现了以下内容:

1. First i add two UIView sub-views to a UIScrollView and set the UIScrollViews contentSize.
2. The Views sum up and create a contentSize of {320, 1000}.

3. Then I implemented the following in scrollViewDidScroll:

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    CGFloat offsetY = scrollView.contentOffset.y;

    CGFloat percentage = offsetY / scrollView.contentSize.height;

    NSLog(@"percent = %f", percentage);

    if (offsetY < 0) {

        firstView.center = CGPointMake(firstView.center.x, firstView.center.y - percentage * 10);

    } else if (offsetY > 0){

        firstView.center = CGPointMake(firstView.center.x, firstView.center.y + percentage * 10);

    }
}

这些代码行确实创建了视差效果，但是随着滚动的继续，如果我滚动到原始起始位置，视图不会返回到其原始位置.

These lines of code do create a parallax effect, but as the scrolling continues, the view does not return to it's original position if i scroll to the original starting position.

我尝试操作视图层和框架，结果都一样.

I have tried manipulating the views layers and frame, all with the same results.

任何帮助将不胜感激.

推荐答案

您遇到的问题是您的辅助滚动基于偏移量与大小的比率，而不仅仅是基于当前偏移量.因此，当您从 99 的偏移量增加到 100(比如 100)时，您的辅助滚动增加了 10，但是当您回到 99 时，您的辅助滚动只减少了 9.9，因此不再与上次是你 99 岁.非线性滚动是可能的，但不是你这样做的方式.

The problem you have is that you are basing your secondary scrolling on a ratio of offset to size, not just on the current offset. So when you increase from an offset of 99 to 100 (out of say 100) your secondary scroll increases by 10, but when you go back down to 99 your secondary scroll only decreases by 9.9, and is thereby no longer in the same spot as it was last time you were at 99. Non-linear scrolling is possible, but not the way you are doing it.

一种可能更简单的方法是创建第二个滚动视图并将其放置在实际滚动视图下方.使它变得不难处理 (setUserInteractionEnabled:false) 并在主滚动委托期间修改它的 contentOffset，而不是尝试手动移动 UIImageView.

A possible easier way to deal with this is to create a second scrollview and place it below your actual scrollview. Make it non intractable (setUserInteractionEnabled:false) and modify it's contentOffset during the main scrolling delegate instead of trying to move a UIImageView manually.

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    [scrollView2 setContentOffset:CGPointMake(scrollView.contentOffset.x,scrollView.contentOffset.y * someScalingFactor) animated:NO];
}

但请确保不要为 scrollView2 设置委托，否则您可能会得到一个循环委托方法调用，这对您来说不会有好的结果.

But make sure not to set a delegate for the scrollView2, otherwise you may get a circular delegate method call that will not end well for you.

这篇关于UIScrollView 子视图的视差效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！