Instagram Stories 큐브 전환은 iOS에서 어떻게 이루어 집니까?

Question

Instagrams의 새로운 기능인 "Stories"(한 스토리에서 다른 스토리로 이동할 때 큐브와 같은 전환이 있음을 알고 있음)의 스토리를 스 와이프하면 어떻게 작동하는지 이해할 수 없습니다! 이 기능으로 깊이 파고 경우 모든

먼저, 당신은 정확히 UIPageViewControllers 전환처럼 작동 찾을 :

을 - 다른 하나 개의보기에서 빠르게 강타 때 반사.
- 화면을 터치하여 화면 중간에 스 와이프를 일시 중지 할 수 있습니다.

개발 팀은 거기에 더 알려진 해결 방법을 기반으로하는 솔루션을 사용할 수 없었다 예 :
https://www.appcoda.com/custom-view-controller-transitions-tutorial/
까지 내가 내 위의 두 문장을 알고있는 것보다 다른 것을 달성 할 수 없기 때문 PageViewController.

Instagram Developer Team이 Cube-scroll이라고도하는 PageViewController의 새로운 전환 스타일에 대한 액세스를 얻었거나 내가 모르는 해결 방법이라고 생각합니다.

아이디어가 있으십니까?

Answer 1

나는이 기능을 오래 동안 다시 만들어 냈다. GitHub에서 소스 코드를 확인할 수 있습니다 : https://github.com/oyvind-hauge/OHCubeView

저는 스크롤 뷰 (페이징 가능)를 사용하고 있으며 각 서브 뷰에 대해 스크롤에서 주어진 뷰의 현재 x 오프셋의 함수로 조작하고 있습니다 전망. 실제 애니메이션은 코어 애니메이션을 사용하여 각 하위 뷰의 레이어에서 수행됩니다 (구체적으로 CATransform3DIdentity에 의해 주어진 단위 메트릭스 변환, CATransform3DRotate 메서드 사용).

그림자 효과는 하위보기의 레이어 (view.layer.opacity)에도 적용되며 화면의 양이 화면에 표시되는 정도에 따라 결정됩니다.

내 구현으로 두 가지 문제를 모두 해결합니다 (스 와이프 때 튀어 나오며 스 와이프를 일시 중지 할 수 있음). 이것도 UIPageViewController를 사용하여 구현할 수 있었을 것이라고 확신하지만, 그것들을 다루는 것이 싫다.

Answer 2

여기 컨트롤러의 부분을 지나치게 생각하는 것 같습니다. 이 효과는 CATransformLayer과 3면 큐브와 같은 뷰 구조를 사용하여 쉽게 얻을 수 있습니다. 여기에는 화면 평면과 정렬되는 하나의 뷰와 그 y 축에서 -90 및 90도 회전 한 두 개의 뷰가 있습니다. 그런 다음 장면을 회전시키는 팬 제스처를 얻습니다. 90도 회전 (어느 방향 으로든)이 성공한 후에는 장면을 빠르게 재설정 할 수 있습니다 (회전을 유지하는 것처럼 보이지만 실제로는 카메라가 원래 위치로 돌아 갔음) 또는 전체 360도 회전을 할 수 있습니다. 이전 및 다음 "페이지"를 업데이트하면됩니다. 단일 컨트롤러가이 장면을 처리 할 수 ​​있습니다. 각 페이지를 컨트롤러로 사용하려면 장면에 대해 하나의 컨트롤러를 사용하고 하위 컨트롤러로 페이지 컨트롤러를 사용하고 위에서 설명한대로 뷰를 설정하는 것이 가능합니다.

CATransformLayer에 대한 자세한 내용은 this 문서를 참조하십시오. 그들의 예는 이미 필요한 것에 매우 가까운 것을 만듭니다.