2017년 2월 28일 화요일

CATransition Animation (Core Animation)

레이어 이야기를 쓰다가 계속 삼천포로 살짝 빠지는 느낌이 들지만, 이번 글은 레이어 트랜지션(Transition), 즉 장면전환 애니메이션에 관한 글이다.

아래 영상은 이전 애니메이션 글과 비슷하게 눈으로 보는게 좋을 것 같아 별도로 제작한 영상 자료이다.


트랜지션은 애니메이션에 비하면 사용하기엔 쉬운 편이다. 애초에 트랜지션 클래스인 CATransition 자체가 CAAnimation 에서 파생된 클래스 이다보니 별로 어려울게 없다. 단지 장면전환 기능에 충실하게 디자인 된 녀석일 뿐이다.

트랜지션은 대충 아래와 같은 식으로 사용된다.
let transition = CATransition()
transition.type = kCATransitionPush
transition.subtype = kCATransitionFromRight
transition.duration = 1
view.layer.add(transition, forKey: "transition")
알아야 할 것은 type 과 duration 이다. 물론 의미는 이해하기 쉬울 것이다. type 은 트랜지션 애니메이션 스타일을 결정하고 duration 은 이 애니메이션의 시간을 설정 할 수 있다.

그런데 장면전환 이라는 이름과 어울리지 않게 바뀌게 될 것이 무엇인지 결정하는게 없다.

UIView Animation 을 이용해 트랜지션을 연출할 때는 애니메이션 블럭 내에서 바뀔 뷰를 집어넣는(addSubview) 방식으로 코딩 했었는데 이 디자인은 사실 CATransition 에서도 동일하다. 앞서 애니메이션 글에서도 언급했는데 애니메이션 이후의 상태를 바로 애니메이션 코드 다음에 기술하는 방식이 트랜지션의 경우도 동일하다는 이야기다.
view.layer.addSublayer(someLayer)
...
let transition = CATransition()
transition.type = kCATransitionPush
transition.subtype = kCATransitionFromRight
transition.duration = 1
view.layer.add(transition, forKey: "transition")

view.layer.addSublayer(anotherLayer)
위의 코드는 뷰에 someLayer 가 보이는 상태에서 anotherLayer 로 장면이 전환되는 코드의 예이다. 응용 여부가 많지 않기 때문에 이 외의 방법으로 쓸 일은 잘 없을 것 같다. 필요하다면 애니메이션 글에서 언급한 CATransaction 을 이용해 애니메이션이 끝났을 때의 처리를 별도로 할 수도 있을 것이다.
참고로 레이어가 아니라 뷰를 삽입하는 경우에도 동일한 애니메이션 효과를 볼 수 있다. view.layer.addSublayer 대신에 view.addSubview 가 쓰인다고 보면 코드는 거의 비슷하다고 볼 수 있다.
트랜지션 타입(type)은 공식 문서 상에는 아래의 4개가 있다:
  • kCATransitionFade
  • kCATransitionMoveIn
  • kCATransitionPush
  • kCATransitionReveal
그런데 이런 공용 트랜지션(common transition) 타입 말고도 문서에서 언급하지 않고 있는 몇 가지 트랜지션을 추가로 사용할 수 있다.
  • flip, alignedFlip, oglFlip
  • cube, alignedCube
  • pageCurl, pageUnCurl
  • rippleEffect
  • suckEffect
  • cameraIris, cameraIrisHollow, cameraIrisHollowOpen, cameraIrisHollowClose
  • rotate
사실 이보다 훨신 많았는데 iOS 최신 버전에서는 지원 안되거나 하는 것들도 있어서 일단 확실하다 생각되는 것들만 정리했다. 참고로 글을 쓰는 현재 iOS 10 이 최신 버전이다.

CATransition 클래스의 type 프로퍼티는 문자열(String) 타입이다. 위의 특수 트랜지션 키워드를 그냥 type 에 문자열로 지정하면 쉽게 확인 해 볼 수 있다. 실제로 움직이는 모양은 위의 첨부한 동영상을 참고하자.

이 외에 subtype 은 type 에 따라서 쓸 수 있거나 필요 없을 수도 있는데 어떤 방향으로 트랜지션 애니메이션이 움직이는지를 결정하는 용도로 쓰인다.
  • kCATransitionFromRight
  • kCATransitionFromLeft
  • kCATransitionFromTop
  • kCATransitionFromBottom
Push 타입 같이 특정 방향으로 움직이는 애니메이션 이라면 subtype 을 이용해 움직이는 방향을 바꿀 수 있다.

이 외에 별도로 언급하지는 않았지만, CAAnimation 의 몇 가지 기능들, 예를 들어 Timing Function 을 지정해 좀 더 자연스러운(?) 애니메이션을 만들 수 있다. 이 내용은 아래 CALayer Animation 글을 참고하자.

[관련글] CALayer Animation (Core Animation)
[관련글] CALayer 시작하기

댓글 없음 :