創建無限背景從右向左滾動

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

更新答案：

要動畫化background image就像你在您的評論中提到，一個方法是爲你的背景影像中創造一個無縫的樣式，並在屏幕上移動它。例如，在屏幕上移動圖像1，跟隨圖像2，將圖像1移回原始位置，將圖像2移回原始位置，重複。這可能是一個更簡單的方法，取決於你實際將要使用的方式，但這僅僅是一個例子。對於這個示例，我已經制作了simple background pattern，隨時可以使用它。

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) 
} 

你可以看到類似這樣的動畫結束：