iOS中UIView的垂直视差滚动

Question

我正在尝试在几个屏幕大小的视图之间添加垂直视差滚动效果。

通过按钮完成这并不太复杂，但是我希望它由 UIPanGesture 控制，类似于 iOS 的Year Walk Companion App。此处显示的当前公式无法正常工作。

目前这个版本只移动了前两个视图，因为一旦我得到了那些工作，其余的应该很容易。我也没有包括所有会阻止某些视图向某些方向移动的检查，因为这也与问题无关。

这是一个使用按钮的网络版本：http://flycarpodacus.zxq.net/iPhone%20Parallax/event.html

希望有人能提供帮助。

ViewController.h

@interface ViewController : UIViewController {
    UIPanGestureRecognizer *panGesture;
    int activeView;
    int nextView;
    float offset;
    float speed;

}
@property (weak, nonatomic) IBOutlet UIView *view1;
@property (weak, nonatomic) IBOutlet UIView *view2;
@property (weak, nonatomic) IBOutlet UIView *view3;
@property (weak, nonatomic) IBOutlet UIView *view4;

ViewController.m

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController
@synthesize view1, view2, view3, view4;
- (void)viewDidLoad
{
    [super viewDidLoad];
    activeView = 1;
    offset = 220;
    speed = 1;
    panGesture = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePanGesture:)];

    [self.view addGestureRecognizer:panGesture];

    if (self.view.frame.size.height != 568) {
        CGRect frame = self.view.frame;
        frame.size.height = self.view.frame.size.height;
        view1.frame = frame;
        view2.frame = frame;
        view3.frame = frame;
        view4.frame = frame;
    }

    view4.center = CGPointMake(view4.center.x, self.view.frame.size.height/2 + offset);
    view3.center = CGPointMake(view3.center.x, self.view.frame.size.height/2 + offset);
    view2.center = CGPointMake(view2.center.x, self.view.frame.size.height/2 + offset);
    view1.center = CGPointMake(view1.center.x, self.view.frame.size.height/2);
}
- (void)handlePanGesture:(UIPanGestureRecognizer *)panGestureRecognizer {
    CGPoint panGestureTranslation = [panGestureRecognizer translationInView:self.view];

    switch (activeView) {
        case 1:
            view1.center = CGPointMake(view1.center.x, panGestureTranslation.y + self.view.frame.size.height/2);
            view2.center = CGPointMake(view2.center.x, view2.center.y - 2.5f);
            break;

        default:
            break;
    }
}

Answer 1

好吧，在我看来，你可以尝试做类似的事情：

首先只使用两个视图，在您的示例中，同时只有两个视图可见，因此您可以将视图重新用于 您要显示的下一张幻灯片。

所以一开始你有 2 个视图（假设它们的尺寸与屏幕 300x500 相同，是的，我知道它们不是真实尺寸， 但这对数学来说会更容易：p）。 在您的 init 函数中，您可以在 150x250（屏幕中心）的位置查看一个，而在 150x500 的位置查看屏幕 2（所以您只能看到 视图的上半部分）。

让我们调用 panGestureTranslation.y : DeltaY（它会更快）。所以在函数 panGestureRecognizer 你想要移动两个视图 使用 parralex 效果，在这种情况下，一个简单的解决方案是移动 2*DeltaY 的 view1 和 DeltaY 的 view2，就像这样，当 view1 将完全退出屏幕，视图 2 将位于其中心。

" view1.center = CGPointMake(view1.center.x, view1.center.y + 2*DeltaY); view2.center = CGPointMake(view1.center.x, view2.center.y + DeltaY); "

您可以通过测试视图一的位置来知道是否完成（如果 position.y

当完成时，您有两个选择，首先将 view1 放在 view2 的底部（在位置 150x500 并显示在 view2 后面），然后用第三个内容来感受它，然后切换一个布尔值 与下一帧相反（您将移动 2*DeltaY 的 view2 和 DeltaY 的 view1）。

另外的解决办法是把两个view移到原来的位置（view1在150x250，view两个在150x500），用view2的内容感受view1（你必须在没有动画的情况下做 所以用户看不到视图有开关），并用你的第三个内容感受 view2，所以下一帧，完全相同的代码将再次工作。使用这种方法，您可以拥有无​​限的内容。

" view1.center = CGPointMake(view1.center.x, view1.center.y + 2*DeltaY); view2.center = CGPointMake(view1.center.x, view2.center.y + DeltaY); "

如果我有不清楚的地方请告诉我^^。

Answer 2

我建议查看我们关于视差效果的文章，详细解释和开源实现 => http://blog.denivip.ru/index.php/2013/08/parallax-in-ios-applications/?lang=en