Parallax Effect란?

페이징 시 배경 이미지의 주기가 지연됨으로써 화면에 깊이를 갖게 할 수 있는 시차 효과입니다.
가까이에 이용되고 있는 것은 음악 스트리밍 서비스의 AWA .
앱을 이용해 보면 이해하기 쉽다고 생각합니다만 직관적인 움직임이 되고 있습니다.

애니메이션 개요

스크롤 방향에 대해 배경 이미지가 역방향으로 이동하여 지연되는 것 같습니다. 아래의 예에서도 이용하고 있는 것처럼 배경 이미지를 경치 등으로 하면 보다 깊이가 느껴져 멀리 있는 것 같은 이미지를 솟아 줍니다.

ParallaxPagingViewController 정보

위와 같은 페이징 애니메이션을 지원해 주는 라이브러리, ParallaxPagingViewController 를 구현해 보았습니다.

ParallaxPagingViewController

페이징의 축이 되는 부모 ViewController, UIPageViewController와 같은 것입니다.
필요한 경우 상속하고 사용자 정의하십시오.

required

init(_ viewControllers: [ParallaxViewController] = [])
//or
func setViewControllers(_ viewControllers: [ParallaxViewController])
//ページングさせたいViewControllerを設定してください.

optional

var pageSpace: CGFloat     
// ページ間のスペースを設定できます

var parallaxSpace: CGFloat 
// 背景画像をページングによってどの程度移動させるかを設定できます

var currentPageIndex: Int  
// 設定したviewControllersの初期位置(配列番号)を設定できます

func setInfinite(_ enabled: Bool) 
// 無限スクロールを設定できます、ただしviewControllerが3つ以上必要です

ParallaxViewController

페이징을 하는 아이 ViewController입니다. 상속이 필수입니다.
·required

@IBInspectable var parallaxImage: UIImage?
// 背景に設定したいUIImageをセットしてください

ParallaxPagingViewControllerDelegate

ParallaxPagingViewController로부터 통지되는 Delegate입니다.

optional func parallaxPagingView(_ pagingViewController: ParallaxPagingViewController, willMoveTo viewController:ParallaxViewController)
// 画面切り替えが開始した際に呼ばれます

optional func parallaxPagingView(_ pagingViewController: ParallaxPagingViewController, didMoveTo viewController:ParallaxViewController)
//　画面切り替えが終了した際に呼ばれます

구현 내용

기존의 UIPageViewController를 사용하는 대신 UIScrollView에 ViewController를 추가하는 형태로 했습니다. willMove에서 ViewController를 추가하고 didMove에 표시된 ViewController 이외의 childViewController를 제거합니다. 애니메이션에 대해서는 UIScrollViewDelegate의 scrollViewDidScroll(_ scrollView:) 로부터 얻을 수 있는 scrollView.contentOffset.x 로부터 스크롤 비율을 산출해 해당의 imageView 의 origin.x 를 변화시키고 있습니다. 구현 자체는 그리 복잡하지는 않지만 앞으로 일부 Effect나 Effect의 방향을 설정할 수 있도록 해 나갈 것입니다.

끝에

이번에 처음으로 라이브러리로 공개했습니다. 많은 분들의 OSS로부터 지견을 얻으면서 만들고 있기 때문에 이르지 않는 부분이 많다고 생각합니다만 꼭 이용하거나, 참고로 해 주시면 좋겠습니다. issue나 PR도 기다리고 있습니다!
(star가 붙으면 개발자가 기뻐합니다! w)

인용

음악 스트리밍 서비스 AWA (웹 사이트)

ParallaxPagingViewController - htps : // 기주 b. 코 m / 토모 키타 카하시 / 파랏 x 파긴 g