LIFULL Creators Blog

LIFULL Creators Blogとは、株式会社LIFULLの社員が記事を共有するブログです。自分の役立つ経験や知識を広めることで世界をもっとFULLにしていきます。

Simple Example : ビューを回転させる

というわけで「難しいサンプルはわかんないから、肝心な点だけ書きます」がモットーのSimple Example第3弾は「ビューを回転させる」です。なんのことだ、と問われれば「下の動画を観てください」と答えましょう。

f:id:nextdeveloper:20140130093222g:plain

Rotateというボタンを押すたびに、上半分の画像がくるくる回りながら入れ替わるわけです。こういうことやりたいことありますよね?ね?ね?(ウザい)

このように3Dの効果をつけながら、画面を丸ごとTransitionさせる、というサンプルもあるのですが、ここでは「画面の一部のビューだけ入れ替える」方法について説明します。ソースはgithubに置きました。

起動すると表示される画面を作っているのはViewControllerクラスです。でもって上半分のくるくる回るところはTransitionViewというクラスにまとめてあります。"Rotate"というボタンを押すたび、TransitionViewに対して

[_transitionView changeViewType:@"cube" subtype:kCATransitionFromLeft duration:1.0];

とmethodが呼ばれるわけです。ではTransitionViewの中では何をしているか。

呼ばれるのはこのコードです。実際にViewを入れ替えているのは

[ self exchangeSubviewAtIndex:secondIndex withSubviewAtIndex:firstIndex];

なのですが、それに対してLayerにanimationをつけています。やっていることはこれだけ。

ここでAnimationには様々なパラメータを指定することができます。CATransition *animationに渡しているtype,subtypeを変えることにより様々な視覚効果を得ることができる。設定可能なパラメータ(Stackoverflowからのコピーですが)はViewController.mの-(void) rotate:(id)senderに列挙しておきましたので、あれこれ変更して効果を確認してみてください。

もちろん「プログラムを使う側」からすれば、ここらへん全部別々のボタンにしておいたほうがいいのですが、そうすると読む時にボタンのコードだらけになり「あれ、どこに肝心な部分があるの?」とわからなくなる。ですからあえてボタンを設定していないのでした。手抜きではないのです(半分真顔)