はじめてのiOSアプリ開発

ラベルのテキストの変更にアニメーションをつけてみよう

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
色の名前が変わるときにもアニメーションをつけて、スムーズにラベルの内容が切り替わるようにしてみましょう。
講師:
07:31

字幕

このレッスンでは 色の名前が変わる時に アニメーションをつける方法について 説明したいと思います 現在 ここまで作ってきて アプリケーションが色の名前を 表示できるようになっていますが 画面をクリックする度に この色の名前が ものすごくパッと変わってしまって アニメーションが付いていないことが 分かると思います プログラムのコードも 見ていただきたいのですが この「 changeColor 」の中の 以前 背景色をセットするために アニメーションをつけて これを行うようにするために 「 UIView animateWithDuration:2.0 」を 使っていましたが これが色の名前には反映されていません これは 考えてみたら 分かることかもしれませんけれども この文字をアニメーションさせる ということは どうやってアニメーションをさせれば良いのか ということを考えると 結構難しいということが分かると思います 文字を一旦 ボワッと消せばよいのか となりますけれども 文字に対して直接 アニメーションするというのは なかなか難しい作業です ですので ここでは― このテキストをきれいに アニメーションさせたいのですけれども このテキストの文字列を変える ということに対して アニメーションさせることはできません じゃあ その代わりに何をするのかと言うと テキストを一旦透明にして 消して そして その後 文字列を変更した後で また 色の透明度を元に戻す という風に 色の透明度を変える ということを アニメーションさせます 実際にやってみたいと思います ここの背景色の色のセットは 2 秒間かけてここでやっているのですけれども これとは別に 下の方に 「 UIView animateWithDuration 」を 別にまた用意します 今度はこの2.0 秒よりも 短めにやってみましょう 例えば 1.0 秒で このアニメーションの― 「 colorNameLabel 」に対して 透明度をセットするという メソッドを呼び出します 今まで使ったことのない メソッドなんですけれども 「 setAlpha 」 この Alpha というのが 透明度のことを表します この Alpha は 0.0 が完全な透明です そして 1.0 が完全な不透明です ラベルが表示されている デフォルトの状態は 1.0 になっているのですけれども これを「 setAlpha:0.0 」と 書くことで このラベルは徐々に透明になっていきます では 一度 この状態で 1.0 秒かけて アニメーションするようになったことを 確認しておきましょう では アプリケーションを もう一度 実行します ちょっと分かりにくいかも しれませんけれども 今 画面が切り替わったところで このアニメーションが 1.0 秒かけて 0.0 の Alpha 値に 透明になったことが分かると思います 直ぐに消えてしまいますけど こんな感じです このアニメーションを 更に元に戻すために この「 1.0 」秒の後に 1 秒後に 更に1秒かけて 1.0 に戻す というアニメーションを更に書きます そこで ちょっとしたトリックなのですけれど ここの「 animations 」と書いてある所に } を 1 つ入れて この後ろに 「 completion 」というのを挟むと この様に アニメーションが終わった直後に 実行することができるソースコードを ここに書くことができます 今 } が 1 つ多く入ってしまったので これを消します ここの UIView の 1.0 秒間の アニメーションが終わった後 更に 1 秒間のアニメーションを してください と書くために また UIView animateWithDuration を 更にこの中に続けて こうやって書くことができます 先ほどはこの「 setAlpha 」を使って 完全に透明にしてください 1 秒間かけて とお願いしていましたが 今度は「 self.colorNameLabel 」に対して この「 setAlpha 1.0 」を呼び出して 完全な不透明にしてください と言って 呼び出すことができます 今は animateWithDuration という名前が長いので 複雑なソースコードに 見えるかもしれませんが 名前が長いことを除けば 2 秒かけて背景の色を変えてください とお願いしている所と 1 秒かけて 色の名前のラベルを透明にしてください 更に 1 秒かけて色の名前のラベルを 1.0 の不透明度にしてください ということで セットしています この色の名前が 完全に 0.0 になった瞬間に 今度は この色の名前を変える ということをすれば きれいにアニメーションできますので この「 completion 」のブロックの中 これは今 背景色の変更する すぐ上の所に「 colorNameLabel 」と言う テキストのセットを置いていますけれど このテキストのセットをカットします コマンド + X でカットします そして カットしたものを この「 completion 」の コードのすぐ下の所に コマンド + V でペーストして 再びこの Alpha 値をセットする アニメーションが始まる直前に 「 colorNameLabel 」のテキストを変える これは上の方の 0.0 にした「 setAlpha 」で 完全な透明になって 今 ラベルが見えなくなっていますから ラベルが見えなくなった瞬間を狙って 色の名前を変更します また それを 1.0 秒かけて 徐々に表示させる ということをするわけです では 一度これで実行しておきましょう するとこの様に 起動した瞬間に 色の名前が変わって 「若草色」になりました では 次に画面をタップします そうすると 1 秒間経って 「天色」に変わり 更に 1 秒間経って 「紅紫」に変わり という感じで 1 秒間で透明にするということと 更に不透明に戻すということが 色の名前をスムーズに変更する ということの アニメーションで実現できていることが 分かると思います このレッスンでは 色の名前が変わるときにも アニメーションを付ける方法について 説明しました

はじめてのiOSアプリ開発

このコースではXcodeを使ったiOS用アプリの開発に必要な基礎知識を学びます。Xcodeの基本的な使い方から本格的なゲーム制作のためのSprite Kitを用いた制作方法まで、カウントダウンタイマーやスピード暗算ゲームなど3つの簡単なiOS用アプリを作りながら説明します。このコースを見れば、本当に必要なアプリ開発の知識を着実に身に付けられるでしょう!

5時間55分 (52 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年06月04日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。