view에 gradient 적용하기

 

보통 UIView를 그대로 사용하기 보단 RootView나 BaseView라는 커스텀 클래스로 만들어 필요한 기능들을 넣어놓고 사용하는 경우가 많다.

그 중 Gradient를 적용해두면 언제든 해당 뷰에 그라디언트 효과를 적용할 수 있기 때문에 편리하다.

---

Gradient 구현

Gradient를 구현에 있어서 필요한 것은 CAGradientLayer다.

 

https://developer.apple.com/documentation/quartzcore/cagradientlayer

CAGradientLayer | Apple Developer Documentation

 

공식문서에서도 대놓고 백그라운드에 그라디언트 효과를 적용한다고 되어있다.

그리고 이름에서 알 수 있듯 Layer로 구성되어 view의 Layer에 적용한다는 것을 알 수 있다.

 

let gradientLayer = CAGradientLayer()

gradientLayer.colors = colors
gradientLayer.cornerRadius = self.layer.cornerRadius
gradientLayer.maskedCorners = self.layer.maskedCorners
gradientLayer.startPoint = CGPoint(x: 0, y: 0)
gradientLayer.endPoint = CGPoint(x: 1, y: 1)
gradientLayer.frame = self.bounds
            
// 뷰의 레이어에 삽입
self.layer.insertSublayer(gradientLayer, at: 0)

 

---

Gradient 애니메이션 적용

그라데이션 레이어를 적용해도 이것이 애니메이션까지 적용되진 않는다.

 

https://developer.apple.com/library/archive/documentation/Cocoa/Conceptual/CoreAnimation_guide/AnimatableProperties/AnimatableProperties.html

Animatable Properties

 

CATransaction.begin()
if let animation = self.layer.animation(forKey: "position") {
	CATransaction.setAnimationDuration(animation.duration)
	CATransaction.setAnimationTimingFunction(animation.timingFunction)
} else {
	CATransaction.disableActions()
}
        
gradientLayer.frame = self.bounds
        
CATransaction.commit()

 

CATransaction을 이용해서 애니메이션에도 layer가 함께 동작할 수 있도록 적용해주어야 한다.