iOSのカスタム画面遷移アニメーション全64種類を試せるサンプル

『AnimatedTransitionGallery』は、iOS 7 で追加されたプロトコル、

- UIViewControllerAnimatedTransitioning
- UIViewControllerTransitioningDelegate

を利用したカスタム画面遷移（トランジションエフェクト）を<b>64種類</b>を試せるギャラリーアプリです。

![](http://f.st-hatena.com/images/fotolife/s/shu223/20140416/20140416100040.gif)

GitHubで公開しています。

https://github.com/shu223/AnimatedTransitionGallery



##なぜつくったのか

iOS 7 から `UIViewControllerAnimatedTransitioning` および `UIViewControllerTransitioningDelegate` プロトコルが追加され、カスタム画面遷移（トランジションエフェクト）が格段に実装しやすくなりましたが、結局のところ実際のアニメーション部分は自分で実装する必要があります。


で、カスタム画面遷移は <b>UIViewController の実装とは切り離せるようにAPIが設計されていて、使い回しやすい</b> ので、こうして一カ所にまとまっていてすぐに試せて見比べられたら便利かも、ということでつくりました。


##使い方

git clone した後、 git submodule してください。

```
$ git clone https://github.com/shu223/AnimatedTransitionGallery
$ cd AnimatedTransitionGallery/
$ git submodule update --init --recursive
```


あとは TTMAnimatedTransitionGallery プロジェクトを開いてビルドすればOKです。


##利用可能なカスタム画面遷移一覧

- HUTransitionVerticalLinesAnimator
- HUTransitionHorizontalLinesAnimator
- HUTransitionGhostAnimator
- ZBFallenBricksAnimator
- CoreImageTransitionBoxBlur
- CoreImageTransitionMotionBlur
- CoreImageTransitionCopyMachine
- CoreImageTransitionDisintegrateWithMask
- CoreImageTransitionDissolve
- CoreImageTransitionFlash
- CoreImageTransitionMod
- CoreImageTransitionPageCurl
- CoreImageTransitionPageCurlWithShadow
- CoreImageTransitionRipple
- CoreImageTransitionSwipe
- ATCAnimatedTransitioningFade
- ATCAnimatedTransitioningBounce
- ATCAnimatedTransitioningSquish
- ATCAnimatedTransitioningFloat
- LCZoomTransition
- ADBackFadeTransition
- ADCarrouselTransition
- ADCrossTransition
- ADCubeTransition
- ADFadeTransition
- ADFlipTransition
- ADFoldTransition
- ADGhostTransition
- ADGlueTransition
- ADModernPushTransition
- ADPushRotateTransition
- ADScaleTransition
- ADSlideTransition
- ADSwapTransition
- ADSwipeFadeTransition
- ADSwipeTransition
- ADZoomTransition
- CECardsAnimationController
- CECrossfadeAnimationController
- CECubeAnimationController
- CEExplodeAnimationController
- CEFlipAnimationController
- CEFoldAnimationController
- CENatGeoAnimationController
- CEPortalAnimationController
- CETurnAnimationController
- KWTransitionStyleNameRotateFromTop
- KWTransitionStyleNameFadeBackOver
- KWTransitionStyleNameBounceIn
- KWTransitionStyleNameDropOut
- KWTransitionStyleNameStepBackScroll
- KWTransitionStyleNameStepBackSwipe
- KWTransitionStyleNameUp
- KWTransitionStyleNamePushUp
- KWTransitionStyleNameFall
- KWTransitionStyleNameSink
- DMAlphaTransition
- DMScaleTransition
- DMSlideTransition
- HFAnimator
- HFDynamicAnimator
- BouncePresentTransition
- FlipTransition
- ShrinkDismissTransition

###補足

本OSSは、2014年4月に公開したもので、カスタム画面遷移のクラスそのものは他のリポジトリからsubmoduleで取得するつくりになっています。

で、それら元リポジトリもあまり継続的に更新されてない＆バグが修正されてないものが多く、品質はいまひとつなものがほとんどです。必要に応じて、元リポジトリにissueを書いてみたり、プルリクを送ったりしてみてください。

とはいえ同じく iOS 7 で追加された `snapshotViewAfterScreenUpdates` や`resizableSnapshotViewFromRect:～` をうまく利用しているものや、CATransform3D で三次元的なエフェクトを使っているものもあり、自分が実装する際の参考やたたき台として便利だとは思うので、ぜひ一度ビルドしてお試しいただければと思います。

##（2015.12.22追記）Core Image Transitions

**Core Image を利用したカスタムトランジションエフェクトクラス**を作成し、本サンプルにも11種類の実装例を追加しました。

![](https://github.com/shu223/AnimatedTransitionGallery/blob/master/gif/coreimage.gif?raw=true)

上のgifを見ると**クセがありすぎて使いづらい**、となりそうですが、下記のような

![](https://github.com/shu223/AnimatedTransitionGallery/blob/master/gif/motionblur.gif?raw=true)

（モーションブラー）

![](https://github.com/shu223/AnimatedTransitionGallery/blob/master/gif/boxblur.gif?raw=true)

（ボックスブラー）

等は、比較的いろいろなアプリで使い回しが効くのでは、と思います。

実装解説記事がこちらにあります。

<iframe src="//www.slideshare.net/slideshow/embed_code/key/buzdoMjk06nD7k" width="425" height="355" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe> <div style="margin-bottom:5px"> <strong> <a href="//www.slideshare.net/t26v0748/core-image-tips-tricks-in-ios-9" title="Core Image Tips &amp; Tricks in iOS 9" target="_blank">Core Image Tips &amp; Tricks in iOS 9</a> </strong> from <strong><a href="//www.slideshare.net/t26v0748" target="_blank">Shuichi Tsutsumi</a></strong> </div>

- [【iOS9】Core Imageを用いたリッチな画面遷移アニメーション](http://d.hatena.ne.jp/shu223/20151008/1444259843)

##参考

iOS7のカスタム画面遷移については、下記書籍に詳しい解説があります。

- [『上を目指すプログラマーのためのiPhoneアプリ開発テクニック iOS 7編』書評](http://d.hatena.ne.jp/shu223/20131220/1387517015)

<div class="amazlet-box" style="margin-bottom:0px;"><div class="amazlet-image" style="float:left;margin:0px 12px 1px 0px;"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4844335200/22301-22/ref=nosim/" name="amazletlink" target="_blank"><img src="http://ecx.images-amazon.com/images/I/41hs%2BPhSMqL._SL160_.jpg" alt="上を目指すプログラマーのためのiPhoneアプリ開発テクニック iOS 7編" style="border: none;" /></a></div><div class="amazlet-info" style="line-height:120%; margin-bottom: 10px"><div class="amazlet-name" style="margin-bottom:10px;line-height:120%"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4844335200/22301-22/ref=nosim/" name="amazletlink" target="_blank">上を目指すプログラマーのためのiPhoneアプリ開発テクニック iOS 7編</a><div class="amazlet-powered-date" style="font-size:80%;margin-top:5px;line-height:120%">posted with <a href="http://www.amazlet.com/" title="amazlet" target="_blank">amazlet</a> at 13.12.20</div></div><div class="amazlet-detail">加藤 寛人 西方 夏子 藤川 宏之 鈴木 晃 高丘 知央 <br />インプレスジャパン <br />売り上げランキング: 1,885<br /></div><div class="amazlet-sub-info" style="float: left;"><div class="amazlet-link" style="margin-top: 5px"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4844335200/22301-22/ref=nosim/" name="amazletlink" target="_blank">Amazon.co.jpで詳細を見る</a></div></div></div><div class="amazlet-footer" style="clear: left"></div></div>



<span class="deco" style="font-weight:bold;">iOS6.x以下でのカスタム画面遷移</span>については、拙著に実装方法としくみの解説を書きました。

- [『iOSアプリ開発 達人のレシピ100』という本を書きました](http://d.hatena.ne.jp/shu223/20130528/1369714635)


<div class="amazlet-box" style="margin-bottom:0px;"><div class="amazlet-image" style="float:left;margin:0px 12px 1px 0px;"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4798038180/22301-22/ref=nosim/" name="amazletlink" target="_blank"><img src="http://ec2.images-amazon.com/images/I/51QHUEMksZL._SL500_AA300_.jpg" alt="iOSアプリ開発達人のレシピ100―開発現場で実証された実用コード集" style="border: none;width: 110px;" /></a></div><div class="amazlet-info" style="line-height:120%; margin-bottom: 10px"><div class="amazlet-name" style="margin-bottom:10px;line-height:120%"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4798038180/22301-22/ref=nosim/" name="amazletlink" target="_blank">iOSアプリ開発達人のレシピ100―開発現場で実証された実用コード集</a></div><div class="amazlet-detail">堤 修一 <br />秀和システム <br />売り上げランキング: 60<br /></div><div class="amazlet-sub-info" style="float: left;"><div class="amazlet-link" style="margin-top: 5px"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4798038180/22301-22/ref=nosim/" name="amazletlink" target="_blank">Amazon.co.jpで詳細を見る</a></div></div></div><div class="amazlet-footer" style="clear: left"></div></div>



<span class="deco" style="font-weight:bold;">Core Image を使用したトランジションエフェクト</span>、なんてのもあります。こちらも拙著に詳細あり。

- [Core Image の遷移エフェクトを使う](http://d.hatena.ne.jp/shu223/20130311/1362962817)


<img src="http://cdn-ak.f.st-hatena.com/images/fotolife/s/shu223/20130313/20130313114246.gif" width="220">