애니메이션(UIView Animation, CGAffineTransform) 만들기

안녕하세요. KataRN입니다.

 

오늘은 애니메이션(UIView.animate)에 대해 알아보겠습니다.

 

아래글을 참고하였습니다.

https://hyerios.tistory.com/14

iOS CGAffineTransform 사용하기

 

 

애플에서 말하는 공식문서는 이렇다네요...

 

저에겐 좀 어렵네요...ㅠㅠ

 

좀 단순하게 정리해볼게요.

 

우선 애니메이션을 만들수 있는 함수 animate가 있네요. 그리고 파라미터가 duration(시간설정), animations(애니메이션)이 있죠?

여기서 시간은 왠지 애니메이션으로 움직이는 시간일것 같고 애니메이션은 종류일것같네요.

애니메이션의 종류는 다음과 같습니다.(3가지)

Position & Size

• 위치와 크기를 변형
• bounds, frame, center

Transformation

• 움직임을 변형
• rotation(회전), scale(조절), translation(이동)

Appearance

• 투명도나 배경을 변형
• backgroundColor, alpha (투명도)

위의 내용을 참고하여 간단하게 애니메이션 하나를 만들어보겠습니다.

기본 코드입니다.

let moveFrame = CGRect(x: 100.0, y: 100.0, width: 100, height: 100)

UIView.animate(withDuration: 0.3) {
    self.sampleView.frame = moveFrame
}

 

이걸 참고해서 만들어봤습니다.

import UIKit

class ViewController: UIViewController {
    
    let rect = CGRect(x: 50, y: 50, width: 50, height: 50)
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let myView = UIView(frame: rect)
        myView.backgroundColor = .black
        view.addSubview(myView)
        
        UIView.animate(withDuration: 2, animations: {
            myView.backgroundColor = .gray
            let scale = CGAffineTransform(scaleX: 2, y: 2)
            let rotate = CGAffineTransform(rotationAngle: .pi)
            let move = CGAffineTransform(translationX: 200, y: 200)
            let combine = scale.concatenating(rotate).concatenating(move)
            myView.transform = combine
        }) {
            (_) in
            UIView.animate(withDuration: 2) {
                myView.transform = CGAffineTransform.identity
            }
        }
    }
}

 

 

제가 아직 잘 다루진 못해서... 의도와는 다르게 만들어졌는데 조만간 수정하겠습니다...

 

 

코드에 대해 설명 드릴게요.

4가지 애니메이션이 들어갔는데요

1. 회색으로 바뀌는것
2. scale : 2배 커진다.
3. rotate : 회전
4. move : 이동

그리고 동시에 일어나도록 3가지를 묶었습니다.(concantenation)

scale.concatenating(rotate).concatenating(move)

 

이걸 하나하나 하면 2초안에 나눠서 작동되더라구요

그리고 작동이 끝나면 completion으로 CGAffineTransform.identity을 호출하도록 합니다.(원래대로 돌아갑니다.)

 

ps. 추가사항입니다.(addKeyframe, animateKeyframes)

https://zeddios.tistory.com/636

iOS ) animateKeyframes, addKeyframe사용해보기

한번의 프레임으로 디테일한 애니메이션을 설정할때 animateKeyframes에 addKeyframe를 추가해서 사용합니다.

시간별로 구체적으로 설정이 가능합니다. 위에 참고블로그 남길게요. 쉽게 설명하셔서 굉장히 도움됩니다.ㅎㅎ

 

 

애니메이션은 나중에 내용을 추가하거나 심화된 내용을 다른글에서 소개해드릴게요.

오늘도 긴글 읽어주셔서 감사합니다.