# UIView Animation

## Asset의 사진에 애니메이션 효과주기
### `animate(withDuration:delay:options:animations:completion:)`
- 지정된 기간, 지연, 옵션 및 컴플리션 핸들러를 사용하여 하나 이상의 뷰에 대한 변경 사항을 애니메이션으로 표시합니다.

### `animateKeyframes(withDuration:delay:options:animations:completion:)`
- 현재 뷰에 대한 키프레임 기반 애니메이션을 설정하는 데 사용할 수 있는 애니메이션 블록 객체를 만듭니다.
- `addKeyframe(withRelativeStartTime:relativeDuration:animations:)` 메서드를 사용하여 키프레임 애니메이션의 단일 프레임에 대한 타이밍 및 애니메이션 값을 지정합니다.

## 애니메이션 동작
### 좌우 진동 (에러를 만난 세레나)
<img src= "https://cdn.discordapp.com/attachments/1147011195086307399/1147353728958083152/1.gif" width=300>

@IBAction func touchUpVibrateButton(_ sender: UIButton) {
    UIView.animateKeyframes(withDuration: 0.1, delay: 0, options: [.autoreverse, .repeat]) {
        UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 0.5) {
            self.myImage.frame.origin.x -= 5
        }
        UIView.addKeyframe(withRelativeStartTime: 0.5, relativeDuration: 0.5) {
            self.myImage.frame.origin.x += 10
        }
    }

### 위 아래 크기 변경 (새 맥북을 산 세레나)

<img src= "https://cdn.discordapp.com/attachments/1147011195086307399/1147354629957500998/4.gif" width=300>

@IBAction func touchUpScaleButton(_ sender: UIButton) {
    UIView.animateKeyframes(withDuration: 0.5, delay: 0, options: [.repeat, .calculationModeCubic], animations: {
        UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 1.0/2.0) {
            self.imageView.transform = CGAffineTransform(scaleX: 1, y: 1.5)
        }
        UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 1.0/2.0) {
            self.imageView.transform = CGAffineTransform(scaleX: 1.5, y: 1)
        }
        UIView.addKeyframe(withRelativeStartTime: 1.0/2.0, relativeDuration: 1) {
            self.imageView.transform = CGAffineTransform(scaleX: 1.5, y: 1)
        }
        UIView.addKeyframe(withRelativeStartTime: 1.0/2.0, relativeDuration: 1) {
            self.imageView.transform = CGAffineTransform(scaleX: 1, y: 1.5)
        }
    })
}

### 회전 (Custom)
<img src= "https://cdn.discordapp.com/attachments/1147011195086307399/1147353766278987776/3.gif" width=300>

@IBAction func touchUpRotationButton(_ sender: UIButton) {
    UIView.animateKeyframes(withDuration: 0.5, delay: 0, options: [.repeat]) {
        UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 0.25) {
            self.imageView.transform = CGAffineTransform(rotationAngle: CGFloat(Float.pi / 2))
        }
        UIView.addKeyframe(withRelativeStartTime: 0.25, relativeDuration: 0.25) {
            self.imageView.transform = CGAffineTransform(rotationAngle: CGFloat(Float.pi))
        }
        UIView.addKeyframe(withRelativeStartTime: 0.5, relativeDuration: 0.25) {
            self.imageView.transform = CGAffineTransform(rotationAngle: CGFloat(Float.pi * 3 / 2))
        }
        UIView.addKeyframe(withRelativeStartTime: 0.75, relativeDuration: 0.25) {
            self.imageView.transform = CGAffineTransform(rotationAngle: CGFloat(0))
        }
    }
}

### 투명도 값 조정
<img src= "https://cdn.discordapp.com/attachments/1147011195086307399/1147355605259010078/6.gif" width=300>

- 투명도 값을 조정하는 것은 UIView의 Animatable한 6가지의 요소중 하나입니다.

@IBAction func touchUpAlphaButton(_ sender: UIButton) {
    UIView.animateKeyframes(withDuration: 0.5, delay: 0, options: [.repeat]) {
        UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 0.25) {
            self.imageView.alpha = 0
        }
        UIView.addKeyframe(withRelativeStartTime: 0.25, relativeDuration: 0.25) {
            self.imageView.alpha = 0.5
        }
        UIView.addKeyframe(withRelativeStartTime: 0.5, relativeDuration: 0.25) {
            self.imageView.alpha = 0.75
        }
        UIView.addKeyframe(withRelativeStartTime: 0.75, relativeDuration: 0.25) {
            self.imageView.alpha = 1
        }
    }
}

### 애니메이션 효과 Reset
<img src= "https://cdn.discordapp.com/attachments/1147011195086307399/1147355108825382972/5.gif" width=300>

@IBAction func touchUpResetButton(_ sender: UIButton) {
    imageView.layer.removeAllAnimations()
}

### 📚 참고 링크

- [🍎Apple Docs: animate(withDuration:delay:options:animations:completion:)](https://developer.apple.com/documentation/uikit/uiview/1622451-animate)
- [🍎Apple Docs: animateKeyframes(withDuration:delay:options:animations:completion:)](https://developer.apple.com/documentation/uikit/uiview/1622552-animatekeyframes)
- [🍎Apple Docs: addKeyframe(withRelativeStartTime:relativeDuration:animations:)](https://developer.apple.com/documentation/uikit/uiview/1622554-addkeyframe)
- [📘blog: Animate Method](https://serena.co.kr/entry/Animate-Method?category=1156142)
- [📘blog: 애니메이션 효과](https://hooni99918.tistory.com/78)

# 고생하셨습니다