iOS ) UIBezierPath (5) - CAShapeLayer

안녕하세요 :) Zedd입니다.

아 원래zzz 이번 연휴 때 매일매일 포스팅 하는게..제...소소한..목표였는데..

어제 군버워치를 보는 바람에 ^^.... 

아 너무 웃긴데 2019 육군참모총장배 오버워치 솔저 토너먼트 제발 봐주세요..

해설이 너무 웃김

아 진짴ㅋㅋㅋ

제일 웃겼던 부분..https://youtu.be/TdbTh5u_XFQ?t=10168

C9하는 부분....

저는 육군사관학교 아니면 8군단이 이기길 바라고 있었는데 육사가 ^-^

8군단 너무 아쉽다,,,,

아무튼

오늘은 이때까지 배운 것들을 그리긴 그리는데...

Animation이 되면서~~이쁘게 되면서 어케어케 되면서 그려지는 방법에 대해 공부해볼게요.

아 나

아나

아니 

앜ㅋㅋ아니

출처 : https://stackoverflow.com/a/45537985

너가 애니메이션 등등을 하고싶으면... CALayer를 이용해야하는 부분임

걍 간단하게 "그리기"만 한다면 UIBezierPath써도됨 ㅇㅇ

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

아 글쿠나..

아니 저는 UIBezierPath로 xx를 어떻게 그릴까 하고 검색해보면

꼭!!!!! 꼭 CAShapeLayer로 답변이 달린 코드가 많았어요.

그래서 저는

"아닠ㅋㅋ왜 굳이 CAShapeLayer로 그리지..? UIBezierPath로도 다 그릴 수 있는데..."

라고 생각했는데...

그렇군.........그렇군요.

그러면 CAShapeLayer를 공부해야 하는 걸까요..??

네 그러면 급...급...제목을 바꿔보겠습니다.

CAShapeLayer (1) 로 해서 새로 글 하나 파서 공부할까...도ㅓ 생각했는데 그냥 할게요!

그럼 CAShapeLayer를 공부하기 전에..CALayer를 공부해볼게요.

왜냐면

ㅇㅇ

아시는 분들은 아시겠지만,

"CA"는 Core Animation 프레임워크의 약자입니다.

그래서 CALayer도 Core Animation안에 있죠.

CALayer는 

이미지 기반 컨텐츠를 관리하고, 해당 컨텐츠에서 "애니메이션"을 수행 할 수 있는 객체

라고 해요.

overView를 지금 보는거는..의미가 없으니 알아서 보셈

자 그럼 CAShapeLayer를 바로 보겠습니다.

사실 CAShapeLayer만 있는건 아니고,

CATextLayer

CAGradientLayer

도 있어요.

근데 우리는 지금 text는 아니고, 

이렇게 gradient color를 그리는 것도 아니잖아요?

우리가 지금 할거는 도형을 애니메이션 하는 것이기 때문에..

그래서 CAShapeLayer를 공부하는겁니다 :)

CAShapeLayer의 정의는

좌표공간에 cubic Bezier spline을 그리는 레이어..??

......

라고 합니다 ^^..

아니 overView돌았군...

antialiased...resolution independence.....

네 안볼게요 ㅎ

아니 애플씨

누가 예제로 이런걸 그려요

따흐흑

자 그냥 일단 만들어봅시다..!!!

ㅇㅇ만듬

잉...뭔가 lineWidth..miterLimit이런거 UIBezierPath에서 본건데 그쵸

애플 코드인데...

뭐 지금의 제 느낌상 UIBezierPath이랑 거의 똑같다고 느껴지네욥...!!!

path에 우리가 만든 UIBezierPath를 넣어주고, 그 path에 대한 attribute설정(?)을 CAShapeLayer에 해주는 느낌?

역시....

일단 path를 만들어봤는데요. 

UIBezierPath객체를 만들고, 

시작점을 지정해주고, 

addLine을 통해 그냥 일단..간단한 line을 그려줬습니다.

자 그리고 우리는 막 색상 지정해주고, 

필요하면 close()호출해주고..stroke()나 fill()메소드를 호출하고 그랬잖아요?

근데 지금 제가 볼땐..

CAShapeLayer의 path프로퍼티에 그냥...!! 그냥 path만 넘겨주면 되는것 같아요.

이렇게요. 

CAShapeLayer의 path는 CGPath타입이므로

path.cgPath를 해준거에요!

그럼 색깔을 지정해줘볼까요? 이것도 CAShapeLayer에서 다 할 수 있는것 같아요. 

그러니까 우리가 UIBezierPath에서 했던 attribute설정을 "layer"단에서도 할 수 있는 것 같음..

이유는 저도 모르겠습니다? 

이렇게!

그리고 이제 layer를 진짜 우리 view에 add해주는 작업이 필요합니당.

CAShapeLayer는 layer기 때문에.... layer에 넣어줘야함.

그럼 빌드를 해봅시다.

짜잔!!

암튼 UIBezierPath에 대해 어느정도 이해가 이제 되신분들은 하나도 어렵지 않을 거라고 생각해요 :D

하나하나 설명은 안하겠음

자 그럼 애니메이션..! 애니메이션 어케해

아 Core Animation쪽에 animation섹션이 있군요.,

ㅎ

이중에 뭘 쓰면 되는데요..

네..애플문서가..CABasicAnimation을 쓰네요..basic이니까ㅣ 뭐 젤 기본인가?

저는 왕왕ㅇ오앙초보니까 CABasicAnimation을 사용해서 저 코드 고대로 따라해보겠삼

아니 근데 "opacity" < 이거 너무하자나

.opacity뭐 이렇게라도 해야하지않아...!?!?!?

암튼 빌드 ㄱ

결과 : 

뭔가 된다...

근데 지금 보면 제가 움짤을 짧게 짤라서;;잘 안보일 수도 있는데, 빌드해보시면 볼 수 있을겁니다.

암튼 지금 선이 사라졌다가 팍 하고 선이 다시 나오거든요? 

왜냐면

내가 이걸 빼먹음

layer의 실제 데이터값을 최종값으로 변경해야하나보네요.

암튼...

"애니메이션" 해버렸다....

이제 알겠군..

I know...

그럼 이제 우리가 알아야 할 것은...

저 keypath에 들어갈 수 있는게 뭔지 알아야 겠네요.

출처 : https://stackoverflow.com/a/49480213

이만큼...!! 들어갈 수 있다고 합니다.

저건 CALayer건데,,당연히 CAShapeLayer에서도 쓸 수 있겠죠? CALayer를 상속받고 있으니..

방금 opacity를 쓰기도 했구요.

CAShapeLayer에서만(?) 쓸 수 있는 프로퍼티들도 있나봅니다. 

출처 : https://stackoverflow.com/a/49480213

오?

흠 그럼 해보자

아니..아니

아

ㅋㅋㅋㅋ아 맘에 안들어

아니 fromValue와 toValue는 Any?타입이라..fillColor지만 저렇게 1, 0 넣을 수 있음 ㅎ

이렇게 넣으면 크래쉬나는거 아냐ㅕ..? 하고 봤는데 크래쉬는 안나네욥 ㅎ;;

아니...ㅎㅎ

이거 뭐 Any?라 뭐 어떻게 할수도 없군요.zzzz 

일단 color를 줍시다..!

아 맞다 지금 fill할게 없지...(line하나만 그어서)

원을 그려주고 거기에 fillColor 애니메이션을 먹여볼게요.

아까 최종값을 layer애ㅔ 넣으라고 했잖아요..! 아예 fillColor를 마지막에 호출해줄게요.

참고로 color는 cgColor로 해서 넣어줘야 합니당 

이렇게 하면

XD

하하

이걸 하나하나 다 보면 너무나도..좋겠지만..

저는 제가 필요한 애니메이션만 하겠습니다 ㅎ

그러니까..제가 원하는 애니메이션은..

clock-wise animation이라고..하는것 같은데, 암튼 그거에용

찾아보셈

 ㅎ ㅏㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ

네 뭐 이건 일단 제가..일단은 애니메이션을 끝내고 적기 시작해야하는데..

그게 잘 안되네요.

삽질 하나하나 다 적긴 좀;;

네 뭐 암튼 지금 상황은

ㅎㅎ..

네..왜이럴까...그쵸

내가 원하는건 저 270도부터 시작해서 시계방향으로 돌면서.. 원이 착착 채워지는건데요..

지금 문제는 다 "동시에" 시작한다는 문제가 있는것 같아요?

그럼 해결방법은

하나 끝나면 하나 하고..그러면 될 것 같습니다.

지금은 

아 이거 하나하나 설명 안할게요 걍???

저도 http://www.tnoda.com/blog/2019-06-18/

여기 보고 따라하는거라;;

저기 만드는거 레포도 있으니까 참고하셈

암튼 지금 로직이 걍 저번이랑 똑같습니다.

for문 돌면서 CAShapeLayer를 만들어주고 있거든요. 그리고 

for문 안에서

animation을 만들어서 add해주고 있습니다.

이러고 있으니까 (거의) 동시에 시작하는거죠? 

원래 첫번째가 "끝나고" 다음걸 해야하는데 말이에요.

일단 for문을 없애보겠습니다.

지금 for문은 답이 없음

입코딩 해보자면

1. add()라는 메소드를 만든다.

2. add()메소드를 호출하여 하나의 값(? ex: 10)에 대해 비율을 애니메이션으로 채운다.

3. 그게 끝나면!!! add()메소드를 호출하여 다음 값(ex: 20)에 대해 비율을 애니메이션으로 채운다.

...

끝

자~~그러면 

이렇게 만들어집니다 참 쉽죠? 

ㅎㅎ..ㅈㅅ

후...

따라하긴 따라했는데

왜 되는지 잘 모르겠음.

일단 다 따라한건 아닙니당.

지금 duration에 문제가 있음 zz

https://github.com/Zedd0202/UIBezierPath-Pie-Chart

딱 이까지만 한거..레포에 올려놨으니 참고하세요.

코드품질이 지금 엉망이긴한데....

급 CAShapeLayer와 CAAnimation에 대한..관심이 떨어져서 더 못하겠음ㅎㅎㅎㅎ