从左到右平滑地重复动画 [英] Repeat animation from left to right smoothly

问题描述

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

I'm trying to animate 3 squares from the left to the right. The squares should reappear from the left while they are disappearing from the right. The idea is that the squares represent clouds, so the idea is clear.

这是我目前得到的:

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

结果如下:

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

The squares move from the left to the right. This is good. The problem is that once the animation is done the squares just reappear from where they started. It isn't a smooth continuous movement where the clouds move from the left to the right and slowly reappear from the left again. How do you achieve this? Should there be a second containerView? Or remove the containerView and animate individual clouds?

答案 Milan Nosáľ 解决了这个问题.备注:

The answer Milan Nosáľ solved the problem. A note though:

我把 containerView2 放在 containerView1 上面，完全一样约束(它们相互重叠).只要确保 IB 没有包含 containerView2 作为 containerView1 的子视图.

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.

推荐答案

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

I guess the simplest approach for you know is to use two exactly the same containers. You can use exactly the same code, and put the containerView2 above containerView to make sure that cover one another.

然后简单地使用:

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 将代表从左边回来的云.

The containerView2 will represent the clouds coming back from the left.

这篇关于从左到右平滑地重复动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！