Day 58 - 애니메이션

애니메이션은 iOS 에서 매우 중요하다.
애니메이션을 잘 다루지 않으면 UI디자인이 끔찍해진다...ㅠㅠ

애니메이션은 UIView 클래스의 animate(withDuration:) 메서드로 실행된다.

UIView.animate 구조

@IBAction func tapped(_ sender: UIButton) {
	sender.isHidden = true
    	
        UIView.animate(withDuration: 1, delay, 0, options: [], animations: {
        	switch self.currentAnimation {
            	case 0:
                	
                default:
                    break
                }
            }), { finished in
            	sender.isHidden = false
            }
}

animate() 메서드는 다음의 파마리터를 가진다.

• withDuration : 애니메이션을 얼마나 오래 사용할지
• delay : 애니메이션이 시작되기 전에 얼마나 오래 멈출 지
• options: 제공하고 싶은 옵션이 있는지
• animation: 어떤 애니메이션을 실행할지
• completion: 애니메이션이 끝나고 난 후에 실행할 클로져

CGAffineTransform

UIView 오브젝트나 subclass에 적용할 수 있는 특정한 종류의 변화를 나타내는 구조이다.

@IBAction func tapped(_ sender: UIButton) {
        sender.isHidden = true
        
        
        UIView.animate(withDuration: 1, delay: 0, options: [], animations: {
            switch self.currentAnimation {
            case 0:
                self.imageView.transform = CGAffineTransform(scaleX: 2, y: 2)
                break
            case 1:
                self.imageView.transform = .identity
            case 2:
                self.imageView.transform = CGAffineTransform(translationX: -256, y: -256)
            case 3:
                self.imageView.transform = .identity
            case 4:
                self.imageView.transform = CGAffineTransform(rotationAngle: .pi)
            case 5:
                self.imageView.transform = .identity
            case 6:
                self.imageView.alpha = 0.1
                self.imageView.backgroundColor = .green
            case 7:
                self.imageView.alpha = 1
                self.imageView.backgroundColor = .clear
            default:
                break
            }
        } completion: { finished in
            sender.isHidden = false
        }

        currentAnimation += 1
        
        if currentAnimation > 7 {
            currentAnimation = 0
        }
    }
    
 

CGAffineTransform 은 다음의 함수들을 가진다

• CGAffineTransform(scaleX:2, y: 2) : 해당 UIView의 width와 height를 두 배로 만들어라
• CGAffineTransform(translationX, -256, y: -256) : 해당 UI의 현재 X, Y위치에서 256만큼 뺀 위치로 이동시켜라
• CGAffineTransform(rotationAngle: .pi) : 해당 UIView를 시계방향으로 180도 회전시켜라
  • 90도 회전하고 싶다면 pi/2, 360도는 pi*2 등
• CGAffineTransform.identity (== .identity) : transform되기 전으로, 적용된 변화를 리셋함

추가로 fade in, fade out을 하고자할 때는 alpha값을 조절하면 된다

• self.imageView.alpha = 0.0 : 투명(보이지 않음)
• self.imageView.alpha = 1.0 : 선명하게 보임

spring Animation

애니메이션에 바운스를 넣고 싶다면

UIView.animate(withDuration: 1, delay: 0, usingSpringWithDamping: 0.5, initialSpringVelocity: 5, options: []) {

이 메서드를 사용하면 된다!
위와 같고 파라미터만 추가된 것이다.