---
# System prepended metadata

title: Untitled

---

아래 내용에 대해 조사하고 활동학습 게시판에 게시합니다
#### 1. UIView.AnimationOptions 와 UIView.KeyframeAnimationOptions 의 차이점을 알아보고, UIView.AnimationOptions은 어떤 타입으로 정의되어 있는지, 준수하는 프로토콜은 어떤 프로토콜인지 알아봅시다

- UIView.AnimationOptions : 뷰의 애니메이션에 대한 옵션이다.
- UIView.KeyframeAnimationOptions : 키프레임 기반의 에니메이션을 구성하기 위한 옵션이다.
    - 여러 애니메이션 효과를 연결하고 싶을때, 기본적인 `animate`메서드를 이용하면 원하는 애니메이션 갯수만큼 completion을 중첩해야하한다.
    - 이를 대신하여 큰 틀의 애니메이션을 기준으로 하는 애니메이션을 추가하여 코드의 depth를 줄인 상태로 구현할 수 있다.
    - 키프레임은 특정한 프레임에서 시작점과 끝점을 지정하여 여러가지 효과를 적용하기 위한 포인트라고 생각하시면 됩니다.

- UIView.AnimationOptions은 `AnimationOptions`타입이고, `OptionSet`프로토콜을 준수한다. 
    - `OptionSet`프로토콜: 수학적인 집합 인터페이스를 나타내는 타입이다.
    - [OpsionSet 공식문서](https://developer.apple.com/documentation/swift/optionset/)


#### 2. UIView의 transform 프로퍼티에 대해 알아보고, 해당 프로퍼티로 어떤 애니메이션 효과를 줄 수 있는지 알아봅시다

- View의 몇가지 프로퍼티를 변경하면 애니메이션으로 만들 수 있습니다. 즉, 프로퍼티를 변경하면 현재 값에서 시작하여 지정한 새 값에서 끝나는 애니메이션이 생성됩니다. 아래의 UIView의 프로퍼티들을 변경해주면 애니메이션 가능합니다.
- UIView의 transform를 이용하여, 상위 뷰의 좌표계 내에서 뷰 frame의 비율을 조정하거나 회전시킬 수 있다. (위치를 옮기고 싶을땐 center프로퍼티를 수정)
    - `CGAffineTransform`을 사용하여 frame을 직접 계산하지 않고 간단히 사용 가능하다.
    - `CGAffineTransform`의 `identity`프로퍼티를 지정하여 원래의 상태로 돌아오는 효과를 낼 수도 있다. (적용된 모든 변환을 제거)

- [참조블로그: https://hyerios.tistory.com/14]

#### 3. 애니메이션에서 자주 사용하는 Timing Function의 종류에는 무엇이 있는지 알아봅시다
- Timing Function의 정의 및 종류
    - AnimationTimingFunction : 애니메이션 전환의 속도입니다.
    - move(:relativeTo:duration:timingFunction:)과 같은 엔티티의 애니메이션 이동 메서드 중 하나를 호출할 때 애니메이션 타이밍 함수를 사용하여 애니메이션 전환 속도를 제어합니다. 호출에서 타이밍 함수를 생략하면 메소드는 기본 타이밍 함수를 사용합니다.
    - 종류: 
default: 전환에 대한 기본 곡선을 생성하는 타이밍 함수입니다.
easeIn(편하게하다.): 점진적인 시작 전환을 생성하는 타이밍 함수입니다.
easeInOut: 점진적인 시작 및 종료 전환을 생성하는 타이밍 함수입니다.
easeOut(완화하다.): 점진적인 종료 전환을 생성하는 타이밍 함수입니다.
linear(선형의): 선형 변환을 생성하는 타이밍 함수입니다.
cubicbezier(ctrPit1: Flaot, ctrPit2: Float) -> AnimationTimingFunction : 두 개의 제어점에 의해 지정된 입방형 베지어 모양으로 목표값을 향해 가속한 다음 감속하는 타이밍 함수를 생성합니다.
* 베지어곡선: 컴퓨터 그래픽에서 베지어 곡선이란 우리가 곡선을 매끄럽게 잘 그릴 수 있게끔 해주는 곡선 알고리즘입니다.


아래 예시 애니메이션 두 가지를 구현해봅니다
Hint : Keyframe animation, transform






```swift
class AnimationViewController: UIViewController {
    
    @IBOutlet weak var rightView: UIView!
    @IBOutlet weak var leftView: UIView!
    @IBOutlet weak var spiderImage: UIImageView!
    @IBOutlet weak var spiderWebView: UIView!
    @IBOutlet weak var secondSpiderImage: UIImageView!
    
    override func viewDidLoad() {
        super.viewDidLoad()

        spiderImage.alpha = 0
        view.sendSubviewToBack(spiderImage)
        spiderWebView.alpha = 0
    }
    
    @IBAction func comeOnButtonPressed(_ sender: UIButton) {
        rotateSpider()
        moveLeftRightView()
    }
    
    func moveLeftRightView() {
        UIView.animateKeyframes(withDuration: 1, delay: 0, options: .beginFromCurrentState, animations: {
            UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 1, animations: {
              self.leftView.transform = CGAffineTransform(
                translationX: self.view.frame.origin.x - self.leftView.frame.origin.x,
                y: 0
              )
              self.rightView.transform = CGAffineTransform(
                translationX: self.rightView.frame.width,
                y: 0
              )
//                self.leftView.frame.origin.x = self.view.frame.origin.x
//                self.rightView.frame.origin.x = self.view.frame.width - self.rightView.frame.width
            })
        
            
            UIView.addKeyframe(withRelativeStartTime: 0.7, relativeDuration: 1) {
                self.spiderImage.alpha = 1
                self.spiderWebView.alpha = 1
                self.spiderImage.transform = CGAffineTransform(translationX: 0, y: 100)
                self.spiderWebView.transform = CGAffineTransform(scaleX: 1, y: 3)
//                self.spiderImage.frame.origin.y += 100
//                self.spiderWebView.frame.origin.y += 100
            }
        }) { finished in
          UIView.animate(withDuration: 1.0) {
            self.spiderImage.alpha = 0
            self.spiderWebView.alpha = 0
            self.leftView.transform = .identity
            self.rightView.transform = .identity
            self.spiderImage.transform = .identity
            self.spiderWebView.transform = .identity
          }
        }
    }
    
    func rotateSpider() {
        UIView.animate(withDuration: 1, animations: {
            self.secondSpiderImage.transform = CGAffineTransform(rotationAngle: .pi / 3)
        }) { isFinished in
            UIView.animate(withDuration: 1.0) {
                self.secondSpiderImage.transform = .identity
            }
        }
    }
}

```