swift - 动画 meteor 在 Swift 3 中从上到下移动

Question

我想要一个红色圆圈的图像从屏幕顶部移动到底部，就像 meteor 划过屏幕一样。它确实会移动，但它会在一毫秒内移动而没有动画。如何让它像带尾部的 meteor 一样顺畅移动？

class ViewController: UIViewController {

    let meteorImage = UIImageView()

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.

        self.meteorImage.backgroundColor = .clear
        self.meteorImage.frame = CGRect(x: 50, y: 0, width: 50, height: 50)
        self.meteorImage.isHidden = false
        self.meteorImage.image = #imageLiteral(resourceName: "success")
        view.addSubview(self.meteorImage)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    @IBAction func buttonPressed(_ sender: UIButton) {
        let totalHeight = Int(view.frame.height)
        var currentHeight = 0

        while currentHeight < totalHeight {
            self.meteorImage.backgroundColor = .clear
            self.meteorImage.frame = CGRect(x: 50, y: currentHeight, width: 50, height: 50)
            self.meteorImage.isHidden = false
            self.meteorImage.image = #imageLiteral(resourceName: "success")
            view.addSubview(self.meteorImage)
            currentHeight += 1
        }
    }
}

Answer 1

动画必须通过动画调用来完成。

这是制作动画的简单方法。

UIView.animate(withDuration: 0.1, animations: { 
   // Apply Changes to frame.
})

另请考虑:不要执行 while 循环，只需设置 meteor 帧的最终位置并将持续时间设置为您希望它花费的时间量。

let newFrame= CGRect(x: 50, 
                     y: currentHeight, 
                     width: 50, 
                     height: 50)

UIView.animate(withDuration: 3.0, animations: { 
   // Apply Changes to frame.
   self.meteorImage.frame = newFrame
})

如果你想让你的动画更复杂，你可以查看 UIView 上的关键帧动画。