[Swift] Animation

Animation 공부할 때가 왔기 때문에 ,,,

Animation

1. 우선 애니메이션은 Closure 기반으로 작성한다.

2. Animate가 실행되는 동안에는 user Information (터치 등)이 일시적으로 disabled 되었다가, 끝나면 다시 enable 됩니다,,

3. 애니메이션이 가능한 속성이 정해져있다.

• frame, bounds, center -> 좌표, 레이아웃 관련값
• transform -> 모양 관련 값
• alpha, backgroundColor -> 색상 관련 값

UIView.animate(withDuration: TimeInterval, 
				delay: TimeInterval, 
				options: UIView.AnimationOptions,
                	animations: () -> Void
                    completion: ((Bool) -> Void)?)

1. withDuration (필수)

몇초동안 애니메이션이 진행될지 결정한다.

2.0 -> 2초동안 애니메이션이 진행한다.

 

2. delay

몇 초 이후에 시작할지 딜레이를 결정한다.

3.0 -> 3초 이후에 이 애니메이션이 진행한다.

 

3. options

애니메이션의 옵션을 결정한다.

배열을 사용해 동시에 옵션 지정이 가능하다.

 

자주 쓰이는 옵션

- .allowUserInteraction :

애니메이션 도중 터치 활성화

- .repeat :

애니메이션 무한 반복

- .autoreverse :

반대로도 실행 가능 (repeat이랑 같이 사용해야 함)

- .curveEaseInOut(기본값) / .curveEaseIn / .curveEaseOut :

속도를 지정할 수 있는 옵션 

 

4. animations (필수)

실제로 애니메이션이 될 부분을 정의한다.

frame / bounds / center : 뷰의 위치와 크기

transform : 좌표 행렬값

alpha : 투명도

backgroundColor: 배경색

contentStretch : 확대 / 축소 영역

hidden과 같이 중간값 계산이 불가능한 속성은 애니메이션이 안된다.

 

5. completion 

애니메이션이 다 종료된 이후에 실행되는 부분

클로저 형태로 작성이 가능하며, 없다면 nil 값 !

 

4초동안 이미지뷰가 현재 전체뷰의 중심으로 이동하는 모습 !

UIView.animate(withDuration: 4) {
	self.imageView.center = self.view.center 
    }

 

이미지 가로 세로 2배씩 늘어난다.

UIView.animate(withDuration: 3) {
	let scale = CGAffineTransform(scaleX: 2.0, y: 2.0)
    self.imageView.transform = scale
    }

 

180도 만큼 이미지가 돌아간다.

UIView.animate(withDuration: 3) {
	let scale = CGAffineTransform(rotataionAngle: .pi)
    self.imageView.transform = scale
    }

 

위치를 현재 x,y 좌표값에서 100, 100만큼 더 한 위치로 이동한다.

UIView.animate(withDuration: 3) {
	let scale = CGAffineTransform(translationX: 100, y:100)
    self.imageView.transform = scale
    }

 

CGAffineTransform 에서는 concatenation을 활용해서 동시에 애니메이션을 묶을 수 있다.

다음과 같이 combine 을 transform 으로 넣어주면 정의한 3개가 동시에 진행!

  UIView.animate(withDuration: 3) {
            let scale = CGAffineTransform(scaleX: 2.0, y: 2.0 )
            let rotate = CGAffineTransform(rotationAngle: .pi)
            let move = CGAffineTransform(translationX: 100, y: 100)

            let combine = scale.concatenating(rotate).concatenating(move)
            self.imageView.transform = combine
            }

 

애니메이션이 끝나고 다시 원상태로 돌리고 싶다면 completion 블록에다가 .idenfify를 넣어주면 원래 위치로 다시 돌아온다.

  UIView.animate(withDuration: 3) {
            let scale = CGAffineTransform(scaleX: 2.0, y: 2.0 )
            let rotate = CGAffineTransform(rotationAngle: .pi)
            let move = CGAffineTransform(translationX: 100, y: 100)

            let combine = scale.concatenating(rotate).concatenating(move)
            self.imageView.transform = combine
        } completion: { finished in
            UIView.animate(withDuration: 2.0) {
                self.imageView.transform = .identity
            }
        }

 

우리가 스토리보드에서 잡아준 레이아웃 값에 대해서도 애니메이션을 걸어줄 수 있다.

NSLayoutConstraint형을 @IBOutlet 으로 ! 해당 값의 constant를 조정할 수 있다.

하지만 기존에 했던 방식을 적용한다면 애니메이션이 작동하지 않는다.

그래서 layoutIfNeeded 라는 메서드를 사용한다.

해당 메서드를 호풀하게 되면 즉시, 수정된 레이아웃대로 뷰를 다시 그려줘! 라는 신호가 전달된다.

이 해당 메서드를 animate 클로저 내부에 넣어주면 된다.

@IBAction func startButtonClicked(_ sender: Anu) {
	self.imageViewTopConstraint.constant = 400
    
    UIView.animate(withDuration: 3) {
    self.view.layoutIfNeeded()
    self.imageView.alpha = 0.5
    }   
}

 

여러개의 애니메이션을 중첩해서 사용히는 경우에는 일반 animate 메서드보다 

animateKeyFrames라는 메서드가 더 적합하다! 

// withDuration -> 총 애니메이션 길이를 넣어준다.

UIView.animateKeyframe(withDuration: 4, delay: 0) {

	UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 1/4)
    {
		print("애니메이션A")
	}
    
	UIView.addKeyframe(withRelativeStartTime: 1/4, relativeDuration: 2/4)
    {
		print("애니메이션B")
	}
    
	UIView.addKeyframe(withRelativeStartTime: 2/4, relativeDuration: 1/4)
    {
		print("애니메이션C")
	}
    
	UIView.addKeyframe(withRelativeStartTime: 3/4, relativeDuration: 1/4)
    {
		print("애니메이션D")
	}

}