iOS의 기본 페이지보기는 페라 페라의 종이와 같은 애니메이션이지만 단단한 애니메이션을 만드는 방법을 보여줍니다.

우선 데모

만드는 법

기본적으로 CATransform3DRotate를 사용하여 레이어를 회전시킵니다.
좌표 공간은 그림과 같이 되어 있기 때문에 이번에는 y축을 중심으로 회전

view.layer.transform = CATransform3DRotate(transform2, CGFloat(M_PI), 0, 1, 0)

이대로 하면 아래 그림과 같이 View의 중심에서 회전해 버려, 한쪽 열린 책으로 보이지 않게 되어 버립니다


왼쪽 가장자리를 중심으로 회전하려면
view.layer.anchorPoint = CGPoint(x:0, y:0.5)
을 설정합니다. 이 설정을 넣으면 수평 방향으로 View의 폭의 1/2분 오른쪽으로 어긋나게 표시되므로 X축에 CATransform3DTranslate(CATransform3DIdentity, -width/2, 0, 0)를 미리 설정해 수정합니다.

transform을 설정한 상태에서, UIView.Animation을 사용해 CATransform3DRotate(transform2, CGFloat(M_PI), 0, 1, 0) 를 사용해 회전시키면, 이동과 회전이 동시에 일어나 버려, 깨끗한 애니메이션이 되지 않습니다.



대책으로서, 뷰를 중첩해, 외측의 뷰를 x축으로 -width/2분 offset 시킵니다. 지금까지의 코드로 뒷면이 없는, 단단한 애니메이션은 움직일 것입니다.

뒷면을 만드는 법

미리 CATransform3DRotate(CATransform3DIdentity, CGFloat(M_PI), 0, 1, 0) 로 뒤집어서 뒷면을 만들 수 있지만 이 경우 앵커 포인트가 CGPoint(x:0, y:0.5) 이어야 하기 때문에 더 중첩합니다.


붉은 테두리의 뷰를 미리 뒤집어, 녹색 테두리의 뷰를 애니메이션 시키는 것으로 뒷면을 만들 수 있습니다만, 표면이 뒤집어졌을 때에도 표시되어 버립니다. 뒤집을 때 자동으로 숨기려면 표면에 View?.layer.doubleSided = false를 지정합니다.

카메라와의 거리

Y축 회전시킨 경우, 3D적인 의미에서의 카메라는 정면에서 촬영합니다만, 이때의 View와 카메라의 거리는transform.mc34 로 설정합니다. 3000을 작게 하면 가까워지고, 크게 하면 멀어집니다.
이 값은 미세 조정하면서 원하는 숫자로 하십시오.
회전시킬 때의 코드는 아래와 같습니다.

 var transform = CATransform3DIdentity
 transform.m34 = 1/3000
 transform = CATransform3DRotate(transform, -CGFloat(M_PI), 0, 1, 0)

요약

뷰의 구조와 초기값


녹색 보기 애니메이션 코드

UIView.animateWithDuration(0.8, animations: {
            var transform = CATransform3DIdentity
            transform.m34 = 1/3000
            transform = CATransform3DRotate(transform, -CGFloat(M_PI), 0, 1, 0)
            self.faceView?.layer.transform = transform

            var transform2 = CATransform3DIdentity
            transform2.m34 = 1/3000
            transform2 = CATransform3DRotate(transform2, CGFloat(M_PI), 0, 1, 0)
            self.backView?.layer.transform = transform2

        })