*

Objective-C(Xcode)でイメージのアニメーション表示を行う。

公開日: : Objective-C ,


スポンサードリンク



「Xcode5でイメージ(画像)を表示&操作する[後編]」では画面に表示されているイメージをタップした時の動作を実装しました。

今回はアニメーションを取り扱います。
利用しているXcodeはXcode5(5.1)となります。

本エントリーは以下の内容となります。

  1. 作成するiPhoheアプリの説明
  2. アニメーション関連のAPIの説明
  3. アニメーション処理の実装

 

1 作成するiPhoneアプリの説明

画面構成は「Xcode5でイメージ(画像)を表示&操作する[後編]」と全く同じです。
「Xcode5でイメージ(画像)を表示&操作する[後編]」では、
イメージをタップすると数値が変化していくとの動作を実装しましたが、
今回は、イメージをタップするとアニメーション処理が開始され、
再びイメージをタップするとアニメーション処理が停止するとの動作となります。

よくあるスロットの動きですね、イメージの表示部分は1つで、イメージ自体をボタンにしてますが。

とりあえずタップする前は以下の様な画面イメージとなります。
スクリーンショット 2014-04-08 14.20.47

この動きに加えて、アニメーションが開始されているかどうかを識別できるように
アニメーション処理時と、停止時で背景色を変化させます。

アニメーション処理と背景色を変える以外のところまで、完成しているプロジェクトはこちらとなりますので、ダウンロードし、解凍後にXcodeで開いてください。
UiImageViewSample

今後は、このプロジェクトを対象に作業を行います。

2 アニメーション関連のAPIの説明

アニメーションの開始と終了、及び状態確認API

開始API

– (void)startAnimating

終了API

-(void)stopAnimating

状態確認API

アニメーション処理が開始しているか判定、開始している場合YESを返却します。
-(BOOL)isAnimating

アニメーション処理の動作設定様のプロパティ

アニメーション処理ですから、複数のイメージを指定する必要があります。
あとは繰り返し回数、各イメージの切り替わる時間(秒)の指定
ユーザのタップを検知するかどうかの設定等があります。
ユーザのタップはデフォルトでは検知しないとなっていますので注意が必要です。
あ!、「Xcode5でイメージ(画像)を表示&操作する[後編]」でも同じことを書いて
変更しているので、本プロジェクトでは設定不要ですね・・・

複数のイメージ指定プロパティ

イメージの配列を引数に指定します。
animationImages

繰り返し回数指定プロパティ

animationRepeatCount

各イメージの切り替わる時間の指定プロパティ

animationDuration

ユーザのタップを検知するかどうかの指定プロパティ

userInteractionEnabled

3 アニメーション処理の実装

現在のプロジェクトの状況の確認

ダウンロードし、Xcodeで開いた状態のプロジェクトを確認してみます、

まずは実行してみます。すると以下の画像が表示されると思います。
スクリーンショット 2014-04-08 14.46.02

次に、数字のイメージをタップしてください。
すると、画面が・・・、何も変わりません。
Xcodeのコンソールにログが出力されるはずです。
スクリーンショット 2014-04-08 14.48.26

これだけです。

ImageViewの各種プロパティの指定

各種プロパティはViewController.mのviewDidLoadで指定します。

ViewController.mのviewDidLoadでimageArrayには5個のイメージの文字列から生成したUIImageの配列をセットしています。
これは、「Xcode5でイメージ(画像)を表示&操作する[後編]」と同じにしたかったのですが、UIImageの配列じゃないとだめなので・・・
imageArrayプロパティの意味が殆どなくなってますね・・・

animationRepeatCount(繰り返し回数)は無限に繰り返したいので0を指定します。
(0を指定すると無限に繰り返します。)

animationDuration(イメージの切り替わる時間)は0.1秒とします。

ImageViewの各種プロパティの指定後のviewDidLoad

残りの処理の実装

アニメーションの開始処理の追加

処理はViewController.mに既に存在するtouchesBegan:withEvent:に記述します。

とはいえ、アニメーションの開始もイメージのタップ時、
アニメーションの終了もイメージのタップ時なので
touchesBegan:withEvent:の中で分岐が必要です。

そこでisAnimatingメソッドの登場です。
処理追加後のViewController.mのtouchesBegan:withEvent:は以下のようになりました。

アニメーションの終了処理の追加

敢えて説明することはないと思います。
処理追加後のViewController.mのtouchesBegan:withEvent:は以下のようになりました。
 

アニメーションが開始している時の背景色の変更

アニメーション処理中は[UIColor darkGrayColor]
それ以外は[UIColor blackColor]を背景色にセットします。
処理追加後のViewController.mのtouchesBegan:withEvent:は以下のようになりました。

予定していた機能(と言える程では・・・)が全て実装できたので実行してみます。

思った通りに動作してます。
アニメーション動作中の画面は以下のようになりました。
スクリーンショット 2014-04-08 17.08.07

画像じゃ動きは分からないですね・・・

実装完了後のプロジェクトもアップしておきます。
UiImageViewSample

「Objective-C(Xcode)でイメージのアニメーション表示を行う。」は以上です。


スポンサードリンク

Googleアドセンス

Googleアドセンス




関連記事

Xcodeの使い方[ツールバー]

Xcode5(iOS7対応バージョンの統合開発)の「ツールバー」の使い方のエントリーとなります。

記事を読む

Xcode6&Objective-Cにおけるブロック構文(Blocks記法)の利用方法

Xcode&Objective-CにおけるBlock構文の説明のエントリーとなります。 B

記事を読む

Xcode5の「Auto Layout」機能の使い方[Pin制約の設定方法]

「基礎知識と制約(Align:アライメント)の設定方法」に引き続き、「Auto Layout」に必要

記事を読む

Xcode5&Objective-CでUITableViewでUINibを使ったカスタムセル(UITableViewCell)を利用する方法

本エントリーでは、Xcode5のテーブルビューにUINibを使ったカスタムセル(UITableVie

記事を読む

Xcode5で画面コンポーネント(UIコンポーネント)配置して利用するための基本

iOSアプリケーションは当然ですが、画面がありますよね。 言わずもがなですが、iOS向けのアプ

記事を読む

Xcodeのナビゲーションコントローラの使い方[「Single View Application」テンプレートからナビゲーションコントローラを利用する方法]

「Master-Detail Application」テンプレートを利用すれば、始めから「ナビゲーシ

記事を読む

Xcode5の「Auto Layout」機能の使い方[制約の編集方法]

Xcode5の「Auto Layout」機能の使い方と Xcode5の「Auto Layout

記事を読む

Xcode5で画面にナビゲーションバーを配置して利用する。

今回は「ナビゲーションバー」をiPhoneアプリの画面に配置して利用する方法を記載させていただきます

記事を読む

Xcode5を軽快に利用するためのショートカット[基本編]

「Xcode5のエディタエリアの説明 」 「Xcode5のエディタエリアの説明 [中編]」 「X

記事を読む

Xcode(Objective-C)のデリゲートとプロトコルの使い方[前編]

Xcode(Xcode5でも同様)でアプリ開発をしていて、少し複雑な事をしようとするとデリゲートと言

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

動画で英語を学習できるiOSの無料アプリCapTubeをリリースいたしました。

個人では初となるiOSアプリをリリースいたしました。 何度もリジ

no image
Ruby on rails4系でBootstrapを利用するためのtips

MacでRuby on rails4系のBootstrapを利用しよう

no image
Java、Eclipse、JUnit関連のエントリーの移行のお知らせ

Java、Eclipse、JUnit関連のエントリーは http:/

iOS8開発者向けお勧め本紹介[詳細! Swift iPhoneアプリ開発 入門ノート Swift 1.1+Xcode 6.1+iOS 8.1対応]

iOS7開発者向けお勧め本紹介を以前に紹介させていただきまいたが、今回

Swift入門(Xcode6のXCTestフレームワークで学ぶ) 第二回「関数(メソッド)とクロージャーの利用方法」

前回はSwiftの概要をザックリと説明させていただきました。 今

→もっと見る

Optimization WordPress Plugins & Solutions by W3 EDGE
PAGE TOP ↑