TIL
🌱 난 오늘 무엇을 공부했을까?
📌 UIView Animation
📍 frame과 bounds의 차이
- CGRect : 사각형의 좌표와 크기
- frame
- 부모뷰를 기준으로 좌표를 찾는다.
- bounds
- clipsToBounds : true로 설정하면 subview가 view의 경계를 넘어갈 시 잘리며, false로 설정하면 경계를 넘어가도 잘리지 않게 되는 것!
- 자기 자신을 기준으로 좌표를 찾는다.
📍 animate(withDuration:delay:options:animations:completion:) - 공식문서
🔗 Declaration
class func animate(
withDuration duration: TimeInterval,
delay: TimeInterval,
options: UIView.AnimationOptions = [],
animations: @escaping () -> Void,
completion: ((Bool) -> Void)? = nil
)🔗 Parameters
-
duration
- 초 단위로 측정된 애니메이션의 총 지속 시간입니다. 음수 값이나 0을 지정하면 애니메이션 없이 변경됩니다.
-
delay
- 애니메이션을 시작하기 전에 대기할 시간(초 단위로 측정)입니다. 애니메이션을 즉시 시작하려면 값을 0으로 지정하십시오.
-
options
- 애니메이션을 수행할 방법을 나타내는 옵션 마스크입니다. 유효한 상수 목록은 UIView.AnimationOptions를 참조하세요.
-
animations
- 뷰에 커밋할 변경 사항이 포함된 블록 개체입니다. 여기에서 보기 계층 구조에서 보기의 애니메이션 가능한 속성을 프로그래밍 방식으로 변경합니다. 이 블록은 매개변수를 사용하지 않으며 반환 값도 없습니다. 이 매개변수는 NULL이 아니어야 합니다.
-
completion
- 애니메이션 시퀀스가 종료될 때 실행할 블록 개체입니다. 이 블록에는 반환 값이 없으며 완료 핸들러가 호출되기 전에 애니메이션이 실제로 완료되었는지 여부를 나타내는 단일 부울 인수를 사용합니다. 애니메이션의 지속 시간이 0이면 이 블록은 다음 런 루프 사이클의 시작 부분에서 수행됩니다. 이 매개변수는 NULL일 수 있습니다.
📍 animateKeyframes(withDuration:delay:options:animations:completion:) - 공식문서
🧏♂️ Declaration
class func animateKeyframes(
withDuration duration: TimeInterval,
delay: TimeInterval,
options: UIView.KeyframeAnimationOptions = [],
animations: @escaping () -> Void,
completion: ((Bool) -> Void)? = nil
)📍 addKeyframe(withRelativeStartTime:relativeDuration:animations:) - 공식문서
🔗 Declaration
class func addKeyframe(
withRelativeStartTime frameStartTime: Double,
relativeDuration frameDuration: Double,
animations: @escaping () -> Void
)🔗 Parameters
-
frameStartTime
- 지정된 애니메이션을 시작할 시간입니다. 이 값은 0에서 1 사이여야 합니다. 여기서 0은 전체 애니메이션의 시작을 나타내고 1은 전체 애니메이션의 끝을 나타냅니다. 예를 들어 지속 시간이 2초인 애니메이션의 경우 시작 시간을 0.5로 지정하면 전체 애니메이션이 시작된 후 1초 후에 애니메이션이 실행되기 시작합니다.
-
frameDuration
- 지정된 값에 애니메이션 효과를 주는 시간입니다. 이 값은 0에서 1 사이여야 하며 전체 애니메이션 길이에 상대적인 시간을 나타냅니다. 값을 0으로 지정하면 애니메이션 블록에 설정한 모든 속성이 지정된 시작 시간에 즉시 업데이트됩니다. 0이 아닌 값을 지정하면 속성이 해당 시간 동안 애니메이션됩니다. 예를 들어 지속 시간이 2초인 애니메이션의 경우 지속 시간을 0.5로 지정하면 애니메이션 지속 시간이 1초가 됩니다.
-
animations
- 수행하려는 애니메이션이 포함된 블록 개체입니다. 여기에서 보기 계층 구조에서 보기의 애니메이션 가능한 속성을 프로그래밍 방식으로 변경합니다. 이 블록은 매개변수를 사용하지 않으며 반환 값도 없습니다. 이 매개변수는 nil이 아니어야 합니다.
📍 실습해보기
🔗 Code
class ViewController: UIViewController {
@IBOutlet weak var leftView: UIView!
@IBOutlet weak var rightView: UIView!
@IBOutlet weak var spiderView: UIImageView!
@IBOutlet weak var spiderLineView: UIView!
@IBOutlet weak var spiderRotationView: UIImageView!
@IBOutlet weak var leftLayout: NSLayoutConstraint!
@IBOutlet weak var rightLayout: NSLayoutConstraint!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
}
@IBAction func buttonDidTab(_ sender: Any) {
UIView.animateKeyframes(withDuration: 4, delay: 0) {
UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 2/4) {
self.leftView.transform = CGAffineTransform(translationX: -50, y: 0)
self.rightView.transform = CGAffineTransform(translationX: 50, y: 0)
self.spiderView.transform = CGAffineTransform(translationX: 0, y: 100)
self.spiderView.alpha = 1
self.spiderLineView.transform = CGAffineTransform(translationX: 0, y: 100)
}
UIView.addKeyframe(withRelativeStartTime: 2/4, relativeDuration: 1) {
self.leftView.transform = .identity
self.rightView.transform = .identity
self.spiderView.transform = .identity
self.spiderView.alpha = 0
self.spiderLineView.transform = .identity
}
UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 2/4) {
self.spiderRotationView.transform = CGAffineTransform(rotationAngle: 180)
}
UIView.addKeyframe(withRelativeStartTime: 2/4, relativeDuration: 1) {
self.spiderRotationView.transform = .identity
}
}
}
}🔗 구현화면
I Am Groot