ios - iOS 中 UIView 的垂直视差滚动

Question

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

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

目前这个版本只移动了前两个 View ，因为一旦我让那些 View 工作，剩下的应该很容易。我也没有包含所有会阻止某些 View 朝某些方向移动的检查，因为这也与问题无关。

这是一个使用按钮的网络版本: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

好的，在我看来，您可以尝试做类似的事情:

首先只使用两个 View ，在你的例子中只有两个 View 同时可见，所以你可以重新使用 View 您要显示的下一张幻灯片。

所以一开始你有 2 个 View (假设它们的尺寸与屏幕 300x500 相同，是的，我知道它们不是真实尺寸， 但数学会更容易 :p)。 在你的初始化函数中，你在 150x250 的位置(屏幕中心)查看一个，在 150x500 的位置查看屏幕 2(所以你只看到 View 的上半部分)。

让我们调用 panGestureTranslation.y : DeltaY(它会更快)。所以在函数 panGestureRecognizer 中你想移动两个 View 对于视差效应，在这种情况下，一个简单的解决方案是移动 2*DeltaY 的 view1 和 DeltaY 的 view2，就像那样，当 view1 将完全退出屏幕， View 二将位于屏幕中央。

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

你可以通过测试 View 一的位置来知道是否完成(如果 position.y <= than 0，那么它就完成了。

完成后，您有两种选择，首先将 view1 放在 view2 的底部(位置 150x500 并显示在 view2 后面)，然后用第三个内容感受它，然后切换一个 bool 值 执行与下一帧完全相反的操作(您将移动 2*DeltaY 的 view2 和 DeltaY 的 view1)。

另一种解决方案是将两个 View 移动到原始位置(view1 为 150x250，view two 为 150x500)，并用 view2 的内容感受 view1(你必须在没有动画的情况下这样做 所以用户看不到 View 有切换)，并且感觉 view2 和你的第三个内容，所以下一帧，完全相同的代码将再次工作。您可以使用这种方法获得无限的内容。

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

如果我在某些地方不清楚，请告诉我^^。