[해석] Animations in Swift

- 출처 : Animations in Swift

Animations in Swift

 

애니메이션은 사용자에게 앱의 진행 상황을 알려주는 시각적 신호를 추가할 수 있습니다. iOS에서 애니메이션은 뷰의 위치를 변경하고 크기를 변경하고 뷰 계층에서 제거하고 숨기기 위해 광범위하게 사용됩니다. 애니메이션을 사용하여 사용자에게 피드백을 전달하거나 흥미로운 시각 효과를 구현할 수 있습니다.

-developer.apple-

 

iOS에서는 애플이 제공해주기 때문에 드로잉 코드를 쓸 필요가 없습니다. 우리는 애니메이션을 트리거하고 Core Animation이 개별 프레임의 렌더링을 처리하도록 하면 됩니다.

3types of animation

• UIKit
• Core Animation
• UIViewPropertyAnimator

When to use and what to use?

하루가 끝날 때쯤, 모든 UIKit 스타일의 애니메이션은 Core Animation 스타일의 애니메이션으로 변환됩니다. 즉, 모든 것이 실제로 Core Animation을 사용하여 애니메이션화됩니다. -StackOverFlow-

UIKit: 애니메이션은 UIView 객체를 사용하여 수행됩니다. View는 View transition와 같은 많은 일반적인 작업을 다루는 기본 애니메이션 집합을 지원합니다. 터치, 클릭, 탭과 같은 사용자의 이벤트를 수신할 수 있으며 메인 스레드에서 작동합니다.

Core Animation: 기본 계층의 속성을 애니메이션화할 때 Core Animation을 사용합니다. 비주얼 요소를 렌더링, 구성, 애니메이션화하여 CPU에 부담을 주지 않고 부드러운 애니메이션을 제공한다.

UIViewPropertyAnimator: UIView 속성의 복잡하고 역동적인 애니메이션을 허용합니다.

아직도 뭘 써야 할지 모르겠어? 아래 이미지가 그것을 알아내는 데 도움이 될 것입니다!

(left)UIKit vs (right)Core animation

뷰가 custom layer object(즉, 연결된 뷰가 없는 개체)를 호스트하는 경우 Core Animation을 사용하여 변경 사항을 애니메이션화해야 합니다.

UIView's animation

UIKit을 사용하면 코드를 구현하는 가장 쉬운 방법입니다! 초심자가 사용하기에는 매우 직진적인 API입니다.

• iOS의 모든 애니메이션은 Core Animation을 사용하여 실행됩니다. UIKit의 block-based 애니메이션 method는 단순한 편의 기능일 뿐입니다.
• UIKit과 Core Animation은 둘 다 애니메이션을 지원하지만 View 계층의 다른 부분에 액세스할 수 있습니다.

Animatable UIView properties

frame bounds center transform alpha backgroundColor contentStretch

class func animate(withDuration duration: TimeInterval,
	delay: TimeInterval,
	options: UIView.AnimationOptions = [],
	animations: @escaping () -> Void,
	completion: ((Bool) -> Void)? = nil)

지정된 duration, delay, options 및 completion handler를 사용하여 하나 이상의 View에 대한 변경 사항을 애니메이션화합니다.

• duration : 애니메이션의 총 duration입니다.
• delay : 애니메이션을 시작하기 전에 대기할 시간(초)입니다.
• options : 애니메이션을 수행하는 방법을 나타내는 mask off 옵션입니다. .autorevers .repeat .curveEaseOut .curveEaseIn and click to see more!

transition의 경우 옵션은 trans-ex로 시작합니다. .transitionCrossDissolve

• animations : 뷰에 커밋할 변경 사항이 포함된 블록 개체 {}입니다.
• completion : 애니메이션 시퀀스가 끝날 때 실행할 블록 개체입니다.

코드로 하자! 그럼 어떻게 하면 뷰로 간단한 애니메이션을 만들 수 있을까요? 스토리보드에 레이블과 뷰를 만들어 뷰컨트롤러에 연결했습니다. 미션은 다음과 같습니다:

1. View의 backgroundColor을 변경합니다.
2. 뷰 width의 height와 width를 변경합니다.

import UIKit

class UIAnimationViewController: UIViewController {
	
	@IBOutlet weak var animationView: UIView!

	override func viewDidLoad() {
		super.viewDidLoad()
	}

	@IBAction func animateBtnDidTouch(_ sender: Any) {
		UIView.animate(withDuration: 1, delay: 0.5, animations: {
			self.animationView.backgroundColor = .systemPink
			self.animationView.frame.size.width += 10
			self.animationView.frame.size.height += 10
		}) { _ in
			UIView.animate(withDuration: 1, delay: 0, options: .curveEaseIn) {
				self.animationView.backgroundColor = .orange
				self.animationView.frame.origin.y += 40
			}
		}
	}
}

화면 기록 2021-11-27 오전 2.24.48.mov

 

btw(by the way), 애니메이션 도중 터치 이벤트가 비활성화되므로 활성화하려면 allowUserInteraction = true

좋아, 어떻게 돌아가는지 알지? 숫자와 옵션을 변경하여 익숙해지도록 합니다. btw(by the way), 다른 제공된 usingSpringWithDamping method가 있다는 것을 알고 계십니까?

물리적 스프링의 움직임에 해당하는 타이밍 곡선을 사용하여 뷰 애니메이션을 수행합니다.

• dampingRatio : 진동 없이 애니메이션을 부드럽게 감속하려면(일반 속도로 앞뒤로 이동) 1의 값을 사용합니다.
• velocity : 초기 스프링 속도입니다. 값 1은 1초 동안 이동한 총 애니메이션 거리를 나타냅니다. (0에 가까울수록 빠름)

import UIKit

class UIAnimationViewController: UIViewController {
	@IBOutlet weak var animationView: UIView!

	override func viewDidLoad() {
		super.viewDidLoad()
	}

	@IBAction func animateBtnDidTouch(_ sender: Any) {
		UIView.animate(withDuration: 1, delay: 0.25, usingSpringWithDamping: 0.2, 
		initialSpringVelocity: 0.2, options: [.repeat, .autoreverse],
		animations: {
			self.animationView.backgroundColor = .magenta
			self.animationView.alpha = 0.5
			self.animationView.center.x = self.view.bounds.width - 100
		}, completion: nil)
	}
}

화면 기록 2021-11-27 오전 2.30.05.mov

 

저는 위에서 .repeat, .autoreverse 옵션을 사용하여 이상한 애니메이션을 만들었습니다. SpringWithDamping을 사용하면 여러 옵션을 배열로 사용할 수 있습니다.

잠깐만요. 코드 블록이 여러 개(아래 코드와 같이 중첩된 블록) 있으면 어떻게 됩니까? 코드를 개선할 방법이 있나요?

@IBAction func animateBtnDidtouch(_ sender: Any) {
	UIView.animate(withDuration: 1, animations: {
		self.simpleView.backgroundColor = .brown
	}){ _ in
		UIView.animate(withDuration: 1, delay: 0.25, options: [.autoreverse, .repeat],
		animations: {
			self.simpleView.frame.origin.y -= 20
		}){ _ in
				UIView.animate(withDuration: 1) {
					//code
				}
			}
	}
}

animateKeyframes

그래서 우리가 키프레임을 사용해서 그 더러운 코드 블록을 단 한 번에 개선시키는 거야! AnimateKeyframe은 현재 뷰에 대한 키프레임 기반 애니메이션을 설정하는 데 사용할 수 있는 애니메이션 블록 개체를 생성합니다.

class func animateKeyframes(withDuration duration: TimeInterval,
	delay: TimeInterval,
	options: UIView.KeyframeAnimationOptions = [],
	animations: @escaping () -> Void,
	completion: ((Bool) -> Void)? = nil)

• animations : 뷰에 커밋할 변경 사항이 포함된 블록 개체입니다. 일반적으로 addkeyframe(withRelativeStartTime:relativeDuration:animations:) method라고 불린다.

addKeyframe : 키프레임 애니메이션의 단일 프레임에 대한 타이밍 및 애니메이션 값을 지정합니다.

• frameStartTime : 지정된 애니메이션을 시작하는 시간입니다. 이 값은 0에서 1 사이여야 합니다.
• frameDuration : 지정된 값으로 애니메이션을 수행할 기간입니다. 이 값은 0 - 1 범위여야 하며 전체 애니메이션 길이에 상대적인 시간을 나타냅니다.
• animations : 수행할 애니메이션이 들어 있는 블록 개체입니다. 이 매개 변수는 nil일 수 없습니다.

@IBAction func animateBtnDidTouch(_ sender: Any) {
	UIView.animateKeyframes(withDuration: 4, delay: 0, animations: {
		UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 0.25, animations: {
			self.animationView.backgroundColor = .magenta
		})

		UIView.addKeyframe(withRelativeStartTime: 0.25, relativeDuration: 0.25, animations: {
			self.animationView.alpha = 0.5
		})

		UIView.addKeyframe(withRelativeStartTime: 0.50, relativeDuration: 0.25, animations: {
			self.animationView.center.x = self.view.bounds.width - 100
		})

		UIView.addKeyframe(withRelativeStartTime: 0.75, relativeDuration: 0.25, animations: {
			self.animationView.center.x = self.view.bounds.width - 200
			self.animationView.backgroundColor = .systemBlue
		})
	})
}

화면 기록 2021-11-27 오전 2.33.42.mov

 

UIView.animateKeyframe( withDuration: 4, ...)은 애니메이션의 총 지속 시간이 4초임을 의미합니다.

WithRelativeStartTime은 애니메이션의 시작 시간입니다.

relativeDuration은 애니메이션이 제공되는 시간입니다. 0.25이면 4의 4분의 1인 1(초)을 의미합니다.

애니메이션 작업:

1. background color를 .magenda로 바꾸다.
2. 알파를 0.5로 하다.
3. X의 중심을 바꾸다.
4. X의 중심을 바꾸다.

UIView 애니메이션은 여기까지입니다. 사실 애니메이션에 대한 기사를 깨고 싶지는 않지만 점점 길어져서 피곤해요. 다음 포스트에는 Core Animation과 UIVieuProperty Animator로 계속 진행하겠습니다! 읽어주셔서 감사드리며, 향후 독자들을 위해 업데이트해야 할 내용이 있다면 알려주세요!