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

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를 사용하면..

IntroLayer에 스프링을 적용하는 건 UIView에서 적용하던 것과 조금 다르다. UIView에서 사용했던건 간략화된 유사-스프링 애니메이션이라고 볼 수 있다. 하지만 Layer에서 사용하는 스프링은 물리적인 접근을 통해 좀 더 실제 스프링효과를 보여준다. Damped harmonic oscillators(시간이 지남에 따라 진폭이 감소하는 진동을 말함) 실에 매달린 추를 swing시킨다고 생각해보자(물리시간에 진자운동이라고 배웠던 기억이..)마찰이 없다면, 무한히 추가 왔다갔다 할 것이다. (Harmonic oscillator) 하지만 실제로는 마찰이 있져?? 이때는 추가 왔다 갔다 하면서 멈추게 된다. 왔다 갔다 하는 거리도 시간이 지남에 따라 줄어들게 된다. (Damped harmonic os..

Intro지금까지 layer animation을 전부 independent하게 추가하였다.하지만 여러 애니메이션을 syncronous하게 할 수 있다. 이게 바로 animation groups이다. CAAnimationGroupCAAnimationGroup는 CAAnimation을 상속받는다. 즉, 우리가 지금까지 사용했던 CABasicAnimation의 모든 프로퍼티가 사용가능하다. beginTime, duration, fillMode 등 AnimationGroup에서 설정한 beginTime, duraiton, fillMode등은 그룹에 속한 애니메이션 객체에 적용된다. 따라서, 그룹에 추가할 애니메이션을 설정할 때, 굳이 위 값들을 설정해주지 않아도 알아서 적용된다.Animation easingUI..