# ✏️ 15주차 \[8기\] B반 스터디

## 🗓2023-04-29

**참여자** : vetto, 송준

**진행자** : 송준

## \[금주의 실험🔥\]UIView Animation

👨‍🔬 실험 1: 이모티콘 만들기 - 에러를 만난 야곰

📋 Todo
ImageView, 이모티콘 버튼, 되돌리기 버튼을 포함하도록 UI 자유롭게 구현합니다.
에러를 만난 야곰 버튼을 누르면 imageView가 움직이게 됩니다.
UIView의 animate 메서드를 활용합니다.
되돌리기 버튼을 누르면 애니메이션이 멈추고 원래의 자리로 돌아옵니다.
좌우로 부들부들하는 야곰 이모티콘을 만들어봅시다.
.

let errorButton: UIButton = {
        let button = UIButton()
        button.backgroundColor = .red
        button.setTitle("에러를 만난 야곰", for: .normal)
        button.addTarget(self, action: #selector(pushError), for: .touchUpInside)
        
        return button
    }()
    
    @objc func pushError() {
        UIView.animate(withDuration: 0.1, delay: 0, options: [.repeat, .autoreverse]) {
            self.imageView.frame = self.imageView.frame.offsetBy(dx: -10, dy: 0)
        } completion: { completion in
            self.imageView.frame = self.imageView.frame.offsetBy(dx: 10, dy: 0)
        }
    }

let returnButton: UIButton = {
            let button = UIButton()
            button.backgroundColor = .gray
            button.setTitle("되돌리기", for: .normal)
            button.addTarget(self, action: #selector(pushReturn), for: .touchUpInside)
            return button
        }()

@objc func pushReturn() {
            self.imageView.layer.removeAllAnimations()
        }

- Option값에 `.repeat`, `.autoreverse` 추가하여 반복과 다시 돌아가는 기능을 구현하였다.
- 되돌리기 버튼을 `removeAllAnimations`으로 구현하였다.

👨‍🔬 실험 2: 이모티콘 만들기 - 새 맥북을 구매한 야곰

📋 Todo
새 맥북을 구매한 야곰 버튼을 누르면 야곰 이미지가 움직입니다.
이미지는 center를 중심으로 움직입니다.
동작의 크기, 시간에 대한 수치는 임의로 설정합니다.
예시에서는 원래 사이즈를 기준으로 가로로는 약 1.2, 세로로는 약 1.5 만큼 움직이고 있습니다.
되돌리기 버튼 을 누르면 애니메이션이 멈추고 이미지가 원래 위치, 원래 사이즈로 돌아오게 됩니다.

@IBAction func newMacBookYagom(_ sender: Any) {
    UIView.animateKeyframes(withDuration: 0.6, delay: 0, options: [.repeat]) {
        UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 1/2) {
            self.yagomImageView.transform = CGAffineTransform(scaleX: 0.8, y: 1.5)
        }
        UIView.addKeyframe(withRelativeStartTime: 1/2, relativeDuration: 1/2) {
            self.yagomImageView.transform = CGAffineTransform(scaleX: 1.2, y: 1.0)
        }
    }
}

@IBAction func didTapReset(_ sender: Any) {
    self.yagomImageView.layer.removeAllAnimations()
}

- `CGAffineTransform`을 사용하여 `imageView`의 비율을 늘리고 그것을 반복하는 `repeat`옵션을 주어 팅기는 야곰 이미지를 완성하였다.
- 되돌리기 버튼에는 `removeAllAnimations`라는 메서드를 활용하여 애니메이션을 없애는 작업을 하였다.