iOS中UIView的垂直视差滚动

3
我正在尝试在所有屏幕大小的几个视图之间添加垂直视差滚动效果。通过按钮完成并不太复杂,但是我希望它可以由UIPanGesture控制,类似于iOS的Year Walk Companion App。目前这里显示的方程式不能正常工作。目前这个版本只移动了前两个视图,因为一旦我让它们工作起来,其余的就应该很容易了。我还没有包含所有检查,以防止某些视图在某些方向上移动,因为这也与问题无关。这是一个使用按钮工作的Web版本: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;
    }
}
2个回答

0

好的,我认为你可以尝试这样做:

首先只使用两个视图,在你的例子中,同一时间只有两个视图可见,所以你可以重复使用视图来显示下一张幻灯片。

所以开始时你有2个视图(假设它们的大小与屏幕大小相同,为300x500,是的,我知道它们不是真实大小,但对于数学计算会更容易:p)。 在你的初始化函数中,将第一个视图放置在150x250的位置(屏幕的中心),将第二个视图放置在150x500的位置(所以你只看到了视图的上半部分)。

让我们把panGestureTranslation.y称为DeltaY(这样会更快)。所以在panGestureRecognizer函数中,你想要用视差效果移动两个视图,其中一个简单的解决方案就是在这种情况下将view1移动2 * DeltaY,将view2移动DeltaY,这样当view1完全退出屏幕时,view2将恰好处于其中心。

" 视图1.中心= CGPointMake(view1.center.x,view1.center.y + 2 * DeltaY); 视图2.中心= CGPointMake(view1.center.x,view2.center.y + DeltaY); "

你可以通过测试视图一的位置来确定是否完成(如果position.y小于等于0,则表示已完成)。

当完成时,你有两个选择,第一种是将view1放在view2底部(位置为150x500,并在view2后面显示),并用第三个内容填充它,然后切换一个布尔值以在下一帧执行完全相反的操作(你将移动view2的2 * DeltaY和view1的DeltaY)。

另一种解决方案是将两个视图移回原始位置(view1在150x250处,view2在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);"

如果我有哪些地方表述不清楚,请告诉我^^。


-1

以链接形式回答并不是正确的方式。 - Rumbles

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接