고무망치의 Dev N Life 고무망치의 Dev N Life

SwiftUI의 애니메이션은 UIKit보다 훨씬 간단하다. Animating state changes 직역해보면 물음표 짓게 만들지만 코드를 보면 이해가 된다. Adding animation Image(systemName: "chevron.up.square") .rotationEffect(.degrees(showDetails ? 0 : 180)) .animation(.default) 1, 2번 라인은 showDetails값에 따라 rotation을 업데이트한다. 즉 3번 라인이 없어도 무방하다. .animation(.default) 한 줄로 이미지가 회전하는 애니메이션이 생겼다. 0과 180을 오가는 애니메이션은 정방향 기준으로 시계방향으로 회전할 것이다. 하지만 180대신 -180을 넣으면 반시계방향으..

18장 UINavigationController Custom Transition Animations Intro UINavigationController에서는 화면을 stack으로 관리한다. push, pop을 하면서 일어나는 화면 전환을 커스텀하게 꾸밀 수 있다. Custom navigation transitions UINavigationControllerDelegate에서 animator를 리턴해주는 작업이 필요하다. UINavigationController에서 push/pop이 일어날 때, UINavigationController은 delegate에 물어본다. 1. “delegate가 있나요?” 2. “있다면, animator를 리턴하고 있나요?” delegate가 nil이거나, animator가 n..

Section4. View Controller Transition Animators 지금까지 학습한 애니메이션을 기반으로 트랜지션 애니메이션을 구현할 수 있다. Ch17. Presentation Controller & Orientation Animations Intro 카메라앱, 주소록 앱 등에서 화면을 present할 때, 현재 화면 아래에서 새로운 화면이 올라오는 애니메이션 이를 커스텀하게 수정해보자. Behind the scenes of custom transitions UIKit에서는 delegate패턴을 사용하여 커스텀 트랜지션을 제공한다. UIViewControllerTransitioningDelegate가 바로 그 델리게이트! present가 발생할 때마다, UIKit은 animationCo..

15장 Stroke and Path Animations IntroLayer를 이용하여 리프레쉬뷰(Spinner)를 만들어보자. Creating interactive stroke animations CAShapeLayer의 프로퍼티들 (아래에서 lineDashPattern제외 모두 animatable) - strokeColor: path를 그리는 아웃라인의 컬러. default: nil - fillColor: path가 그린 영역의 내부 컬러. default: opaque black[‘ - lineWidth: stroking한 outline의 두께. default: 1 - lineDashPattern: stroke할 때 점선의 간격, 점선의 길이를 나타냄 Array타입이고 default: nil - str..

Intro 예전 iOS의 락스크린에 있는 밀어서 잠금해제를 떠올려보자. 텍스트 위로 그라데이션 컬러가 애니메이션 된다. Drawing your first gradient CAGradientLayer를 사용 startPoint, endPoint: 그라데이션의 방향을 지정한다. colors: 그라데이션에 필요한 색상. 여러 색을 지정할 수 있다. locations: 그라데이션이 될 위치를 지정함 Animating gradients CAGradientLayer는 CALayer의 서브클래스. 애니메이션 가능한 프로퍼티는 아래와 같다. - colors - locations - startPoint, endPoint let gradientAnimation = CABasicAnimation(keyPath: "locat..

9장 Animation Keys and Delegates Intro UIView animation을 사용할 때, 애니메이션을 중지할 수 없었다. 하지만 Core Animation에선 모든게 가능!layer의 애니메이션은 멈출 수 있다. 더불어 delegate를 설정하여 애니메이션의 시작과 끝(or interrupted)에 대한 핸들링도 가능하다. Introducing animation delegates CAAnimationDelegate에는 두 메소드가 있다. func animationDidStart(_ anim: CAAnimation)func animationDidStop(_ anim: CAAnimation, finished flag: Bool) Key-value coding compliance CAA..

7장 Animating ConstraintsIntro이전에는 alpha, frame등의 변경으로 애니메이션을 구현했지만, AutoLayout은 좀 다르다.Constraint의 변경을 한 뒤, AutoLayout의 State변경을 통해 애니메이션을 구현한다. Making the menu expandNSLayoutConstraint도 UIView처럼 @IBOutlet으로 연결가능하다.연결한 Constraint의 constant를 변경해보자.뷰의 크기와 위치가 변하는걸 확인한다. 이제 애니메이션을 해보자. Animating layout changesConstraint의 constant를 변경하고 끝내면 애니메이션 없이 뷰가 변한다.하지만 여기에 UIView.animate(.... view.layoutIfNee..

CAShapeLayer클래스는 Bezier곡선을 그리기 위한 CALayer의 서브클래스다. Bezier는 곡선을 그리는 알고리즘이다. 그게 끝이다. ㄷㅓ 몰라도 된다. 베지어 곡선: 정말 말 그대로 곡선을 그리는 알고리즘 이 베지어 곡선을 CAShapeLayer로 생성할 때, Animation을 추가하지 않으면 다 그려진 모습으로 화면에 뿌려지겠지만, CAAnimation을 추가하면 화면에 그려지는 효과를 나타내어 애니메이션을 제공할 수 있다. CAAnimation을 추가하지 않은 CAShapeLayer CAAnimation을 추가한 CAShapeLayer 그럼 위 예제를 구현하기 위해 CAAnimation을 추가하는 과정을 코드로 살펴보자. CALayer의 transform에서는 UIView와 달리 3..