ios - 从左到右平滑地重复动画

Question

我正在尝试为从左到右的 3 个正方形制作动画。当正方形从右侧消失时，它们应该从左侧重新出现。这个想法是方 block 代表云，所以这个想法很清楚。

这是我目前得到的:

class ViewController: UIViewController {

    // contains the squares
    @IBOutlet weak var containerView: UIView!

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)

        startAnimating()
    }

    func startAnimating() {
        UIView.animateKeyframes(withDuration: 10, delay: 0, options: .repeat, animations: {
            self.containerView.center.x += self.view.bounds.width

        }, completion: nil)
    }
}

这是结果:

方 block 从左向右移动。这很好。问题是一旦动画完成，方 block 就会从它们开始的地方重新出现。这不是一个平滑的连续运动，云从左到右移动，然后又从左慢慢地重新出现。你如何做到这一点？是否应该有第二个 containerView？或者删除 containerView 并为单个云设置动画？

Milan Nosáľ 的答案解决了这个问题。不过请注意:

I placed containerView2 above containerView1 with the exact same constraints (they overlap each other). Just make sure IB doesn't include containerView2 as a subview of containerView1.

Answer 1

我想您知道的最简单的方法是使用两个完全相同的容器。您可以使用完全相同的代码，并将 containerView2 放在 containerView 之上，以确保相互覆盖。

然后简单地使用:

class ViewController: UIViewController {

    // contains the squares
    @IBOutlet weak var containerView: UIView!
    @IBOutlet weak var containerView2: UIView!

    override func viewDidLoad() {
        super.viewDidLoad()

        // this will transform the containerView2 to the left to appear as if it was exactly to the left of the containerView
        containerView2.transform = CGAffineTransform.identity.translatedBy(x: -self.view.bounds.width, y: 0)
    }

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)

        startAnimating()
    }

    func startAnimating() {
        UIView.animateKeyframes(withDuration: 10, delay: 0, options: .repeat, animations: {
            self.containerView.center.x += self.view.bounds.width
            self.containerView2.center.x += self.view.bounds.width

        }, completion: nil)
    }

}

containerView2 将代表从左侧返回的云。