CoreAnimation(4)
-
[CoreAnimation] Layer에 CoreAnimation을 무한으로 체이닝할 수 있을까?
안녕하세요! 오늘은 코어애니메이션을 체이닝할 수 있는지에 대해 알아보려고 합니다. 그냥 체이닝이 아니라 무한 체이닝입니다! (살짝 스포하자면 실패했습니다.. 스레드문제인 거 같은데...) 일단 구현에 들어가보도록 할게요. 구현할 애니메이션은 아래 밤하늘이에요! 질문이 나오게 된 배경 위 질문이 왜 나오게 되었는 지 설명해볼게요. 먼저, 저는 밤하늘에 별이 반짝이는 애니메이션을 주고 싶었어요. 그래서 먼저 피그마로 별을 디자인했습니다! 왜 굳이 디자인을 해주었냐면, 별이 찍힐 좌표값을 알아야했기 때문입니다! 별을 구성하고 있는 모서리를 알아야 UIBezierPath로 경로를 그려줄 수 있어요. 이미지로 추출해서 layer의 contents로 넣어줘도 가능하지만 정밀한 컨트롤이 불가능할 것 같아서 직접 만들..
2022.10.23 -
[CoreAnimation] 물체를 path 따라 움직이기 (feat. 우주비행사 날리기)
오늘은 이 우주비행사를 원하는 경로로 움직여보려고 합니다! 먼저 지난번에 알아본 CAKeyframeAnimation와 UIBezierPath의 개념에 대한 이해가 필요해요. 아래 두곳에 정리해두었는데 참고하시면 좋겠습니다! https://github.com/wody-d/woody-iOS-tip/blob/main/TIL_2022:10:19_uibezierpath.md GitHub - wody-d/woody-iOS-tip: 🐶 iOS에 대한 소소한 팁들과 개발하다 마주친 버그 해결기, 그리고 오늘 🐶 iOS에 대한 소소한 팁들과 개발하다 마주친 버그 해결기, 그리고 오늘 배운 것들을 모아둔 레포 - GitHub - wody-d/woody-iOS-tip: 🐶 iOS에 대한 소소한 팁들과 개발하다 마주친 버그 ..
2022.10.22 -
[CoreAnimation] Layer Masking (feat. 키 모양 만들기)
안녕하세요! 오늘은 레이어 마스킹에 대해서 알아보려 합니다. 트러블 슈팅도 조금 있습니다. 뷰의 일부를 잘라서 보여주고 싶은 애니메이션 구현 내용이 있었습니다. 보통 뷰의 모서리부분을 둥글게 자르는 프로퍼티로 layer.cornerRadius와 maskToBounds를 사용했습니다. 하지만 저희가 완전히 원하는 모양으로 잘라서 일부만 보여주고 싶은 상황이었습니다. 이 상황은 layer의 mask 프로퍼티를 이용해서 해결할 수 있었습니다. 애플에선 이렇게 설명을 합니다. An optional view whose alpha channel is used to mask a view’s content. 뷰의 콘텐츠를 마스킹하는데 알파 채널을 사용하는 선택적 뷰라고 해석할 수 있는데 뷰의 일부만을 보여주고 싶을 때..
2022.10.20 -
[CoreAnimation] CAReplicatorLayer 알아보기
CAReplicatorLayer 위치, 색깔, 시간 등의 transformation 룰을 지키면서 하나의 레이어를 복제해서 복잡한 레이아웃을 구성해주는 객체입니다. let replicatorLayer = CAReplicatorLayer() let redSquare = CALayer() redSquare.backgroundColor = NSColor.white.cgColor redSquare.frame = CGRect(x: 0, y: 0, width: 100, height: 100) let instanceCount = 5 replicatorLayer.instanceCount = instanceCount replicatorLayer.instanceTransform = CATransform3DMakeTrans..
2022.10.20