当它在屏幕上水平滑动时循环的图像，看起来像它的无限滚动

Question

我想有一个视图控制器，循环的图像在背景中，给人无限滚动的外观。例如，如果我使用下面的图像，左边缘和右边缘将完美匹配，并将用于提供无限滚动的外观。有没有人知道我会怎么设置这个？我做了一些研究，结果迷失了方向。谢谢大家！

​

​

Answer 1

我会这样做的。编辑，而不是将其作为练习留给读者，更新以展示如何在任一方向上平移……

@property (nonatomic, assign) BOOL keepGoing;
@property (nonatomic, assign) BOOL panRight;
@property (nonatomic, strong) UIImageView *imageViewA;
@property (nonatomic, strong) UIImageView *imageViewB;

- (void)getReady {

    // init theImage
    UIImage *theImage = [UIImage imageNamed:@"theImage.png"];

    // get two copies of the image
    self.imageViewA = [[UIImageView alloc] initWithImage:theImage];
    self.imageViewB = [[UIImageView alloc] initWithImage:theImage];

    // place one in view, the other, off to the right (for right to left motion)
    NSInteger direction = (self.panRight)? 1 : -1;
    self.imageViewA.frame = self.view.bounds;
    self.imageViewB.frame = CGRectOffset(self.view.bounds, direction*self.imageViewA.bounds.size.width, 0.0);

    [self.view addSubview:self.imageViewA];
    [self.view addSubview:self.imageViewB];
    self.keepGoing = YES;
}

- (void)go {
    NSInteger direction = (self.panRight)? 1 : -1;
    CGFloat offsetX = -direction*self.imageViewA.bounds.size.width;

    [UIView animateWithDuration:1.0 delay:0.0 options:UIViewAnimationOptionCurveLinear animations:^{
        self.imageViewA.frame = CGRectOffset(self.imageViewA.frame, offsetX, 0);
        self.imageViewB.frame = CGRectOffset(self.imageViewB.frame, offsetX, 0);
    } completion:^(BOOL finished) {
        if (self.keepGoing) {
            // now B is where A began, so swap them and reposition B
            UIImageView *temp = self.imageViewA;
            self.imageViewA  = self.imageViewB;
            self.imageViewB = temp;
            self.imageViewB.frame = CGRectOffset(self.view.bounds, direction*self.view.bounds.size.width, 0.0);
            // recursive call, but we don't want to wind up the stack
            [self performSelector:@selector(go) withObject:nil afterDelay:0.0];
        }
    }];
}

要使其生效，请设置panRight属性，然后调用[self getReady];和[self go];。

它将以异步方式运行。让它停止，set self.keepGoing = NO;。

Answer 2

一种简单的方法是使图像是屏幕宽度的两倍。将其设置为0,0。根据需要左右设置动画。一旦原点小于x轴上图像宽度的一半的负值，它就到达了右边缘的末端，一旦原点在x轴上大于0，它就到达了左边缘的末端。发生这种情况时，只需重置原点即可。