创建无限背景从右到左滚动

Question

我正在尝试创建一个动画来创建一个移动物体的幻觉.因此,对象将保持在相同位置,但是比屏幕宽度宽的背景图像视图将无限移动.我的代码不是很顺利.

    let backgroundView = UIView()
    backgroundView.backgroundColor = UIColor.blueColor()
    backgroundView.frame = CGRect(x: 0, y: 120, width: 50, height: 50)
    self.view.addSubview(backgroundView)
    let options = UIViewAnimationOptions.Repeat | UIViewAnimationOptions.CurveLinear

    UIView.animateWithDuration(2.0, delay: 0.0, options: options, animations: {
        backgroundView.frame = CGRect(x: 420, y: 120, width: 50, height: 50)
        }, completion: nil) 

Answer 1

更新的答案:

要像在评论中提到的那样为背景图像设置动画,一种方法是为背景图像创建无缝图案并将其移动到屏幕上.例如,在屏幕上移动image1,用image2跟随它,将image1移回原始位置,将image2移回原始位置,重复.这可能是一种更简单的方法,取决于你实际使用它的目的,但这只是一个例子.我为这个例子制作了一个简单的背景图案,随意使用它.

func animateBackground() {
    let animationOptions = UIViewAnimationOptions.Repeat | UIViewAnimationOptions.CurveLinear
    let backgroundImage = UIImage(named:"backgroundPattern.jpg")!
    var amountToKeepImageSquare = backgroundImage.size.height - self.view.frame.size.height

    // UIImageView 1
    var backgroundImageView1 = UIImageView(image: backgroundImage)
    backgroundImageView1.frame = CGRect(x: self.view.frame.origin.x, y: self.view.frame.origin.y, width: backgroundImage.size.width - amountToKeepImageSquare, height: self.view.frame.size.height)
    self.view.addSubview(backgroundImageView1)

    // UIImageView 2
    var backgroundImageView2 = UIImageView(image: backgroundImage)
    backgroundImageView2.frame = CGRect(x: backgroundImageView1.frame.size.width, y: self.view.frame.origin.y, width: backgroundImage.size.width - amountToKeepImageSquare, height: self.view.frame.height)
    self.view.addSubview(backgroundImageView2)

    // Animate background
    UIView.animateWithDuration(6.0, delay: 0.0, options: animationOptions, animations: {
        backgroundImageView1.frame = CGRectOffset(backgroundImageView1.frame, -1 * backgroundImageView1.frame.size.width, 0.0)
        backgroundImageView2.frame = CGRectOffset(backgroundImageView2.frame, -1 * backgroundImageView2.frame.size.width, 0.0)
        }, completion: nil)

    // Have something in the foreground look like its moving
    var square = UIView(frame: CGRect(x: 0, y: 0, width: 50, height: 50))
    square.frame.origin = CGPoint(x: self.view.frame.origin.x + 25, y: self.view.frame.size.height - 75)
    square.backgroundColor = UIColor.darkGrayColor()
    self.view.addSubview(square)

    // Animate foreground
    UIView.animateWithDuration(0.5, delay: 0, options: animationOptions, animations: {
        square.transform = CGAffineTransformMakeRotation(33)
        }, completion: nil)
}

你最终得到这样的动画:

原始答案:

我不完全确定你想要达到的目标,但是从我可以收集的内容来看,你希望在重复每个动画时不要跳回到它的起始位置.您可以通过将UIView视图左侧的起点和视图右侧的结束点设置起来来实现此目的.

func animateSquare() {
    // Create our square with size of 50x50
    var square = UIView(frame: CGRect(x: 0, y: self.view.frame.height / 2, width: 50, height: 50))
    // Set its origin just off the left of the screen so it is not visible
    square.frame.origin = CGPoint(x: 0 - square.frame.size.width, y: self.view.frame.height / 2)
    square.backgroundColor = UIColor.blackColor()
    self.view.addSubview(square)

    // Setup animation and repeat
    let animationOptions = UIViewAnimationOptions.Repeat | UIViewAnimationOptions.CurveLinear
    UIView.animateWithDuration(2.0, delay: 0, options: animationOptions, animations: {
        // Offset our square's frame by the width of the view + the width of the square
        // This way it moves off the screen to the right completely
        square.frame = CGRectOffset(square.frame, self.view.frame.width + square.frame.width, 0.0)
        }, completion: nil)
}

你最终得到这样的动画: