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

19장 Interactive UINavigationController Transitions Intro사용자의 행동에 반응하는 트랜지션을 구현해보자. Pan제스쳐를 활용할 예정이다. Creating an interactive transition트랜지션이 발생할 때, UINavigationController는 delegate에 애니메이션 컨트롤러가 있는지 물어본다. 이건 이미 알고 있던 것 하지만 추가로 interactive controller도 있는지 물어본다! AnimationController와 Interactive Controller는 하나의 클래스로 구현하는 것이 편하다. UIViewControllerAnimatedTransitioning, UIViewControllerInteractiveTrans..

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..

16장 Replicating Animations Intro CAReplicatorLayer에 대해서 알아본다. (superclass: CALayer) 레이어를 복제할 수 있다. 근데 왜 복제해야해? 라는 질문 단순히 보이는 것만 복제하는 것이 아니다. 복제하는 과정에서 레이어간 약간의 차이점을 발생시켜, 엄청난 효과를 가져올 수 있다. 그리고 무엇보다, 복제한 레이어의 애니메이션마다 차등 delay를 줄 수 있다. Ex) 0.2의 delay를 준다고 가정하면 layer1은 0.2초 뒤, layer2는 0.4초 뒤, layer3은 0.6초 뒤. 애니메이션 시작 이번 챕터는 1. Iris(Siri 짭퉁)가 말하는 음성 신호를 시각적 애니메이션으로 표현 2. 사용자가 입력하는 음성의 크기에 따른 시각적 애니메..

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..

13장 Shaped and Masks Intro CAShapeLayer - 다양한 곡선(CGPath)을 그릴 수 있다. 베지어 곡선(UIBezierPath)을 이용하여 cgPath프로퍼티에 넣어주면 곡선을 그릴 수 있다. 그릴 곡선을 정했다면 아래 프로퍼티를 수정하여 데코를 할 수 있음 - path - fillColor - lineDashPhase - lineWidth Finishing up the avatar view Creating the bounce-off animation 두 아바타뷰가 만났다 멀어졌다 하는 애니메이션 구현 (특별할 것 없음) Morphing shapes 두 아바타뷰가 만났을 때 찌그러지는 효과를 내서 더 생동감있게 표현 cgPath를 구하기 위해 UIBezierPath를 사용하면..

12장 Layer Keyframe Animations and Struct Properties IntroUIView의 키프레임 애니메이션에서는 여러 뷰의 여러 프로퍼티를 동시에 애니메이션 처리할 수 있었다. 하지만 Layer에서는 하나의 레이어, 하나의 프로퍼티에 대해서만 키프레임 애니메이션이 가능하다. Introducing keyframe animations CAKeyframeAnimation에서는 fromValue와 toValue를 사용하지 않는다. 대신, values라는 value의 리스트를 사용한다. 그리고 values의 시간에 관한 프로퍼티도 필요하다. (0과 1사이의 상대시간값) Creating a layer keyframe animation CAKeyframeAnimation또한 CAAnima..