CAGradient location 정복하기

 

오늘은 그라데이션 효과를 좀 더 잘 컨트롤 해보는 시간을 갖도록 하겠습니다.

Gradient 의 locations 프로퍼티를 조작하면 쉽게 할 수 있습니다.

 

그 전에 아직 그라데이션 자체에 익숙치 않으시다면! 다음 글을 먼저 보고 와주시면 이해가 편하실거에요!

---

locations

먼저 애플의 정의부터 확인해볼까요?

음.. 각 gradient의 종료 지점(?)을 정의해주는 녀석이라고 하네요. 0 ~ 1사이의 값을 사용해야 하구요...

종료 지점이라.. 종료 지점이 뭘까...

네 뭐 그래요.. 이것만으로 이해가 되면 포스팅하고 있지 않겠죠!! 지금부터 같이 알아봐요 :D

 

다시 제 언어로 정리해보면, 

(0.0 ~ 1.0)까지의 값으로 그라데이션 될 색의 경계(gradient stop)를 정해줍니다.

저는 gradient stop을 경계라고 표현했는데요, 아마도 stop이라고 사용한 이유는 단색이 끝나는 지점을 의미하는 것 같아요.

그라데이션의 시작 지점을 정해준다고 생각하면 좀 더 이해하기 쉬운데요,

바로 이 경계 사이에서 색이 그라데이션 된다고 생각하시면 됩니다.

let gradient = CAGradientLayer()

...

gradient.locations = [a, b]

다음과 같이 사용하는데요

a와 b 둘의 값을 같게 준다면? 어떻게 될까요?

둘의 시작점은 같아지고 사이가 없기 때문에 그라데이션 없이 두 색이 반반을 차지하게 됩니다.

gradient.locations = [0.5, 0.5]

 

두 색의 경계가 0.0으로 같기 때문에 두 번째 색이 모두 차지하게 됩니다.

반대로 1.1이라면 첫 번째 색이 차지하게 되겠죠!

gradient.locations = [0.0, 0.0]

 

 

그렇다면 이제 단색말고 진짜 그라데이션을 확인해보도록 합시다!

그럼 전체적으로 색이 모두 섞이려면 어떻게 해야 할까요?

[0.0, 1.0] 으로 준다면 경계가 시작과 끝이므로 사이 전체가 자연스럽게 섞이게 될 것 같아요.

확인해볼까요?

gradient.locations = [0.0, 1.0]

 

네 좋습니다. 그럼 특정 부분에서 그라데이션이 이루어지게 하고 싶다면 어떻게 해야할까요?

예를 들어, 위에서 1/4 지점 정도에 그라데이션 효과를 강하게 주고 싶은 경우가 될 수 있겠죠?

사실 이게 바로 제가 원했던 효과였었는데요,

저는 처음에 [0.1, 0.3] 정도 준다면 어떻게 될지 궁금했습니다.

gradient.locations = [0.1, 0.3]

 

경계가 대략 저런 식으로 형성되어 그라데이션이 이루어졌습니다!

윗 부분에 단색을 주고 싶지 않고 자연스러운 그라데이션을 원한다면 아예 처음 색의 경계를 0.0으로 만들어줘도 좋겠네요.

gradient.locations = [0.0, 0.3]

 

같은 원리로 여러 개의 색을 섞을 때도 사용할 수 있답니다!!

3개 이상의 색에서 가운데는 자신의 경계 양쪽으로 색이 뻗어 나간다고 생각하시면 될 것 같아요!

// 맨 앞에 blue 추가 
gradient.locations: [0.0, 0.5, 1.0])

 

 

도움이 되셨으면 좋겠네요. 감사합니다 :)