Question

我是iOS UI开发的新手，我需要一些帮助来弄清楚，实现图像带的最佳方法是什么（水平带中的图像序列）。我不需要细节（有人给我写代码），只是指导我应该把重点放在学习库和最重要的设计模式上（通过设计模式我的意思是iOS UI的软件设计）。

任务详情：我将有图像带 - 几个相关图像的序列。这将是我的横向过渡。过渡动画将是简单的推动动画（类似推动CATransion），由向左/向右滑动启动。在图像的顶部将覆盖一些文本，图标信息等。对于当前皮带中的所有图像，叠加信息将是相同的。我将有多个图像带 - 这将是我的垂直过渡。皮带之间的过渡将通过向上/向下滑动触发。不同的皮带将包含不相关的信息，因此必须更改从第1点覆盖的信息。动画也将是点1中的简单推动动画。

我可能应该继承UIView并将我的腰带作为一个对象实现，它将包含不同的UIView（叠加）和UIImageViews（用于图像）。我是在正确的轨道上吗？

一些有益的头脑风暴将受到高度赞赏。

Answer 1

是的 - 我已经完成了很多这些。您在顶视图上方添加了一个UIView。我通常使用带有一些alpha的全屏幕，这样他们就能看到核心内容。然后在不会发生变化的东西之上添加内容：文字，图标等等......然后在上面放置要滑动的图像并添加滑动手势识别器，通常一个用于左侧一个是对的。当他们滑动时，你会从设备的边缘开始一个新的UIView，用图像初始化它，并根据他们刷过的方式设置左右两侧的帧的动画。我的帮助教程展示了如何逐步使用我的应用程序，所以我还在一些飞入的框架上初始化多部分动画;这是一个很好看的可选效果。这是我使用的那个（动画支持被删除或者代码太多），并且有很多变化。编辑注意我的应用程序不支持旋转，但如果你的应用程序你必须在旋转后调整帧。

    - (void)init
    {
        currentPanelNumber = 10;
    self = [super initWithNibName:nil bundle:nil];
    if (self)
    {
        [self.view setBackgroundColor:[UIColor clearColor]];
        currentPanelNumber = 10;

        overlay = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 1024, 768)];
        overlay.backgroundColor = [UIColor colorWithRed:.9 green:.9 blue:.9 alpha:.9];
        [self.view addSubview:overlay];

        CGRect currentPanelFrame = CGRectMake(267, 175, 494, 444);

        currentPanel =
            [[HelpView alloc] initWithFrame:currentPanelFrame withImage:[UIImage imageNamed:@"10"]];
        currentPanel.frame = currentPanelFrame;
        [overlay addSubview:currentPanel];

        // ----------------------------------
        // Gesture swipes go here
        swipeLeftRecognizer =
            [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(swipeLeft:)];
        [swipeLeftRecognizer setDirection:UISwipeGestureRecognizerDirectionLeft];
        [overlay addGestureRecognizer:swipeLeftRecognizer];

        swipeRightRecognizer =
            [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(swipeRight:)];
        [swipeRightRecognizer setDirection:UISwipeGestureRecognizerDirectionRight];
        [overlay addGestureRecognizer:swipeRightRecognizer];

        swipeDownRecognizer =
            [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(swipeDown:)];
        [swipeDownRecognizer setDirection:UISwipeGestureRecognizerDirectionDown];
        [overlay addGestureRecognizer:swipeDownRecognizer];

        UITapGestureRecognizer *tapRecognizer =
            [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleTap:)];
        [overlay addGestureRecognizer:tapRecognizer];

        skipIcon = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"SkipAndStartIcon"]];
        CGSize size = CGSizeMake(84, 124);
        skipIcon.frame = CGRectMake((self.view.frame.size.width/2)-(size.width/2), self.view.frame.size.height-size.height-25, size.width, size.height);
        [self.view addSubview:skipIcon];
}

- (void)goNext
{
    // Clear out all subviews to remove lingering animations
    [[currentPanel subviews] makeObjectsPerformSelector:@selector(removeFromSuperview)];

    if(currentPanelNumber>=80)
    {
        [self closeHelp];
        return;
    }

    NSString *nextImage = [NSString stringWithFormat:@"%i", currentPanelNumber+10];

    CGRect nextPanelFrame = CGRectMake(765, 175, 494, 444);
    nextPanel = [[HelpView alloc] initWithFrame:nextPanelFrame withImage:[UIImage imageNamed:nextImage]];

    nextPanel.frame = nextPanelFrame;
    [overlay addSubview:nextPanel];

    [UIView animateWithDuration:.2 animations:^
    {
        nextPanel.frame = currentPanel.frame;
    }
    completion:^(BOOL finished)
    {
        currentPanel.image = nextPanel.image;
        nextPanel.alpha = 0;
        currentPanelNumber += 10;
}

- (void)goPrevious
{
    if(currentPanelNumber<=10)
    {
        return;
    }

    // Clear out all subviews to remove lingering animations
    [[currentPanel subviews] makeObjectsPerformSelector:@selector(removeFromSuperview)];

    NSString *nextImage = [NSString stringWithFormat:@"%i", currentPanelNumber-10];

    CGRect nextPanelFrame = CGRectMake(-230, 175, 494, 444);

    // nextPanel = [[UIImageView alloc] initWithImage:[UIImage imageNamed:nextImage]];
    nextPanel = [[HelpView alloc] initWithFrame:nextPanelFrame withImage:[UIImage imageNamed:nextImage]];

    nextPanel.frame = nextPanelFrame;
    [overlay addSubview:nextPanel];

    [UIView animateWithDuration:.2 animations:^
    {
        nextPanel.frame = currentPanel.frame;
    }
    completion:^(BOOL finished)
    {
        currentPanel.image = nextPanel.image;
        nextPanel.alpha = 0;
        currentPanelNumber -= 10;            
    }];
}

如何在iOS中实现具有水平和垂直过渡动画的图像带？

1 个答案: