김종권의 iOS 앱 개발 알아가기

CAAnimationGroup 개념 이름 그대로 동시에 여러가지의 CAAnimation을 적용하고 싶은 경우, group으로 묶어서 실행되게끔 할 수 있는데 이때 사용하는게 CAAnimationGroup CAAnmationGroup 사용방법 직관적으로 CABasicAnimation들을 group에 넣고 이 group을 뷰의 layer에 add해주면 완성 파란색 뷰 준비 final class CircleView: UIView { override func layoutSubviews() { super.layoutSubviews() clipsToBounds = true layer.cornerRadius = frame.height / 2 } } class ViewController: UIViewController..

* 이미지를 이용한 방법은 이전 포스팅 글 참고 구현 아이디어 UIBezierPath를 통해서 동그란 layer 그리기 layer의 lineWith를 1보다 크게하여 테두리를 만들고 이 테두리의 색상(strokeColor)은 blue, 내부에 채워지는 색상(fillColor)은 clear로 설정 테두리가 꽉차 있으면 안되고 중간이 뚫려 있어야 하므로 strokeStart를 0.2정도로 설정하여 20%는 비어지도록 설정 이 뷰를 CABasicAnimation의 transform.rotation을 사용하여 효과를 주면 완성 구현 LoadingView 정의 final class LoadingView: UIView { init() { super.init(frame: .init(origin: .zero, size..

1. long press gesture와 애니메이션 - 드래그 구현 방법 (snapshotView, CGAffineTransform) 2. long press gesture와 애니메이션 - 드래그할때 다른 뷰 줄어들고, 해당 뷰 크게하기 (UIView.animate, CGAffineTransform, concatenating) 3. long press gesture와 애니메이션 - 드래그와 cornerRadius, shadow 효과 (CABasicAnimation) 4. long press gesture와 애니메이션 - UIStackView에 DragDrop 적용 (DragDropStackView 구현) 5. long press gesture와 애니메이션 - gesture 도중 화면 끝으로 가면 자동으로..

ProgressButton 특정 기능을 수행하고난 후 특정 시간내에 취소할 수 있는 카운트 다운을 시각적으로 보여주는 버튼 기능에 사용 구현 아이디어 원의 둘레는 CAShapeLayer와 CABasicAnimation을 통해 그리게끔 구현 애니메이션 끝난 경우 이벤트 수신은 CAAnimationDelegate를 통해 알림 안의 x 이미지는 UIImage 사용 구현 사용하는쪽 ProgressButton을 초기화하고, progress를 돌리고 싶은 경우 animate(startRatio:) 사용 class ViewController: UIViewController { private var progressButton: ProgressButton! override func viewDidLoad() { super..

Pulse 애니메이션 구현 아이디어 CABasicAnimation와 CAKeyframeAnimation 사용 크기를 키우는 애니메이션은 단순히 시간에 따라 일정한 방향으로 키우면 되므로 CABasicAnimation사용(keyPath: transform.scale.xy) 투명도가 밝아졌다가 다시 투명해져야 하므로, 값이 프레임에 따라 다르게 적용되어야하는 CAKeyframeAnimation사용 (keyPath: opacity) 위 애니메이션이 동시에 적용되어야 하므로, CAAnimationGroup을 사용 애니메이션 구현 클래스 준비 import UIKit class ViewController: UIViewController { } 뷰 준비 private let sampleView: UIView = { ..

구현 아이디어 테두리에 관한 윤곽 레이아웃을 구하기 위해서 UIBezierPath를 사용 이 UIBezierPath의 cgPath값을 밑에 CAShapeLayer에서 사용 테두리에 도는 애니메이션을 적용하기 위해서 2가지의 CAShapeLayer를 사용 회색 선을 타나내는 CAShapeLayer 파란색으로 색상이 채워지는 CAShapeLayer CAShapeLayer 준비 회색 선 layer의 strokeEnd 값은 1.0으로 놓으면 원으로 칠해져 있는 상태 파란색 색상 layer의 strokeEnd 값의 초기값은 0으로 놓고, CABasicAnimation의 "strokeEnd" 애니메이션을 통해서 1초마다 strokeEnd값이 채워지도록 구현 커스텀뷰 필요한 요소 준비 윤곽 레이아웃 path 상태를 ..

사전 지식 1) CAGradientLayer gradation을 주어서 뷰의 테두리까지 발산되게 해야하므로, conic gradation을 사용 gradation의 종류(axial, radial, conic) 포스팅 글 참고 사전 지식 2) UIBezierPath, CAShapeLayer UIBezierPath는 선을 그리는 역할 CAShapeLayer에 UIBezierPath 인스턴스를 주입하고, CAShapeLayer에서 선에대한 속성을 부여 뷰가 있을 때 뷰의 테두리만 접근하여 테두리에만 특정 애니메이션을 적용시키고 싶은 경우, CAShapeLayer 인스턴스를 통해 테두리만에만 접근가능 테두리만 접근하여, 테두리의 width값이나 색상 값등을 추가가 가능 보통 CALayer 인스턴스의 mask 프..

CABasicAnimation layer에 관련된 싱글-키프레임 애니메이션 모든 뷰들이 가지고 있는 CALayer에 애니메이션을 줄 수 있는 방법이며, 뷰를 이동시키거나, 흐리게하거나 등의 다양한 기능 구현 가능 opacity colors locations fillColor strokeEnd rotation 기타 모든 종류의 키들을 extension으로 구현해놓은 아래 링크 참고 https://stackoverflow.com/questions/13913101/cabasicanimation-keys cf) CAKeyFrameAnimation도 위 종류들을 모두 사용할 수 있고, 레이어의 여러 프레임에 대한 작업에 사용되고 CABasicAnimation은 단일 키프레임에 대한 애니메이션 기능을 제공 사용 방..