画面切替え時の視覚効果が楽しい。

こんばん！v(^-^)v

前回は、なんとか画面の切り替えができました。

緑とピンクの画面がパッ、パッとかわっていました。

せっかくのiPhoneもっと華麗に画面切替えをしたい。

当然ですね。

では元の緑の画面のボタンのイベント（アクション）の部分に以下のようなコードを書きます。
赤枠の部分が追加部分です。

追加したコード↓↓↓↓↓
[UIView beginAnimations:@"flipping view" context:nil];
[UIView setAnimationDuration:1];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
[UIView setAnimationTransition:UIViewAnimationTransitionCurlUp
forView:self.view cache:YES];
[UIView commitAnimations];

[Animation duration] （アニメーション時間）
　1秒 を設定

[Animation curve]（アニメーションカーブ）
UIViewAnimationCurveEaseInOut　を設定

[Animation transition type] （アニメーション遷移タイプ）
UIViewAnimationTransitionCurlDown を設定

これを書いて実行してみます。


緑の画面がピラーッとめくれて、
下のピンクの画面が現れます！
すごいですw


ピンクの画面のボタンを押したときにまたアニメーションを表示させる為に、
イベント（アクション）の部分に以下のようなコードを書きます。
赤枠の部分が追加部分です。


追加したコード↓↓↓↓↓
[UIView beginAnimations:@"flipping vieaaw" context:nil];
[UIView setAnimationDuration:1];
[UIView setAnimationCurve:UIViewAnimationCurveEaseIn];
[UIView setAnimationTransition: UIViewAnimationTransitionCurlDown
forView:self.view.superview cache:YES];
[UIView commitAnimations];

上にあった緑の画面がピラーッとかぶさってきて画面が切り替わりますw
この貼付けた画像は上のとよく似てるけど、押したボタンが青く色が変わってるのわかりますね。実際動かしてみてくださいな。


UIViewAnimationCurveには4種類あり、
下の様に指定するとそれぞれ違った動きをします。お試しあれです。
UIViewAnimationCurveEaseInOut　　　　　 ゆっくり始まって徐々に加速し、中盤から減速
UIViewAnimationCurveEaseIn　　　　 ゆっくり始まり、徐々に加速
UIViewAnimationCurveEaseOut　　　　 速く始まり、徐々に減速
UIViewAnimationCurveLinear　　　 等速度

IViewAnimationTransitionには5種類あり、
アニメーションの遷移方法が指定できます。お試しあれです。
UIViewAnimationTransitionNone　　　　　指定無し
UIViewAnimationTransitionFlipFromLeft　　　　　中央の垂直軸中心に右回転で遷移
UIViewAnimationTransitionFlipFromRight　　　　　中央の垂直軸中心に左回転で遷移
UIViewAnimationTransitionCurlUp　　　　　下から上にカールして遷移
UIViewAnimationTransitionCurlDown　　　　　上から下にカールして遷移

ちなみに、UIViewAnimationTransitionFlipFromLeft　にすると、こんな感じになりました！


なかなかおもろいですね(o^-')b


にほんブログ村

　＞　アラートとか画面の遷移とかやってみる！
　＞　アラートはできたので、画面切り替えやってみる！
　＞　画面切り替えの続き！
　＞　画面切替え時の視覚効果が楽しい。（★この記事★）
　＞　続いて画面間のデータ渡しをやってみる。
　＞　データの受け渡し苦戦中・・・
　＞　 画面間のデータ渡しの続き
　＞　解決は突然に。

画面切り替えの続き！

はい、前回は必要なファイルの追加をしましたね。

・SecondViewController.m
・SecondViewController.h
・SecondView.xib

この３つでした。

SecondView.xib　から触っていく事にします。


SecondView.xibをダブルクリックしてInterface Builderから編集します。

SecondView.xibウィンドウで、［File's Owner］項目を選択し、Identity Inspectorウィンドウで、この項目のクラスを下の図の様に、SecondViewControllerに設定します。



次に下の様に［File's Owner］項目を［View］項目へ青い線を接続します。その時に黒い選択リストからViewを選択します。


では、［View］項目をダブルクリックして背景色を適当に変更し、ボタンを追加しましょ。


SecondViewController.h　に下の様に宣言しましょう。


　　　-(IBAction) btnReturn:(id) sender;
　の部分を追加しました。

で、もう一度Interface Builderに戻り、追加したボタンを［File's Owner］に右クリックで接続し、btnReturnを選択します。


それでは、中身を書いていきますが、これもまだまだ勉強途中なので、
詳しい説明はできませんので、あしからず。。。。
とりあえず動くものをつくるスタンスです。

最初に作った[MultiVIewViewController.m]を次の様に変更します。
ボタンをクリックした時の処理を、次の様に変更します。

　secondViewController = [[SecondViewController alloc]
　　　initWithNibName:@"SecondView"
　　　bundle:nil];
　[self.view addSubview:secondViewController.view];
の部分です。//**** の下かから //****までを追加しました。
前に実装した部分は、コメントアウトしました。


このファイル[MultiVIewViewController.m]の上の方に、下のように青枠で囲まれたコードを入力します。



「SecondViewController.m」では下の様に
　[self.view removeFromSuperview];　ち追加します。
これによって、2つ目のビューを削除し、表示を消し、前のビューが見えるようにしています。


全部ちゃんと保存することを忘れない様にして。
ここまで書いたら実行します！


起動直後はこんな感じ、これは前と同じですね。


そこで、ボタンをおしましょう。
すると、

はい、切り替わりました！(^∇^)

同じ様に、このピンクの画面のボタンを押すと元の緑の画面に戻りました。

なんとか、動きましたけど、いろいろ苦労しました。。

皆さんやるときは、保存を確実に・・・。


にほんブログ村

　＞　アラートとか画面の遷移とかやってみる！
　＞　アラートはできたので、画面切り替えやってみる！
　＞　画面切り替えの続き！（★この記事★）
　＞　画面切替え時の視覚効果が楽しい。
　＞　続いて画面間のデータ渡しをやってみる。
　＞　データの受け渡し苦戦中・・・
　＞　 画面間のデータ渡しの続き
　＞　解決は突然に。

アラートはできたので、画面切り替えやってみる！

前回はアラートの表示をしたので、次は画面の切り替えをやってみたいと思います。o(^-^)o

仕組みというか動きとしては、新しい画面を用意しておいて、

なんらかのアクションでその画面を表示（切り替え）という感じです。

そうですね。予想通りです。

ではでは、必要なファイルを追加していきましょう。

まず、Xcodeで下の図のようにClassesグループを右クリック、新しいファイル...を選択。


次に下のような画面がでてくるので、
Cocoa Touch Classesグループを選択、UIViewController subclassテンプレートを追加します。


この新規追加したView Controllerに「SecondViewController.m」という名前を付けました、


画面を作るのはInterface Builderなんで、新しいビューのXIBファイルを追加します。
これも結構序盤で説明したけど、もう一度。
XcodeでResourcesの右クリックから新しいファイルを追加します。

User Interfacesグループを選択し、View XIBテンプレートを選択。


ちなみに、このファイルには「SecondView.xib」という名前を付けました。


はい、以下が追加されたファイルです。
「SecondViewController.m」を追加した時に、「SecondViewController.h」も自動で追加されたと思うので、
合計３つ追加されましたね。

　＞　アラートとか画面の遷移とかやってみる！
　＞　アラートはできたので、画面切り替えやってみる！（★この記事★）
　＞　画面切り替えの続き！
　＞　画面切替え時の視覚効果が楽しい。
　＞　続いて画面間のデータ渡しをやってみる。
　＞　データの受け渡し苦戦中・・・
　＞　 画面間のデータ渡しの続き
　＞　解決は突然に。