スウィフト3の上から下への流星のアニメ化

Question

赤い円の画像を画面の上から下に移動したいのですが、画面全体を流れる流星のようです。それは動きますが、アニメーションなしのミリ秒で動きます。尾を持つ流星のように滑らかに動かすにはどうすればいいですか？

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ループを行うの単純流星のフレームの最後の場所を設定し、あなたはそれを取るしたい時間の量に期間を設定します。

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でキーフレームアニメーションを調べることができます。