정영오_0621

[ghost]

Graphics

CALayer 와 UIView 의 차이

CALayer 는 이미지 기반으로 콘텐츠를 관리하고, 해당 콘텐츠에 애니메이션을 적용할 수 있는 객체입니다. 대부분의 경우 UIView 를 위한 Backing Store 로 활용되지만 무조건 UIView 와 함께 사용해야 하는것은 아닙니다.

CALayer 은 주로 시각적 콘텐츠를 관리하는 역할을 합니다. 배경색, 테두리, 그림자 등을 설정하기 위해선 CALayer 를 사용해야합니다. 직접적인 시각적 콘텐츠 이외에도, 해당 콘텐츠를 화면에 표시하는데 사용되는 지오메트리 속성도 CALayer 가 관리합니다. 위치, 크기 및 해당 정보에 적용되는 변형에 대한 정보도 유지 관리합니다.

UIView 에서 CALayer 객체를 생성한 경우, 일반적으로 뷰는 자신을 CALayer 의 델리게이트로 자동 할당합니다. 꼭 필요한 경우가 아니라면 이 관계를 변경해서는 안됩니다. 직접 CALayer 객체를 생성하는 경우는 델리게이트 객체를 할당하는 과정이 필요합니다.

CALayer 는 접두사에서 알 수 있지만, Core Animation 프레임워크 계층의 객체입니다. UIView 는 UIKit 프레임워크 계층의 객체입니다.

Animatable Property

Core Animation 프레임워크는 CALayer 의 일부 프로퍼티에 빌트인 애니메이션을 제공합니다. UIView.animate 블록 내부에서 특정 프로퍼티를 변경하는 코드를 실행했을 때, 별도로 애니메이션을 구현해주지 않아도 애니메이션이 일어나는 것은 빌트인 애니메이션 덕분입니다.

이렇게 빌트인 애니메이션이 제공되는 프로퍼티를 Animatable Property 라고 부릅니다. UIView 에도 frame, bounds, center, alpha 등의 Animatable Property 가 존재합니다만, CALayer 의 Animatable Property 를 사용하면 더 많은 종류의 빌트인 애니메이션을 활용할 수 있습니다.

Animatable Property 라고 착각하기 쉬운 프로퍼티의 예시로는 오토레이아웃의 Constraint 가 있습니다. Constraint 는 layoutIfNeeded 메소드를 통해서 뷰의 frame 프로퍼티를 즉시 변경시키고, frame 이 Animatable Property 이기 때문에 빌트인 애니메이션이 동작하는 형태입니다.

• UIView 의 Animatable Property

• CALayer 의 Animatable Property

CAAnimation 의 역할과 하위객체

CAAnimation 은 Core Animation 을 위한 추상 슈퍼클래스입니다. CAAnimation 은 CAMediaTiming 및 CAAction 프로토콜에 대한 기본 지원을 제공하는 역할을 하며, 실제로 애니메이션을 적용하려면 CAAnimation 의 서브클래스인 CABasicAnimation, CAKeyframeAnimation, CAAnimationGroup 또는 CATransition 인스턴스를 생성해야 합니다.

CABasicAnimation

• 레이어 프로퍼티에 기본적인 단일 키프레임 애니메이션 기능을 제공하는 객체입니다. 단일 키 프레임 애니메이션이란, 하나의 fromValue 와 하나의 toValue 를 이용하는 것을 의미합니다. 아래와 같이 CABasicAnimation 객체를 생성할 수 있습니다.

  let animation = CABasicAnimation(keyPath: "opacity") 
  animation.fromValue = 0 
  animation.toValue = 1

CAKeyframeAnimation

• 레이어 프로퍼티에 키프레임 애니메이션 기능을 제공하는 객체입니다. CABasicAnimation 과 다르게, 다중 키 프레임을 이용하여 복잡한 애니메이션을 생성할 수 있습니다. 아래와 같이 CAKeyframeAnimation 객체를 생성할 수 있습니다. 아래 코드 예시에서 총 3개의 키를 이용하여 배경 색상이 빨강, 초록, 파랑 순으로 변하는 애니메이션을 만들 수 있습니다. 애니메이션 속도는 사용자가 제공하는 타이밍 정보에 의해 움직입니다.

  let colorKeyframeAnimation = CAKeyframeAnimation(keyPath: "backgroundColor")
  
  colorKeyframeAnimation.values = [UIColor.red.cgColor,
                                  UIColor.green.cgColor,
                                  UIColor.blue.cgColor]
  colorKeyframeAnimation.keyTimes = [0, 0.5, 1]
  colorKeyframeAnimation.duration = 2

CAAnimationGroup

• 여러 애니메이션을 그룹화하여 동시에 실행할 수 있는 객체입니다. CABasicAnimation, CAKeyframeAnimation 등을 이용해 생성한 단일 애니메이션들을 그룹화하여 동시에 실행할 수 있는 기능을 제공합니다. 아래와 같이 CAAnimationGroup 객체를 생성할 수 있습니다. CAAnimationGroup 을 이용하여 여러 CAAnimation 객체를 묶어서 실행하는 경우, 각각의 애니메이션 지속 시간이 CAAnimationGroup 에 맞춰서 조정되는 것이 아닙니다. CAAnimationGroup 의 애니메이션 지속 시간이 종료되면 실행되던 각각의 애니메이션이 클립되므로 주의하여 사용하여야 합니다. 아래 코드 예시에서 expandScale 는 toValue 까지 애니메이션되지 않습니다.

  let fadeOut = CABasicAnimation(keyPath: "opacity")
  fadeOut.fromValue = 1
  fadeOut.toValue = 0
  fadeOut.duration = 1
  
  let expandScale = CABasicAnimation()
  expandScale.keyPath = "transform"
  expandScale.valueFunction = CAValueFunction(name: kCAValueFunctionScale)
  expandScale.fromValue = [1, 1, 1]
  expandScale.toValue = [3, 3, 3]
  fadeOut.duration = 2
  
  let fadeAndScale = CAAnimationGroup()
  fadeAndScale.animations = [fadeOut, expandScale]
  fadeAndScale.duration = 1

CATransition

• 레이어의 상태 사이에 전환 애니메이션을 제공하는 객체입니다. CATransition 를 레이어에 추가하여 서로 다른 두가지 상태 사이 애니메이션을 사용할 수 있습니다. 기본 제공되는 애니메이션은 크로스페이딩 애니메이션이지만, 이외에도 기본 제공되는 다양한 애니메이션을 사용할 수 있습니다. 아래와 같이 CATransition 객체를 만들고 사용할 수 있습니다. 아래 예시 코드에서 runTransition 메서드를 실행하면, CATransition 객체에 의해 붉은 배경의 CATextLayer 가 푸른 배경으로 변경됩니다. kCATransitionPush 타입이 설정되었으므로 왼쪽에서 오른쪽으로 빨간색이 밀려나는 형태의 애니메이션이 적용됩니다. 해당 영상에서에서 애니메이션 타입이 적용된 예시를 확인할 수 있습니다.

  let transitioningLayer = CATextLayer()
  
  override func viewDidLoad() {
      super.viewDidLoad()
      transitioningLayer.frame = CGRect(x: 10, y: 10, width: 320, height: 160)
      view.layer.addSublayer(transitioningLayer)
  
      transitioningLayer.backgroundColor = UIColor.red.cgColor
      transitioningLayer.string = "Red"
  }    
  
  func runTransition() {
      let transition = CATransition()
      transition.duration = 2
  
      transition.type = kCATransitionPush
  
      transitioningLayer.add(transition, forKey: "transition")
  
      transitioningLayer.backgroundColor = UIColor.blue.cgColor
      transitioningLayer.string = "Blue"
  }