swift study vol.4
TRANSCRIPT
Swift Study vol.4Created by Nagamine Hiromasa @web_chiro
Swift 勉強会iOSアプリを開発してみたいSwiftってどういうもの？
など、Swiftに興味を持っている人向けに勉強会を開いています。
今日の目標アニメーションがどう実現されるのかを知るアニメーションを実装できるようになる複数のアニメーションやジェスチャーを使ってバリエーションを増やす
iOSアニメーションについてアニメーションはどういうところで使われているのか
Animation TutorialLoading, Progressメニューリスト画面の遷移
ゲーム
Agenda1. 基本的なアニメーション2. UIKitアニメーション3. CoreAnimation4. Gestureを組み合わせる5. まとめ
必要な物1. Mac2. Xcode 6.3.13. インターネット環境
1. 基本的なアニメーション
今回は基本的なアニメーションとして ４つのアニメーションを中心にやっていきます
拡大・縮小・消失・移動
アニメーションを実装する方法
アニメーションを実装する方法はいくつかありますがUIKitのクラスメソッドを使う方法がとても簡単です。
2. UIKitアニメーション
UIKitにデフォルトで提供されるアニメーション機構拡大・縮小・回転・移動などを簡単・直感的に実装できる
アニメーションを実装する方法
UIKitには次のようなクラスメソッドが定義されています。
// アニメーションだけを行うメソッド UIView.animationWithDuration:animation:
// アニメーションを実行した後の処理も記述できるメソッド UIView.animationWithDuration:animation:completionBlock:
どれくらいの時間(duration)でどのようなアニメーション(animation)を実行し
終わった後に最後の処理(completionBlock)を実行する
Example // あらかじめ変化前の状態を設定しておく (from)
// 100 x 100 のビューを生成 var _animationView:UIView! = UIView(frame: CGRectMake(0, 0, 100, 100))
// ビューの色を青に設定 _animationView.backgroundColor = UIColor.blueColor()
self.view.addSubview(_animationView)
// アニメーション UIView.animateWithDuration(1.0, animations: { () -> Void in // ここにアニメーションの変化後の状態を設定する (to) // 200x200のサイズにアニメーションさせる _animationView.frame.size = CGSizeMake(200, 200) }){ (isTrue) -> Void in
拡大・縮小
// 100 x 100 のビューを生成 var _animationView:UIView! = UIView(frame: CGRectMake(0, 0, 100, 100))
// ビューの色を青に設定 _animationView.backgroundColor = UIColor.blueColor()
self.view.addSubview(_animationView)
// アニメーション UIView.animateWithDuration(1.0, animations: { () -> Void in // 横幅を２倍に設定 _animationView.frame.size.width = 200 // 高さを２倍に設定 _animationView.frame.size.height = 200 }){ (isTrue) -> Void in // アニメーションビューの初期化
拡大・縮小
消失
// 100 x 100 のビューを生成 var _animationView:UIView! = UIView(frame: CGRectMake(0, 0, 100, 100))
// ビューの色を青に設定 _animationView.backgroundColor = UIColor.blueColor()
self.view.addSubview(_animationView)
// アニメーション UIView.animateWithDuration(1.0, animations: { () -> Void in // ビューを透明に _animationView.alpha = 0.0 }){ (isTrue) -> Void in // アニメーションビューの初期化 // 親ビューからビューを削除 (add <-> remove) _animationView.removeFromSuperview()
消失
移動
// 100 x 100 のビューを生成 var _animationView:UIView! = UIView(frame: CGRectMake(0, 0, 100, 100))
// ビューの色を青に設定 _animationView.backgroundColor = UIColor.blueColor()
self.view.addSubview(_animationView)
// アニメーション UIView.animateWithDuration(1.0, animations: { () -> Void in // ビューを左端から右端に移動 var dx = self.view.frame.width - animationAreaWidth _animationView.frame.origin = CGPointMake(dx, 0) }){ (isTrue) -> Void in // アニメーションビューの初期化 self.configureAnimationView()
移動
アフィン変換
回転や上下反転するアニメーションは アフィン変換(CGAffineTransformクラス)を利用します
CGAffineTransformScale (倍加)CGAffineTransformRotate (回転)CGAffineTransformInvert (上下反転)CGAffineTransformConcat (組み合わせ)CGAffineTransformTranslate (移動量)
回転 // アニメーション UIView.animateWithDuration(1.0, animations: { () -> Void in
// 180度回転するtransformの生成// 180度回転するtransformの生成 // * 回転角度(radian)を生成する関数(120度の場合): self.DegreesToRadians(120) // * RotateTransformの生成: CGAffineTransformMakeRotation(radian) var radian = self.DegreesToRadians(180.0) var transform = CGAffineTransformMakeRotation(radian)
// animationViewにtransformを設定 self.animationView.transform = transform
}){ (isTrue) -> Void in // アニメーションビューの初期化 self.configureAnimationView() }
ラジアン
func DegreesToRadians(var degree:Double) -> CGFloat { return CGFloat(degree * M_PI / 180.0) }
回転
SAMPLE拡大
- Large Sample Answer
回転
- Rotate Sample Answer
3. CoreAnimation
UIViewのメソッドでできるアニメーションには限界があります。CoreAnimationは、より多くのアニメーションを演出できます。
消失・拡大・縮小・移動・変形・回転
メリット
UIKitのアニメーションでは扱えないプロパティやベジェを使ったアニメーションができるなど、カスタム性が高いです。
ベジェ
カスタマイズ性が高い
動作が軽い
CABasicAnimationクラス
CoreAnimationクラスの中で最も基礎的なクラスです。今回はこのクラスを使っていきます。
以下のような値を設定します
変化させるプロパティの前後
IntervalやDelay設定アニメーション方法etc..
Example例えば、ビューの角丸サイズを変えるアニメーションはこのような感じです。
// cornerRadiusを変更するアニメーション var cornerRadiusAnimation = CABasicAnimation(keyPath: "cornerRadius")
// cornerRadius を 0 -> 100 に変化させるよう設定 cornerRadiusAnimation.fromValue = 0 cornerRadiusAnimation.toValue = 100
// アニメーション cornerRadiusAnimation.duration = 2.0
// アニメーションが終了した時の状態を維持する cornerRadiusAnimation.removedOnCompletion = false cornerRadiusAnimation.fillMode = kCAFillModeForwards
// アニメーションが終了したらanimationDidStopを呼び出す cornerRadiusAnimation.delegate = self
角丸
角丸を変えるアニメーションはLayerプロパティを使用します。Layerプロパティの変化はUIKitアニメーションではできません。
課題１ - 初級Large・Small・Delete・Moveボタンを使って
拡大・縮小・消失・移動するアニメーションを実装しましょうEasy Templete
課題１ - 中級Rotateアニメーションを使ってそれぞれの
アニメーションに180度回転を組み合わせてみましょう
課題１ - 上級以下のような連続アニメーションを実装してみましょう。
一部CoreAnimationを利用しています。
前回使った資料Swift勉強会 vol.1 資料Qiita - Swiftでビューを操作する
解答
課題1 初級課題1 中級
4. ジェスチャーを使ったアニメーション
ジェスチャーとは？ジェスチャーを実装するにはUIGestureのパターンジェスチャーとアニメーションを組み合わせる
ジェスチャーとは？
画像を拡大、ゲームでアイテムをタップするときの指の動き指の動きに対して、対応するジェスチャーがあるViewにジェスチャーをするとイベントが発生する
ジェスチャーを実装するには
処理の流れ
ジェスチャーの追加
スワイプ用のジェスチャーを生成します。Selectorクラスを使って呼び出すメソッドを指定します。
// スワイプジェスチャーの生成。ジェスチャー イベント発生時に"callSwipeLeftAnimation"関数をコールする var swipeGestureRecognizerLeft = UISwipeGestureRecognizer(target: self, action:
// 左方向のスワイプを設定する swipeGestureRecognizerLeft.direction = .Left
// rectビューにスワイプジェスチャーを追加 rect.addGestureRecognizer(swipeGestureRecognizerLeft)
ジェスチャーアクションの追加
スワイプすると発生する処理をViewControllerに実装します ここでは、"leftSwipeGesture"というメソッドを定義しますfunc leftSwipeGesture(){ // rectビューの中心が(100, 100)の位置になるようにビューを移動する self.rect.center = CGPointMake(100, 100)}
ジェスチャーの種類TapPanPinchRotateSwipeLongPress
資料
Qiita - Swiftでジェスチャーの追加GitHub - Gesture Sample Basic
課題２ - 初級ジェスチャーに従って、左右に移動する
アニメーションを実装してみましょう Easy Templete
課題２ - 中級ジェスチャーに従って移４方向に動するアニメーションです
違う方向に遷移しないよう実装しましょう
Middle Templete
課題２ - 中級ジェスチャーに従って移４方向に動するアニメーションです
違う方向に遷移しないよう実装しましょう
Hard Templete
解答
課題 2 初級課題2 中級
まとめ
少し告知
イベントSwift もくもく会 vol.4Swift勉強会 vol.5
今後、開催を予定しています
グループ
Swift頑張る会 (Facebook)Swift勉強会 (Connpass)
現在２つグループがあります！ 興味があったら参加してみてください！
勉強会資料
過去：今回：
Swift勉強会資料Swift勉強会 vol.4
