[iOS] - UIView Animation

Din의 개발노트·2021년 6월 21일
0

안녕하세요:)
오늘은 UIView Animation에 대해서 알아보도록 하겠습니다..!

UIView 클래스는 Animation에서 사용되는 API를 타입메소드로 제공합니다.
이 메소드를 활용해서 비교적 단순한 코드로 고품질의 Animation을 구현할 수 있습니다.

UIView가 제공하는 속성중에서 애니메이션을 지원하는 속성은 다음과 같습니다.

  • 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.animation 메소드를 보면 completion 파라미터를 받는 메소드가 있습니다. 이 메소드는 애니메이션 블록을 실행한다음 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

애니메이션에서 중요한 요소중 하나는 애니메이션 curve 입니다.
앞에서 사용한 메소드는 .curveEaseInOut -> 천천히 시작했다가 점점 빨라지다가 다시 천천히 종료가 되는 커브입니다.
다른 애니메이션 커브를 사용하고 싶다면 애니메이션 Options을 지정해야 합니다.

애니메이션의 Options는 하나만 줄 수도 있고, 배열로도 줄 수도 있습니다.

자세한 옵션 항목들은 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)

감사합니다:)

profile
iOS Develpoer

0개의 댓글