[iOS] - UIView Animation


こんにちは:
今日はUIView Animationについて知りましょう!
UIViewクラスはAnimation用のAPIを提供している.
この方法では、比較的簡単なコードを使用して高品質のアニメーションを実現できます.
以下のアトリビュートは、UIVEewで提供されるアニメーションをサポートします.
  • frame
  • bounds
  • center
  • transform
  • alpha
  • backgroundColor
  • 1. UIView Animation


    基本的な実施方法は以下の通りである.
    UIView.animate(withDuration: TimeInterval, animations: () -> Void)
    この方法では、アニメーションを適用できます.
        @IBOutlet weak var myView: UIView!
        @IBAction func reset(_ sender: Any) {
            myView.backgroundColor = .orange
            myView.alpha = 1.0
            myView.frame = CGRect(x: 157, y: 77, width: 100, height: 100)
        }
        
        @IBAction func startAnimation(_ sender: Any) {
            var frame = myView.frame
            frame.origin = view.center
           
            UIView.animate(withDuration: 2) {
                self.myView.backgroundColor = .red
                self.myView.alpha = 0.8
                self.myView.frame = CGRect(x: 157, y: 398, width: 200, height: 200)
            }
        }

    2. Completion


    アニメーションが実行されると、アニメーションは元の状態に戻ります.
    UIView.animate(withDuration: TimeInterval, animations: () -> Void, completion: ((Bool) -> Void)? )
    UIview.アニメーションメソッドでは、完了パラメータを受信する方法があります.この方法では、アニメーションブロックが実行され、3番目のパラメータに渡されるブロックが実行されます.
     UIView.animate(withDuration: 2) {
                self.myView.backgroundColor = .red
                self.myView.alpha = 0.8
                self.myView.frame = CGRect(x: 157, y: 398, width: 200, height: 200)
            } completion: { finished in
                UIView.animate(withDuration: 2) {
                    self.reset(nil)
                }
            }

    しかし、コードが複雑になるという欠点があります.コードが複雑になると、可読性が低下します.Keyframe Animationを使用すると、これらの部分をよりきれいにすることができます.

    3. Options


    アニメーションの重要な要素の1つは、アニメーションカーブです.
    前に使用した方法は.curveEaseInOut -> 천천히 시작했다가 점점 빨라지다가 다시 천천히 종료가 되는 커브입니다.です
    他のアニメーションカーブを使用する場合は、アニメーションオプションを指定する必要があります.
    アニメーションのOptionsは1つしかあげられません.平屋もあげられます.
    詳細については、AnimationOptionsを参照してください.
    UIView.animate(withDuration: 2, delay: 0.0, options: [.curveLinear, .repeat, .autoreverse], animations: {
                self.myView.backgroundColor = .red
                self.myView.alpha = 0.9
                self.myView.frame = CGRect(x: 157, y: 398, width: 200, height: 200)
            }, completion: nil)
    ありがとうございます