【Swift】 ParallaxEffectでPagingするライブラリをつくってみた

5891 ワード
iOS Design Swift Objective-C iPhone Objective-C テキストリンク

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 (webサイト)

ParallaxPagingViewController - https://github.com/tomokitakahashi/ParallaxPagingViewController