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

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 like you've mentioned in your comment, one way would be to create a seamless pattern for your background image and move it across the screen. For example, Move image1 across screen, follow it with image2, move image1 back to original position, move image2 back to original position, repeat. There's probably an easier way to do this depending on what you're actually going to be using this for, but this is just one example. I've made a 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)
}

你最终会得到这样的动画：

Answer 2

对于 Swift 5.0+，使用以下函数。

func animateBackground()
{
    let backgroundImage = UIImage(named:"bgImage")!

    // UIImageView 1
    let backgroundImageView1 = UIImageView(image: backgroundImage)
    backgroundImageView1.frame = CGRect(x: self.view.frame.origin.x, y: self.view.frame.origin.y, width: self.view.frame.size.width, height: self.view.frame.size.height)
    backgroundImageView1.contentMode = .scaleAspectFit
    self.view.addSubview(backgroundImageView1)

    // UIImageView 2
    let backgroundImageView2 = UIImageView(image: backgroundImage)
    backgroundImageView2.frame = CGRect(x: self.view.frame.size.width, y: self.view.frame.origin.y, width: self.view.frame.size.width, height: self.view.frame.height)
    backgroundImageView2.contentMode = .scaleAspectFit
    self.view.addSubview(backgroundImageView2)

    // Animate background
    UIView.animate(withDuration: 6.0, delay: 0.0, options: [.repeat, .curveLinear], animations: {
        backgroundImageView1.frame = backgroundImageView1.frame.offsetBy(dx: -1 * backgroundImageView1.frame.size.width, dy: 0.0)
        backgroundImageView2.frame = backgroundImageView2.frame.offsetBy(dx: -1 * backgroundImageView2.frame.size.width, dy: 0.0)
        }, completion: nil)
}

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

Creating infinite background scroll right to left

uiview

uiviewanimation

swift