CALayer 와 CAAnimation

CALayer 의 CA 란?

 

CA 란 Core Animation 의 약자이다. 

iOS 어플을 사용할 때 화면의 부드러운 전환을 위해 최소 초당 60 프레임을 유지해야 한다. 이를 위해 OpenGL 을 사용하였으나 단순한 작업에도 코드의 양이 너무 커져서, 더 적은 코드로 그래픽을 구현할 수 있는 Core Graphics 를 만들게 되었다.

 

하지만 Core Graphics 도 low level 작업이라, 더욱 간단하게 사용하고자 만든게 Core Animation 이다.

 

UIView에는 애니메이션, 렌더링, 레이아웃 등을 관리하는 Core Animation 클래스인 CALayer가 있으며, 모든 UIVIew는 layer 프로퍼티를 가지고 있다. 

 

UIView 의 CALyer 구성

 

UIView 는 하나의 CALayer(Root) 를 가지고 있고, CALayer(Root) 는 여러 개의 CASublayers 를 가질 수 있다.

 

평소 UIView 에 cornerRadius 를 주거나, borderWidth, borderColor 값을 줄 때 흔히 view 의 layer 에 값을 주는데 바로 이 layer 가 CALayer(Root) 이다.

view.layer.cornerRadius = 10.0

 

CALayer 를 상속 받는 다양한 클래스

 

CAShapeLayer: 다각형이나 폴리곤을 그리는 CALayer

 

CATextLayer: 텍스트를 그리는 CALayer

 

CATextLayer 를 그리는 예시 코드입니다..

 

let rainDropWord = CATextLayer()
rainDropWord.bounds = CGRect(x: 0, y: 0, width: self.rainBackgroundView.bounds.width / 3, height: 30)
rainDropWord.position = CGPoint(x: CGFloat(randomPositionXArray[index]), y: layerWidth)
            
rainDropWord.string = wordTests[index].word.meaning
rainDropWord.foregroundColor = UIColor.NColor.blue.cgColor
rainDropWord.font = UIFont.NFont.arrangeButtonFont
rainDropWord.isWrapped = true
rainDropWord.fontSize = 16
rainDropWord.contentsScale = UIScreen.main.scale

 

UIView vs CALayer 

 

1. 어떤 작업을 수행할 것인가?

UIView는 컨텐츠를 그리거나, 탭, 핀치, 클릭에 대한 이벤트를 받을 수 있고, UIVIew에 관련된 작업은 CPU를 사용하여 메인스레드에서 UI 를 그린다.

반면 CALayer는 GPU에서 직접 그려지며 별도의 스레드에서 UI를 그리게 된다. 그렇기 때문에 더 많은 유연성이 필요한 작업일 경우 CALayer를 사용하는 것이 좋다. 

 

2. 퍼포먼스 측면

View 를 여러 개를 쌓아서 표현하는 것보다 Layer 를 쌓아서 만드는 것이 퍼포먼스 측면에서 훨씬 가볍다. 따라서 UIView 를 사용할 때는 단순한 애니메이션이나, 퍼포먼스에 대한 요구가 크지 않을 떄 사용한다.

 

 

CAAnimation 이란?

 

UIView 의 컴포넌트들을 애니메이션 동작을 수행하기 위해서는 UIView.animate 메서드를 통해 구현하였다.

반면, CALayer 의 경우 CABasicAnimation 을 통해 애니메이션을 그린다.

 

CABasicAnimation 은 기본적인 애니메이션 동작 가능한 기능을 제공하는데, KeyPath 를 통해 특정 애니메이션을 지정할 수 있다.

opacity : 투명도
backgroundColor : 배경 색상
position : 위치
transform.scale.x : X축으로의 크기
transform.scale.y : Y축으로의 크기
transform.rotation : 회전
shadowColor: 그림자 색상
shadowOffset : 그림자 위치
shadowOpacity : 그림자 투명도
strokeEnd : Path의 끝 부분
strokeStart : Path의 시작부분
strokeColor : Path의 색상

 

하단에는 keyPath 으로 position 을 지정하였을 때 구현한 메서드이다. 

private func animationLayer(rainDropWord: CATextLayer) {
    let baseViewHeight = self.rainBackgroundView.bounds.height
    // CATextLayer Animation
    let animation = CABasicAnimation(keyPath: "position")
    animation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeIn)
    animation.fromValue = rainDropWord.position
    animation.toValue = CGPoint(x: rainDropWord.position.x, y: baseViewHeight)
    animation.duration = 4
    animation.fillMode = .both
    rainDropWord.add(animation, forKey: "basic animation")
    rainDropWord.position = CGPoint(x: rainDropWord.position.x, y: baseViewHeight)
}