iOS) CAGradientLayer / CABasicAnimation - 색상이 변하는 그라데이션

 

 

안녕하세요 소들입니다!! :)

요즘 CA에 빠져갖고 이거저거 만들어보는데

왤케 아기자기하고 예쁜 게 많은지 ㅜ..ㅜ

 

이전 포스팅에서 Gradient를 만들었다면,

이번 포스팅에선 Gradient 색상이 변하는 Animation을 만들어볼 거예요!!! 

 

완성본은 다음과 같아여 :)

 

 

 

 

 

넘ㅁ 예쁘지 않음!? 마치 당장이라도 siri 나올 것 같지 않음!? ㅜㅜㅜㅜ🌝

gif 만드느라 화질 깨지는 게 맴찢이다 실제 시뮬레이터로 보면 타릭 그자체인데 ㅜ

 

쨌든 만들러 가봅시다!!!

모든 포스팅은 편의 말투로 합니다~!!

 

 

 

 

1. Gradient 만들기

 

먼저, 색상을 변경하기 전에 gradient는 다음과 같이 만들고 가겠음

모른다면 gradient 만들기 를 보고오면 되시구

저는 시작 Color를

 

 

위 세 가지 색상으로 정했음!! 각자 원하는 색상으로 하셈

 

 

let gradientLayer = CAGradientLayer()
gradientLayer.frame  = self.view.bounds
let colors: [CGColor] = [
   .init(red: 1, green: 0.4932718873, blue: 0.4739984274, alpha: 1),
   .init(red: 0.4508578777, green: 0.9882974029, blue: 0.8376303315, alpha: 1),
   .init(red: 0.476841867, green: 0.5048075914, blue: 1, alpha: 1)
]
gradientLayer.colors = colors
self.view.layer.addSublayer(gradientLayer)

 

 

코드 투척

 

 

 내가 했지만 존예....

 

 

 

 

2. 변경할 색상 정하기 

 

Animation을 통해 변경할 Color를 정의해주셈

난 

 

 

이 세가지 색으로 변경해보겠음

 

 

let changeColors: [CGColor] = [
   .init(red: 0.3647058904, green: 0.06666667014, blue: 0.9686274529, alpha: 1),
   .init(red: 0.2392156869, green: 0.6745098233, blue: 0.9686274529, alpha: 1),
   .init(red: 0, green: 0.9914394021, blue: 1, alpha: 1)
]

 

 

 

 

3. 애니메이션 추가하기

 

음 애니메이션을 줄 기능은 바로바로

 

 

 

 

이 CABasicAnimation을 이용할 건데,

얘에 대해 깊이 다루는 건 나중에 따로 포스팅하고 싶어서,

이번엔 Gradient 한정 어떻게 사용하는지 보겠음 👀

 

 

 

3-1. Animation 인스턴스 생성

 

먼저, 다음과 같이 Animation에 대한 객체를 생성해줌

 

 

let colorAnimation = CABasicAnimation(keyPath: "colors")

 

 

근데 여기서 keyPath에 들어가는 'colors'는

이미 정의되어 있는 key값을 넣는 것인데,

우리는 그 중에서  색상과 관련된 작업을 할 것이기 때문에 colors를 넣으면 됨

이 key 종류가 궁금하면 여기 답글 보면 나와 있움

 

 

 

3-2. toValue : 변경할 색상 설정하기

 

우리가 아까 변경할 색상 changeColors를 정의해뒀잖음?

 

 

colorAnimation.toValue = changeColors

 

 

이를 toValue라는 프로퍼티에 넣어주면 됨

이 외에 fromValue, byValue 등등 있지만 나중에 Animation 포스팅 할 때 쓰겠음

 

 

 

3-3. duration : 재생 시간 설정하기

 

Animation이 몇 초동안 재생할 건지 정하는 프로퍼티임

 

 

colorAnimation.duration = 3

 

나는 3초로 정했음

 

 

 

3-4. autoReverses : 역재생 설정하기

 

Animation은 재생이 끝나면 다시 처음 상태로 되돌아가는 특성이 있는데,

이때 다시 돌아갈 때 역으로 재생(Animation)해 되돌릴 건지

정하는 프로퍼티임

 

 

colorAnimation.autoreverses = true

 

 

나는 역재생 할 것이기에 true로 줌

 

근데 만약 false로 주면, Animation 없이 처음으로 되돌아가기 때문에

 

 

 

 

이렇게 정없게 띡.. 하고 돌아간달까..

근데 나는 애니메이션 끝나도 첫 화면으로 돌아가고 싶지 않은데???

할 수도 있잖음

 

그때는 다음 프로퍼티 두 개를 사용하면 됨

 

 

 

3-5. 애니메이션이 끝난 시점에서 멈추도록 설정하기

 

이때는 두 개의 프로퍼티를 설정해줘야 하는데

 

 

colorAnimation.isRemovedOnCompletion = false
colorAnimation.fillMode = CAMediaTimingFillMode.forwards

 

 

그러면 

돌아가지 않고 애니메이션이 끝난 화면에서 멈춰있음 ㅎㅎ

(아니 gif 첨부할라 했는데 gif자체가 무한 반복이라 첫 화면으로 돌아가는것처럼 보여서 뺌)

 

 

 

3-6. repeatCount : 반복 횟수 설정하기

 

Animation이 끝나면 몇 번 반복할 건지 정하는 것임

우리같은 경우 autoReverses를 true로 설정했기 때문에

 

color -> changeColor -> color

 

이렇게 애니메이션이 실행됐다가 다시 돌아오는 동작이 하나의 Animation 과정임

따라서 위 Animation을 몇 번 반복할 건지 정하는 것임

 

 

colorAnimation.repeatCount = .infinity

 

 

난 무한으로 돌릴 것이기 때문에 infinity로 설정했는데,

자료형이 Float이기 때문에 숫자 Literal을 대입해도 됨!

 

 

 

3-7. add : Gradient에 Animation을 추가해주자

 

자 이제 우리가 만든 애니메이션을

gradient에 추가해주는 작업을 하면 됨

 

 

gradientLayer.add(colorAnimation, forKey: "colorChangeAnimation")

 

 

여기서 쓰이는 forKey는 "임의로" 설정하는 것임

따라서 원하는 구분 Key로 설정하시면 됨

 

그럼 설정 끝!

실행해보면 맨 위의 결과가 나올 것입니다 :)))))))))))

 

 

 

 

4. 전체 코드

 

 

let colors: [CGColor] = [
   .init(red: 1, green: 0.4932718873, blue: 0.4739984274, alpha: 1),
   .init(red: 0.4508578777, green: 0.9882974029, blue: 0.8376303315, alpha: 1),
   .init(red: 0.476841867, green: 0.5048075914, blue: 1, alpha: 1)
]
let changeColors: [CGColor] = [
   .init(red: 0.3647058904, green: 0.06666667014, blue: 0.9686274529, alpha: 1),
   .init(red: 0.2392156869, green: 0.6745098233, blue: 0.9686274529, alpha: 1),
   .init(red: 0, green: 0.9914394021, blue: 1, alpha: 1)
]
let gradientLayer = CAGradientLayer()
gradientLayer.frame  = self.view.bounds
gradientLayer.colors = colors
self.view.layer.addSublayer(gradientLayer)
let colorAnimation = CABasicAnimation(keyPath: "colors")
colorAnimation.toValue = changeColors
colorAnimation.duration = 3
colorAnimation.autoreverses = true
colorAnimation.repeatCount = .infinity
gradientLayer.add(colorAnimation, forKey: "colorChangeAnimation")

 

 

 

 

 

 

 

.

.

.

오늘은 CAGradient, CABasicAnimation을 통해

신기한 애니메이션을 만들어봤어염 

근데 딱히 언제쓰일진 모르겠지만 ㅎㅎ;; 예쁘니까 됐다

 

 

 

이건 썸네일용 ㅎㅎ