【iOS Swift アニメーション入門 #8】CAGroupAnimationを使って、複数のアニメーションを組み合わせる

【iOS Swift アニメーション入門 #8】CAGroupAnimationを使って、複数のアニメーションを組み合わせる
■はじめに

CAAnimationGroupクラスを使用する。
これはCAAnimationクラスを継承しているので、
CAAnimationクラスのプロパティを使用できる。

 

使い方は簡単。
CAAnimation(やCABasicAnimation)でアニメーションを複数作成し、
CAAnimationGroupで作成したアニメーションを組み合わせる。

 

ここでは
・サイズのアニメーション
・回転のアニメーション
・透過のアニメーション
を組み合わせて、ImageViewをアニメーションさせる。

 

下記動画のようなアニメーションを作成する。

 

【実装】

サンプルプロジェクトはこちらからダウンロードしてください。

 

サンプルプロジェクトをダウンロードしたら、
下記ソース内の①〜⑤の処理を書く。

 

■おわりに

実装できたら実行してみる。
上記動画のようにアニメーションするはず。

うまく動作しない方はこちらから完成版サンプルをダウンロードして下さい。

■参考書籍
・アニメーションに関する数少ない日本語書籍
日本語の書籍があった。

iPhone/iPad グラフィックスプログラミング

・英語だけど内容豊富なアニメーションの書籍。

【Kindle版】iOSアニメーション専門書籍


Programming iOS 8: Dive Deep into Views, View Controllers, and Frameworks

【アニメーションはまだ難しいなと思った人向け書籍】
①iOSアプリ開発未経験の人向け
・iOSアプリ開発をはじめたとき最初に買った書籍
【アプリ作成未経験の人向け】
Storyboardを使って画面を作成していく。
手順にしたがって操作していくと、ボタンの作成やWebViewの作成などができる。
アプリって、こんな感じで作るんだというのを体験できる。

Swiftではじめる iPhoneアプリ開発の教科書 【iOS 8&Xcode 6対応】 教科書シリーズ

・わかりやすくていい、と聞いた本
立ち読みした感じだと【アプリ作成未経験の人向け】

絶対に挫折しない iPhoneアプリ開発「超」入門【Swift & iOS8.1以降 完全対応】

②を終えたくらいの知識の方向け
・アプリ開発独学中に2冊めに購入した書籍
プログラミング知識はなくても、若干理解するのに時間がかかる程度で、
読み進められるわかりやすさがある。


iPhoneアプリ開発塾

③中級者、上級者向け
詳解 Swift

【iOS Swift アニメーション入門 #6】アニメーション終了時に処理を実行する(コールバック)

【iOS Swift アニメーション入門 #6】アニメーション終了時に処理を実行する(コールバック)
■はじめに

CAAnimation(とそのサブクラス)のdelegateをセットすることで
アニメーションが終了したとき、アニメーションが始まったときに
コールバックを受け取ることができる。

 

下記2つのdelegateメソッドがある。
func animationDidStart(anim: CAAnimation!)
func animationDidStop(anim: CAAnimation!, finished flag: Bool)

 

ここではUIImageViewを画面右から画面内に移動するアニメーションをつくり、アニメーションが終了すると、UIImageViewをぶるっとさせる。
下記動画のようなアニメーションです。

 

①UIImageViewを画面右から画面内に移動するアニメーション
②アニメーションが終了すると、UIImageViewをぶるっとさせるアニメーションを作成

 

■実装

画像が右から左に移動するアニメーションを終了するところまで書いたサンプルプロジェクトはこちらからダウンロードしてください。

 

サンプルプロジェクトをダウンロードしたら、
下記ソース内の①〜⑤の処理を書く。

 

■おわりに

実装できたら実行してみる。
画像が画面内中央にくるとぶるっとするはずです。

 

うまく動作しない方はこちらから完成版サンプルをダウンロードして下さい。

 

■参考書籍

・アニメーションに関する数少ない日本語書籍
日本語の書籍があった。

iPhone/iPad グラフィックスプログラミング

 

・英語だけど内容豊富なアニメーションの書籍。

【Kindle版】iOSアニメーション専門書籍

 


Programming iOS 8: Dive Deep into Views, View Controllers, and Frameworks

 

【アニメーションはまだ難しいなと思った人向け書籍】

①iOSアプリ開発未経験の人向け
・iOSアプリ開発をはじめたとき最初に買った書籍
【アプリ作成未経験の人向け】
Storyboardを使って画面を作成していく。
手順にしたがって操作していくと、ボタンの作成やWebViewの作成などができる。
アプリって、こんな感じで作るんだというのを体験できる。

Swiftではじめる iPhoneアプリ開発の教科書 【iOS 8&Xcode 6対応】 教科書シリーズ

・わかりやすくていい、と聞いた本
立ち読みした感じだと【アプリ作成未経験の人向け】

絶対に挫折しない iPhoneアプリ開発「超」入門【Swift & iOS8.1以降 完全対応】

②を終えたくらいの知識の方向け
・アプリ開発独学中に2冊めに購入した書籍
プログラミング知識はなくても、若干理解するのに時間がかかる程度で、
読み進められるわかりやすさがある。


iPhoneアプリ開発塾

③中級者、上級者向け
詳解 Swift

【iOS Swift アニメーション入門 #7】実行中のアニメーションを終了する

【iOS Swift アニメーション入門 #7】実行中のアニメーションを終了する
■はじめに

下記動画のようにラベルが画面右から
画面中央に移動するアニメーションがある。

ユーザーに注目してもらいたいのでアニメーションをつけているが、
ユーザーが気づいたら、アニメーションは必要なくなる。

そんなときにアニメーションを終了したい。

 

どうするか?

 

アニメーション追加時に名前(キー)をつけておけるので、
アニメーションを終了したいイベント発生時にその名前で
アニメーションを取得し、終了させてあげればいい。

 

アニメーションは
CALayerの
removeAnimationForKey
メソッドでアニメーションを削除すれば、終了される。

 

ここでは上記動画にあるテキストフィールドをタップすると、
ラベルが右から左に移動するアニメーションを終了するように実装する。

 

【実装】

ラベルが右から左に移動するアニメーションを終了する処理を
入れる前のサンプルプロジェクトはこちらからダウンロードしてください。

 

サンプルをダウンロードしたら、
ソース内にある①〜③の処理を追加する。

 

①アニメーション追加時にキーをセット
②TextFieldタップ時のイベント取得
③TextFieldのデリゲート

 

 

■おわりに

実装できたら実行してみる。
テキストフィールドをタップするとアニメーションが終了し、
ラベルが中央に配置されるはずです。

うまく動作しない方はこちらから完成版サンプルをダウンロードして下さい。

 

■参考書籍

・アニメーションに関する数少ない日本語書籍
日本語の書籍があった。

iPhone/iPad グラフィックスプログラミング

・英語だけど内容豊富なアニメーションの書籍。

【Kindle版】iOSアニメーション専門書籍

 


Programming iOS 8: Dive Deep into Views, View Controllers, and Frameworks

 

【アニメーションはまだ難しいなと思った人向け書籍】
①iOSアプリ開発未経験の人向け
・iOSアプリ開発をはじめたとき最初に買った書籍
【アプリ作成未経験の人向け】
Storyboardを使って画面を作成していく。
手順にしたがって操作していくと、ボタンの作成やWebViewの作成などができる。
アプリって、こんな感じで作るんだというのを体験できる。

Swiftではじめる iPhoneアプリ開発の教科書 【iOS 8&Xcode 6対応】 教科書シリーズ

・わかりやすくていい、と聞いた本
立ち読みした感じだと【アプリ作成未経験の人向け】

絶対に挫折しない iPhoneアプリ開発「超」入門【Swift & iOS8.1以降 完全対応】

②を終えたくらいの知識の方向け
・アプリ開発独学中に2冊めに購入した書籍
プログラミング知識はなくても、若干理解するのに時間がかかる程度で、
読み進められるわかりやすさがある。


iPhoneアプリ開発塾

③中級者、上級者向け
詳解 Swift

【iOS Swift アニメーション入門 #4】Core AnimationのfillModeプロパティ

【iOS Swift アニメーション入門 #4】Core AnimationのfillModeプロパティ
■はじめに

Core AnimationのfillModeプロパティについて調べた。

 

kCAFillModeRemoved
(デフォルト)
アニメーション開始時、アニメーションの開始地点にフレーム表示。
アニメーション終了後にアニメーションを削除

 

kCAFillModeBackward
アニメーションが始まる前から、アニメーションの開始地点にフレームを表示する。
アニメーション終了後にアニメーションを削除

 

kCAFillModeForwards
アニメーション終了後、アニメーション終了地点にフレームが残る
自分でアニメーションを削除する。
※kCAFillModeForwardsはremovedOnCompletionプロパティをfalseにしないと有効にならない

 

kCAFillModeBoth
kCAFillModeBackward + kCAFillModeForwards
※kCAFillModeForwardsの部分はremovedOnCompletionプロパティをfalseにしないと有効にならない

 

kCAFillModeBackwardを試す。

■実装

場所名のラベルだけ遅れてアニメーションします。

・デフォルトのkCAFillModeRemovedの場合
こちらからサンプルをダウンロードし実行してください。

 

アニメーション開始前、元の位置に表示されている。

 

・kCAFillModeBackwardの場合

アニメーション開始前から、アニメーション開始地点にフレームを表示している。

 

下記の部分を追記する。
// ③アニメーションが始まる前から、アニメーションの開始地点にフレームを表示する。

 

■おわりに

できたら、実行してみる。
上にある動画と同じようになるはず。

 

ならなければ、下記から完成サンプルプロジェクトを
ダウンロードして試してみてください。

 

■参考書籍
・アニメーションに関する数少ない日本語書籍

日本語の書籍があった。

iPhone/iPad グラフィックスプログラミング

 

・英語だけど内容豊富なアニメーションの書籍。


【Kindle版】iOSアニメーション専門書籍


Programming iOS 8: Dive Deep into Views, View Controllers, and Frameworks

【アニメーションはまだ難しいなと思った人向け書籍】
①iOSアプリ開発未経験の人向け
・iOSアプリ開発をはじめたとき最初に買った書籍
【アプリ作成未経験の人向け】
Storyboardを使って画面を作成していく。
手順にしたがって操作していくと、ボタンの作成やWebViewの作成などができる。
アプリって、こんな感じで作るんだというのを体験できる。

Swiftではじめる iPhoneアプリ開発の教科書 【iOS 8&Xcode 6対応】 教科書シリーズ

・わかりやすくていい、と聞いた本
立ち読みした感じだと【アプリ作成未経験の人向け】

絶対に挫折しない iPhoneアプリ開発「超」入門【Swift & iOS8.1以降 完全対応】

②を終えたくらいの知識の方向け
・アプリ開発独学中に2冊めに購入した書籍
プログラミング知識はなくても、若干理解するのに時間がかかる程度で、
読み進められるわかりやすさがある。


iPhoneアプリ開発塾

③中級者、上級者向け
詳解 Swift

【iOS Swift アニメーション入門 #3】Core Animationでアニメーションを遅れて実行させる

【iOS Swift アニメーション入門 #3】Core Animationでアニメーションを遅れて実行させる
■はじめに

アニメーションを遅れて実行させる。

 

CABasicAnimationのbeginTimeプロパティを使用する。
このプロパティにどのくらい遅れて実行させるかをセットすればいい。

 

例えば、0.5秒遅れて実行させる場合、
moveToCenter.beginTime = CACurrentMediaTime() + 0.5
とする。

 

CACurrentMediaTimeは名前のとおり、
現在時刻を取得する。

 

↓下記サンプルの完成形。
一番下にある場所名ラベルだけ少し遅れてアニメーションが実行される。

 

■実装

サンプルはこちらからダウンロード

 

ダウンロードしたら、下記のviewDidAppear内の
// ①場所名ラベルは遅れて実行させる
moveToCenter.beginTime = CACurrentMediaTime() + 0.5
を追記する。

 

■おわりに

できたら、実行してみる。
上にある動画と同じようになるはず。

 

ならなければ、下記から完成サンプルプロジェクトを
ダウンロードして試してみてください。

 

■参考書籍
・アニメーションに関する数少ない日本語書籍

日本語の書籍があった。

iPhone/iPad グラフィックスプログラミング

 

・英語だけど内容豊富なアニメーションの書籍。


【Kindle版】iOSアニメーション専門書籍


Programming iOS 8: Dive Deep into Views, View Controllers, and Frameworks

【アニメーションはまだ難しいなと思った人向け書籍】
①iOSアプリ開発未経験の人向け
・iOSアプリ開発をはじめたとき最初に買った書籍
【アプリ作成未経験の人向け】
Storyboardを使って画面を作成していく。
手順にしたがって操作していくと、ボタンの作成やWebViewの作成などができる。
アプリって、こんな感じで作るんだというのを体験できる。

Swiftではじめる iPhoneアプリ開発の教科書 【iOS 8&Xcode 6対応】 教科書シリーズ

・わかりやすくていい、と聞いた本
立ち読みした感じだと【アプリ作成未経験の人向け】

絶対に挫折しない iPhoneアプリ開発「超」入門【Swift & iOS8.1以降 完全対応】

②を終えたくらいの知識の方向け
・アプリ開発独学中に2冊めに購入した書籍
プログラミング知識はなくても、若干理解するのに時間がかかる程度で、
読み進められるわかりやすさがある。


iPhoneアプリ開発塾

③中級者、上級者向け
詳解 Swift

【iOS Swift アニメーション入門 #2】Core Animationのアニメーションは使い回せる

【iOS Swift アニメーション入門 #2】Core Animationのアニメーションは使い回せる
■はじめに

Core Animationのアニメーションのオブジェクトは使いまわせる。

 

【iOS Swift アニメーション入門 #1】Core AnimationでView(のLayer)を移動するアニメーション
http://swift-studying.com/blog/swift/?p=1376
ではImageViewを移動するアニメーションを作成した。

 

このImageViewを移動するために作成したアニメーションは使わいますことができ、
同じようなアニメーションをしたいView(Layer)があれば、
ImageViewと同じようにアニメーションを追加してあげればいい。

同じアニメーションをViewのframeやcenterをいじってやろうとすると、
Viewによって、y位置が違った場合、少し面倒。

 

■実装

サンプルはこちらからダウンロード

 

ダウンロードしたら、下記のviewDidAppear内の
①countryLabelにアニメーションを追加
②placelLabelにアニメーションを追加
を実装する。

できたら、実行してみる。
上にある動画と同じようになるはず。

 

ならなければ、下記から完成サンプルプロジェクトを
ダウンロードして試してみてください。

 

■参考書籍

 

・アニメーションに関する数少ない日本語書籍

日本語の書籍があった。

iPhone/iPad グラフィックスプログラミング

 

・英語だけど内容豊富なアニメーションの書籍。


【Kindle版】iOSアニメーション専門書籍


Programming iOS 8: Dive Deep into Views, View Controllers, and Frameworks

 

【アニメーションはまだ難しいなと思った人向け書籍】

①iOSアプリ開発未経験の人向け
・iOSアプリ開発をはじめたとき最初に買った書籍
【アプリ作成未経験の人向け】
Storyboardを使って画面を作成していく。
手順にしたがって操作していくと、ボタンの作成やWebViewの作成などができる。
アプリって、こんな感じで作るんだというのを体験できる。

Swiftではじめる iPhoneアプリ開発の教科書 【iOS 8&Xcode 6対応】 教科書シリーズ

・わかりやすくていい、と聞いた本
立ち読みした感じだと【アプリ作成未経験の人向け】

絶対に挫折しない iPhoneアプリ開発「超」入門【Swift & iOS8.1以降 完全対応】

②を終えたくらいの知識の方向け
・アプリ開発独学中に2冊めに購入した書籍
プログラミング知識はなくても、若干理解するのに時間がかかる程度で、
読み進められるわかりやすさがある。


iPhoneアプリ開発塾

③中級者、上級者向け
詳解 Swift

【iOS Swift アニメーション入門 #1】Core AnimationでView(のLayer)を移動するアニメーション

【iOS Swift アニメーション入門 #1】Core AnimationでView(のLayer)を移動するアニメーション
■はじめに

UIViewの
class func animateWithDuration(_ duration: NSTimeInterval, animations animations: () -> Void)
などを使って、Viewをアニメーションさせることはできる。

 

CAAnimationクラスを使うともっといろいろなことができると聞き、
CAAnimationを勉強している。

 

まずは基本。
アニメーションを扱うクラスはいくつかある。
CAAnimation, CAKeyFrameAnimation, CABasicAnimationなど。
その中で基本となるのがCABasicAnimation。

 

ざっくりとした使い方は下記の通り。

①アニメーションするプロパティを指定し、CABasicAnimationクラスのオブジェクト作成
②アニメーションの初期値を指定する
③アニメーションの終了時の値を指定する
④アニメーションの時間を指定する
⑤アニメーションをlayerに追加する

 

非常に簡単な例ではあるが、CABasicAnimationを使用し、
ImageViewを画面外から画面中央に移動するアニメーションを作成する。

 

■実装

こちらからサンプルをダウンロードし、下記のviewDidAppear部分を実装していく。

 

■おわりに

完成後サンプルはこちらからダウンロードできます。

 

■参考書籍
・アニメーションに関する数少ない日本語書籍

日本語の書籍があった。

iPhone/iPad グラフィックスプログラミング

 

・英語だけど内容豊富なアニメーションの書籍。


【Kindle版】iOSアニメーション専門書籍


Programming iOS 8: Dive Deep into Views, View Controllers, and Frameworks

 

【アニメーションはまだ難しいなと思った人向け書籍】
①iOSアプリ開発未経験の人向け

・iOSアプリ開発をはじめたとき最初に買った書籍

【アプリ作成未経験の人向け】
Storyboardを使って画面を作成していく。
手順にしたがって操作していくと、ボタンの作成やWebViewの作成などができる。
アプリって、こんな感じで作るんだというのを体験できる。

Swiftではじめる iPhoneアプリ開発の教科書 【iOS 8&Xcode 6対応】 教科書シリーズ

・わかりやすくていい、と聞いた本
立ち読みした感じだと【アプリ作成未経験の人向け】

絶対に挫折しない iPhoneアプリ開発「超」入門【Swift & iOS8.1以降 完全対応】

②を終えたくらいの知識の方向け
・アプリ開発独学中に2冊めに購入した書籍
プログラミング知識はなくても、若干理解するのに時間がかかる程度で、
読み進められるわかりやすさがある。


iPhoneアプリ開発塾

③中級者、上級者向け
詳解 Swift

【iOS Swift入門 #211】CALayerの影に関するプロパティを操作する

【iOS Swift入門 #211】CALayerの影に関するプロパティを操作する
■はじめに

CALayerを使ったアニメーションを勉強中。

日本語の書籍があった。

iPhone/iPad グラフィックスプログラミング

CALayerの基本的な操作である影に関するプロパティを操作する。

CALayerの影に関するプロパティは下記5つ。

【影の変更前】

swift210_001

 

①shadowOffset

影をつける。CGSizeで指定。
CGSize(width:10, height:10)なら、Viewの位置から右に10pt、下に10ptずらして影が作られる

swift210_002

 

②shadowOpacity

影の濃さ。
デフォルトが0.0(透明)なので、影をつける場合、必ずこのプロパティを0.1以上にする

swift210_003

 

③shadowPath

影のパス
UIBezierPathなどで描き、影にセットできる

swift210_004

 

④shadowRadius

影をぼやけさせる。
0から離れるほど、影がぼやける

swift210_005

 

⑤shadowColor

影の色。初期値は黒。CGColorで指定することに注意。

swift210_006

 

■おわりに

ドラッカーの本は難しくてなかなか理解できませんでしたが、
これはよくかみくだいてわかりやすくなっていました。


ドラッカーさんに教わったIT技術者が変わる50の習慣

【参考情報】
①iOSアプリ開発未経験の人向け
・iOSアプリ開発をはじめたとき最初に買った書籍
【アプリ作成未経験の人向け】
Storyboardを使って画面を作成していく。
手順にしたがって操作していくと、ボタンの作成やWebViewの作成などができる。
アプリって、こんな感じで作るんだというのを体験できる。

Swiftではじめる iPhoneアプリ開発の教科書 【iOS 8&Xcode 6対応】 教科書シリーズ

・わかりやすくていい、と聞いた本
立ち読みした感じだと【アプリ作成未経験の人向け】

絶対に挫折しない iPhoneアプリ開発「超」入門【Swift & iOS8.1以降 完全対応】

②を終えたくらいの知識の方向け
・アプリ開発独学中に2冊めに購入した書籍
プログラミング知識はなくても、若干理解するのに時間がかかる程度で、
読み進められるわかりやすさがある。


iPhoneアプリ開発塾

③中級者、上級者向け
詳解 Swift

【楽天ブックス】で見る方は
こちら

③その他
その他もろもろ

【iOS Swift入門 #209】UINavigationControllerの画面遷移をカスタムする

【iOS Swift入門 #209】UINavigationControllerの画面遷移をカスタムする

■はじめに
UINavigationControllerの画面遷移をカスタムする。
遷移先の画面が上から表示。
戻るときは画面が下から上に消えていく。

サンプルの完成形は↓の動画のとおり。

基本を学べば、いろいろな画面遷移を作れるようになると思います。

■実装
1. サンプル用スタートプロジェクトをダウンロードする

2. 画面遷移に使用するAnimatorクラスの作成
①NSObjectのサブクラスとして作成する。名前はAnimatorとした。
②UIViewControllerAnimatedTransitioningのデリゲートをクラスに追加

③画面遷移に利用するプロパティを追加

④UIViewControllerAnimatedTransitioningのデリゲートメソッドを実装

3. ViewControllerの実装
①ViewController.swiftでUINavigationControllerDelegateを採用する

②画面遷移アニメータークラスをプロパティで保持

③NavigationControllerのdelegateに自身をセット

④UINavigationControllerDelegateのメソッドを実装する

4. ここまで正しく実装できているか確認
①デバイスかエミュレータでデバッグ起動

まだ、Animatorクラスで画面遷移の内容を書いていないので、
NavigationBar以外は、画面に変化がないことを確認する。
swift209_001

swift209_002

5. Animatorクラスで画面遷移の内容を書く
animateTransitionメソッドを実装する。

6. デバッグ実行
記事はじめにある動画のような画面遷移が行われます。

うまくいかない場合、サンプルをアップしていますので、
ダウンロードして確認して下さい。

■おわりに

僕が18年勤めた会社を辞めた時、後悔した12のこと

【参考情報】
①iOSアプリ開発未経験の人向け
・iOSアプリ開発をはじめたとき最初に買った書籍
【アプリ作成未経験の人向け】
Storyboardを使って画面を作成していく。
手順にしたがって操作していくと、ボタンの作成やWebViewの作成などができる。
アプリって、こんな感じで作るんだというのを体験できる。

Swiftではじめる iPhoneアプリ開発の教科書 【iOS 8&Xcode 6対応】 教科書シリーズ

・わかりやすくていい、と聞いた本
立ち読みした感じだと【アプリ作成未経験の人向け】

絶対に挫折しない iPhoneアプリ開発「超」入門【Swift & iOS8.1以降 完全対応】

②を終えたくらいの知識の方向け
・アプリ開発独学中に2冊めに購入した書籍
プログラミング知識はなくても、若干理解するのに時間がかかる程度で、
読み進められるわかりやすさがある。


iPhoneアプリ開発塾

③中級者、上級者向け
詳解 Swift

【楽天ブックス】で見る方は
こちら

③その他
その他もろもろ

【iOS Swift入門 #207】CAShapeLayerで円を描く。くるくるする

【iOS Swift入門 #207】CAShapeLayerで円を描く。くるくるする

■はじめに

CAShapeLayerは図を描き表示するためのCALayer。
図を書くため、下記(一部)各種プロパティが用意されている。

path 図の輪郭
lineWidth 輪郭(path)の太さ
lineDashPattern 輪郭(path)を点線にするときの点線のパターン
strokeColor 輪郭(path)の色
fillColor pathの中の色

このCAShapeLayerを利用して円を描く。
で、くるくるするところまで作成する。

 

■例:円を描く

新規プロジェクトを作成し、ViewController.swiftの
viewDidLoad:を下記を追記してみる。

swift207_001

 

■例:輪郭の線を点線にする

swift207_002

 

■例:輪郭の線をアニメーションする

swift207_003

おわり。

 

【参考情報】

①iOSアプリ開発をはじめたとき最初に買った書籍の最新版

Swiftではじめる iPhoneアプリ開発の教科書 【iOS 8&Xcode 6対応】 教科書シリーズ

②iPhoneアプリ開発が初めての人。XcodeとSwift入門ならここ
絶対に挫折しない iPhoneアプリ開発「超」入門【Swift & iOS8.1以降 完全対応】

③中級者、上級者向け
詳解 Swift

【楽天ブックス】で見る方は
こちら

③その他
その他もろもろ