IOS) Animation에 대해서 알아보자

완성된 결과 모습

 

올라! 안녕하세요 후르륵짭짭 입니다.

이번에 배워 볼 UIView.animate 와 CGAffineTransform에 대해서 설명해 볼까 합니다.

사실 저도 이러한 방법은 잘 몰랐는데, 유튜브 보고 알게 됐습니다.

www.youtube.com/watch?v=UfNdNrRHpUw&t=1630s

어렵지 않아요!!!

정말 간단하니깐 설명해보도록 하겠습니다.

** Animation **

UIView.animate(withDuration: 총시간 , animations: 내용)
        
        
        
UIView.animate(withDuration: 총시간 , animations: 내용,
        				completion: 완성 후 내용 )
                        
                        
UIView.animate(withDuration: 총시간, delay: 언제 시작 , usingSpringWithDamping: 압축력 , 
        				initialSpringVelocity: 퍼지는 속도 , options: 방법, 
        				animations: 내용 , 
        				completion: 완성 후 내용)

Swift 애니메이션 함수는 이렇게 되어 있습니다. 

또한 애니메이션은 main 쓰레드 위에서 작동 되기 때문에 꼭 self를 적어줘야합니다.

그러나 애니메이션은 주로 혼자 단일로 사용 되지 않고 CGAffineTransform을 사용합니다.

** CGAffineTransform **

CGAffineTransform은 Scale - 크기변화 // translation - 위치변화 // rotationAngle - 회전 

이렇게 세가지로 구성되어 있습니다.

self.뷰.transform = CGAffineTransform(scaleX: 현재가로크기 * x배 , y: 현재높이크기 * y배)

self.뷰.transform = CGAffineTransform(translationX: 현재위치 + x 이동 , y: 현재위치 + y 이동 )

self.뷰.transform = CGAffineTransform(rotationAngle: Radian 각도 만큼 회전)

이렇게 사용해주면 됩니다.

그냥 보면 딱 알겠죠???

근데 여기서 rotationAngle은 우리가 알고 있는 90도, 180도를 넣어주는게 아니라 라디안 각도를 넣어줘야합니다.

라디안 = (원하는 각도 * 파이 / 180 )으로 구할 수 있습니다.

저런 애니메이션을 구현하고 싶다면 동영상을 보면 쉽게 따라할 수 있을거에요

 

** 전체 코드 **

이건 제가 한거라 위의 영상이랑 다를 수 있습니다~~!!

class TestViewController: UIViewController {

    @IBOutlet weak var MenuView: UIVIewDesignable!
    @IBOutlet weak var MenuBtnView: UIVIewDesignable!
    @IBOutlet weak var MenuBtn: UIButton!
    
    @IBOutlet weak var ClickBtn: UIButton!
    override func viewDidLoad() {
        super.viewDidLoad()
        
        ClickBtn.alpha = 0
        // Do any additional setup after loading the view.
    }
    
    @IBAction func MenuBarBtn(_ sender: Any) {
        
        
        if MenuBtnView.transform == .identity {
            
                UIView.animate(withDuration: 1, animations: {
                    
                    self.MenuBtnView.transform = CGAffineTransform(scaleX: 11, y: 11)
                    self.MenuView.transform = CGAffineTransform(translationX: 0, y: -75)
                    
        
                }) { (Bool) in
                    
                    UIView.animate(withDuration: 0.8) {
                          self.MenuBtn.transform = CGAffineTransform(rotationAngle: self.radianFunc(180))
                        self.ClickBtn.alpha = 1
                    }
                  
                                    
                }
            
        }
        else {
            UIView.animate(withDuration: 1, animations: {
                
                self.MenuBtnView.transform = .identity
                self.MenuView.transform = .identity
                self.MenuBtn.transform = .identity
                self.ClickBtn.alpha = 0
            })
        }
    
        
    }
    
    func radianFunc(_ degree : Double) -> CGFloat{
        
        return CGFloat(degree * .pi / 180)
    }
    
    @IBAction func BtnClick(_ sender: Any) {
        
        let alert = UIAlertController(title: "안녕하세요!", message: "후르륵짭짭 입니다.", preferredStyle: .alert)
        let Okey = UIAlertAction(title: "반가워요!", style: .destructive, handler: nil)
        
        alert.addAction(Okey)
        
        present(alert, animated: true, completion: nil)
        
    }
    
    
}