swift study vol.4
TRANSCRIPT
![Page 1: Swift Study Vol.4](https://reader030.vdocuments.mx/reader030/viewer/2022032619/55bdb6d8bb61eb51348b4682/html5/thumbnails/1.jpg)
Swift Study vol.4Created by Nagamine Hiromasa @web_chiro
![Page 2: Swift Study Vol.4](https://reader030.vdocuments.mx/reader030/viewer/2022032619/55bdb6d8bb61eb51348b4682/html5/thumbnails/2.jpg)
Swift 勉強会iOSアプリを開発してみたいSwiftってどういうもの?
など、Swiftに興味を持っている人向けに勉強会を開いています。
![Page 3: Swift Study Vol.4](https://reader030.vdocuments.mx/reader030/viewer/2022032619/55bdb6d8bb61eb51348b4682/html5/thumbnails/3.jpg)
今日の目標アニメーションがどう実現されるのかを知るアニメーションを実装できるようになる複数のアニメーションやジェスチャーを使ってバリエーションを増やす
![Page 4: Swift Study Vol.4](https://reader030.vdocuments.mx/reader030/viewer/2022032619/55bdb6d8bb61eb51348b4682/html5/thumbnails/4.jpg)
iOSアニメーションについてアニメーションはどういうところで使われているのか
Animation TutorialLoading, Progressメニューリスト画面の遷移
ゲーム
![Page 5: Swift Study Vol.4](https://reader030.vdocuments.mx/reader030/viewer/2022032619/55bdb6d8bb61eb51348b4682/html5/thumbnails/5.jpg)
Agenda1. 基本的なアニメーション2. UIKitアニメーション3. CoreAnimation4. Gestureを組み合わせる5. まとめ
![Page 6: Swift Study Vol.4](https://reader030.vdocuments.mx/reader030/viewer/2022032619/55bdb6d8bb61eb51348b4682/html5/thumbnails/6.jpg)
必要な物1. Mac2. Xcode 6.3.13. インターネット環境
![Page 7: Swift Study Vol.4](https://reader030.vdocuments.mx/reader030/viewer/2022032619/55bdb6d8bb61eb51348b4682/html5/thumbnails/7.jpg)
1. 基本的なアニメーション
今回は基本的なアニメーションとして 4つのアニメーションを中心にやっていきます
拡大・縮小・消失・移動
![Page 8: Swift Study Vol.4](https://reader030.vdocuments.mx/reader030/viewer/2022032619/55bdb6d8bb61eb51348b4682/html5/thumbnails/8.jpg)
アニメーションを実装する方法
アニメーションを実装する方法はいくつかありますがUIKitのクラスメソッドを使う方法がとても簡単です。
![Page 9: Swift Study Vol.4](https://reader030.vdocuments.mx/reader030/viewer/2022032619/55bdb6d8bb61eb51348b4682/html5/thumbnails/9.jpg)
2. UIKitアニメーション
UIKitにデフォルトで提供されるアニメーション機構拡大・縮小・回転・移動などを簡単・直感的に実装できる
![Page 10: Swift Study Vol.4](https://reader030.vdocuments.mx/reader030/viewer/2022032619/55bdb6d8bb61eb51348b4682/html5/thumbnails/10.jpg)
アニメーションを実装する方法
UIKitには次のようなクラスメソッドが定義されています。
// アニメーションだけを行うメソッド UIView.animationWithDuration:animation:
// アニメーションを実行した後の処理も記述できるメソッド UIView.animationWithDuration:animation:completionBlock:
どれくらいの時間(duration)でどのようなアニメーション(animation)を実行し
終わった後に最後の処理(completionBlock)を実行する
![Page 11: Swift Study Vol.4](https://reader030.vdocuments.mx/reader030/viewer/2022032619/55bdb6d8bb61eb51348b4682/html5/thumbnails/11.jpg)
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
![Page 12: Swift Study Vol.4](https://reader030.vdocuments.mx/reader030/viewer/2022032619/55bdb6d8bb61eb51348b4682/html5/thumbnails/12.jpg)
拡大・縮小
// 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 // 横幅を2倍に設定 _animationView.frame.size.width = 200 // 高さを2倍に設定 _animationView.frame.size.height = 200 }){ (isTrue) -> Void in // アニメーションビューの初期化
![Page 13: Swift Study Vol.4](https://reader030.vdocuments.mx/reader030/viewer/2022032619/55bdb6d8bb61eb51348b4682/html5/thumbnails/13.jpg)
拡大・縮小
![Page 14: Swift Study Vol.4](https://reader030.vdocuments.mx/reader030/viewer/2022032619/55bdb6d8bb61eb51348b4682/html5/thumbnails/14.jpg)
消失
// 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()
![Page 15: Swift Study Vol.4](https://reader030.vdocuments.mx/reader030/viewer/2022032619/55bdb6d8bb61eb51348b4682/html5/thumbnails/15.jpg)
消失
![Page 16: Swift Study Vol.4](https://reader030.vdocuments.mx/reader030/viewer/2022032619/55bdb6d8bb61eb51348b4682/html5/thumbnails/16.jpg)
移動
// 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()
![Page 17: Swift Study Vol.4](https://reader030.vdocuments.mx/reader030/viewer/2022032619/55bdb6d8bb61eb51348b4682/html5/thumbnails/17.jpg)
移動
![Page 18: Swift Study Vol.4](https://reader030.vdocuments.mx/reader030/viewer/2022032619/55bdb6d8bb61eb51348b4682/html5/thumbnails/18.jpg)
アフィン変換
回転や上下反転するアニメーションは アフィン変換(CGAffineTransformクラス)を利用します
CGAffineTransformScale (倍加)CGAffineTransformRotate (回転)CGAffineTransformInvert (上下反転)CGAffineTransformConcat (組み合わせ)CGAffineTransformTranslate (移動量)
![Page 19: Swift Study Vol.4](https://reader030.vdocuments.mx/reader030/viewer/2022032619/55bdb6d8bb61eb51348b4682/html5/thumbnails/19.jpg)
回転 // アニメーション 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) }
![Page 20: Swift Study Vol.4](https://reader030.vdocuments.mx/reader030/viewer/2022032619/55bdb6d8bb61eb51348b4682/html5/thumbnails/20.jpg)
回転
![Page 21: Swift Study Vol.4](https://reader030.vdocuments.mx/reader030/viewer/2022032619/55bdb6d8bb61eb51348b4682/html5/thumbnails/21.jpg)
SAMPLE拡大
- Large Sample Answer
回転
- Rotate Sample Answer
![Page 22: Swift Study Vol.4](https://reader030.vdocuments.mx/reader030/viewer/2022032619/55bdb6d8bb61eb51348b4682/html5/thumbnails/22.jpg)
3. CoreAnimation
UIViewのメソッドでできるアニメーションには限界があります。CoreAnimationは、より多くのアニメーションを演出できます。
消失・拡大・縮小・移動・変形・回転
![Page 23: Swift Study Vol.4](https://reader030.vdocuments.mx/reader030/viewer/2022032619/55bdb6d8bb61eb51348b4682/html5/thumbnails/23.jpg)
メリット
UIKitのアニメーションでは扱えないプロパティやベジェを使ったアニメーションができるなど、カスタム性が高いです。
ベジェ
カスタマイズ性が高い
動作が軽い
![Page 24: Swift Study Vol.4](https://reader030.vdocuments.mx/reader030/viewer/2022032619/55bdb6d8bb61eb51348b4682/html5/thumbnails/24.jpg)
CABasicAnimationクラス
CoreAnimationクラスの中で最も基礎的なクラスです。今回はこのクラスを使っていきます。
以下のような値を設定します
変化させるプロパティの前後
IntervalやDelay設定アニメーション方法etc..
![Page 25: Swift Study Vol.4](https://reader030.vdocuments.mx/reader030/viewer/2022032619/55bdb6d8bb61eb51348b4682/html5/thumbnails/25.jpg)
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
![Page 26: Swift Study Vol.4](https://reader030.vdocuments.mx/reader030/viewer/2022032619/55bdb6d8bb61eb51348b4682/html5/thumbnails/26.jpg)
角丸
角丸を変えるアニメーションはLayerプロパティを使用します。Layerプロパティの変化はUIKitアニメーションではできません。
![Page 28: Swift Study Vol.4](https://reader030.vdocuments.mx/reader030/viewer/2022032619/55bdb6d8bb61eb51348b4682/html5/thumbnails/28.jpg)
課題1 - 初級Large・Small・Delete・Moveボタンを使って
拡大・縮小・消失・移動するアニメーションを実装しましょうEasy Templete
![Page 29: Swift Study Vol.4](https://reader030.vdocuments.mx/reader030/viewer/2022032619/55bdb6d8bb61eb51348b4682/html5/thumbnails/29.jpg)
![Page 30: Swift Study Vol.4](https://reader030.vdocuments.mx/reader030/viewer/2022032619/55bdb6d8bb61eb51348b4682/html5/thumbnails/30.jpg)
課題1 - 中級Rotateアニメーションを使ってそれぞれの
アニメーションに180度回転を組み合わせてみましょう
![Page 31: Swift Study Vol.4](https://reader030.vdocuments.mx/reader030/viewer/2022032619/55bdb6d8bb61eb51348b4682/html5/thumbnails/31.jpg)
![Page 32: Swift Study Vol.4](https://reader030.vdocuments.mx/reader030/viewer/2022032619/55bdb6d8bb61eb51348b4682/html5/thumbnails/32.jpg)
課題1 - 上級以下のような連続アニメーションを実装してみましょう。
一部CoreAnimationを利用しています。
![Page 33: Swift Study Vol.4](https://reader030.vdocuments.mx/reader030/viewer/2022032619/55bdb6d8bb61eb51348b4682/html5/thumbnails/33.jpg)
![Page 34: Swift Study Vol.4](https://reader030.vdocuments.mx/reader030/viewer/2022032619/55bdb6d8bb61eb51348b4682/html5/thumbnails/34.jpg)
前回使った資料Swift勉強会 vol.1 資料Qiita - Swiftでビューを操作する
![Page 35: Swift Study Vol.4](https://reader030.vdocuments.mx/reader030/viewer/2022032619/55bdb6d8bb61eb51348b4682/html5/thumbnails/35.jpg)
解答
課題1 初級課題1 中級
![Page 36: Swift Study Vol.4](https://reader030.vdocuments.mx/reader030/viewer/2022032619/55bdb6d8bb61eb51348b4682/html5/thumbnails/36.jpg)
4. ジェスチャーを使ったアニメーション
ジェスチャーとは?ジェスチャーを実装するにはUIGestureのパターンジェスチャーとアニメーションを組み合わせる
![Page 37: Swift Study Vol.4](https://reader030.vdocuments.mx/reader030/viewer/2022032619/55bdb6d8bb61eb51348b4682/html5/thumbnails/37.jpg)
ジェスチャーとは?
画像を拡大、ゲームでアイテムをタップするときの指の動き指の動きに対して、対応するジェスチャーがあるViewにジェスチャーをするとイベントが発生する
![Page 38: Swift Study Vol.4](https://reader030.vdocuments.mx/reader030/viewer/2022032619/55bdb6d8bb61eb51348b4682/html5/thumbnails/38.jpg)
ジェスチャーを実装するには
![Page 39: Swift Study Vol.4](https://reader030.vdocuments.mx/reader030/viewer/2022032619/55bdb6d8bb61eb51348b4682/html5/thumbnails/39.jpg)
処理の流れ
![Page 40: Swift Study Vol.4](https://reader030.vdocuments.mx/reader030/viewer/2022032619/55bdb6d8bb61eb51348b4682/html5/thumbnails/40.jpg)
ジェスチャーの追加
スワイプ用のジェスチャーを生成します。Selectorクラスを使って呼び出すメソッドを指定します。
// スワイプジェスチャーの生成。ジェスチャー イベント発生時に"callSwipeLeftAnimation"関数をコールする var swipeGestureRecognizerLeft = UISwipeGestureRecognizer(target: self, action:
// 左方向のスワイプを設定する swipeGestureRecognizerLeft.direction = .Left
// rectビューにスワイプジェスチャーを追加 rect.addGestureRecognizer(swipeGestureRecognizerLeft)
![Page 41: Swift Study Vol.4](https://reader030.vdocuments.mx/reader030/viewer/2022032619/55bdb6d8bb61eb51348b4682/html5/thumbnails/41.jpg)
ジェスチャーアクションの追加
スワイプすると発生する処理をViewControllerに実装します ここでは、"leftSwipeGesture"というメソッドを定義しますfunc leftSwipeGesture(){ // rectビューの中心が(100, 100)の位置になるようにビューを移動する self.rect.center = CGPointMake(100, 100)}
![Page 42: Swift Study Vol.4](https://reader030.vdocuments.mx/reader030/viewer/2022032619/55bdb6d8bb61eb51348b4682/html5/thumbnails/42.jpg)
ジェスチャーの種類TapPanPinchRotateSwipeLongPress
![Page 43: Swift Study Vol.4](https://reader030.vdocuments.mx/reader030/viewer/2022032619/55bdb6d8bb61eb51348b4682/html5/thumbnails/43.jpg)
資料
Qiita - Swiftでジェスチャーの追加GitHub - Gesture Sample Basic
![Page 44: Swift Study Vol.4](https://reader030.vdocuments.mx/reader030/viewer/2022032619/55bdb6d8bb61eb51348b4682/html5/thumbnails/44.jpg)
課題2 - 初級ジェスチャーに従って、左右に移動する
アニメーションを実装してみましょう Easy Templete
![Page 45: Swift Study Vol.4](https://reader030.vdocuments.mx/reader030/viewer/2022032619/55bdb6d8bb61eb51348b4682/html5/thumbnails/45.jpg)
![Page 46: Swift Study Vol.4](https://reader030.vdocuments.mx/reader030/viewer/2022032619/55bdb6d8bb61eb51348b4682/html5/thumbnails/46.jpg)
課題2 - 中級ジェスチャーに従って移4方向に動するアニメーションです
違う方向に遷移しないよう実装しましょう
Middle Templete
![Page 47: Swift Study Vol.4](https://reader030.vdocuments.mx/reader030/viewer/2022032619/55bdb6d8bb61eb51348b4682/html5/thumbnails/47.jpg)
![Page 48: Swift Study Vol.4](https://reader030.vdocuments.mx/reader030/viewer/2022032619/55bdb6d8bb61eb51348b4682/html5/thumbnails/48.jpg)
課題2 - 中級ジェスチャーに従って移4方向に動するアニメーションです
違う方向に遷移しないよう実装しましょう
Hard Templete
![Page 49: Swift Study Vol.4](https://reader030.vdocuments.mx/reader030/viewer/2022032619/55bdb6d8bb61eb51348b4682/html5/thumbnails/49.jpg)
解答
課題 2 初級課題2 中級
![Page 50: Swift Study Vol.4](https://reader030.vdocuments.mx/reader030/viewer/2022032619/55bdb6d8bb61eb51348b4682/html5/thumbnails/50.jpg)
まとめ
![Page 51: Swift Study Vol.4](https://reader030.vdocuments.mx/reader030/viewer/2022032619/55bdb6d8bb61eb51348b4682/html5/thumbnails/51.jpg)
少し告知
![Page 52: Swift Study Vol.4](https://reader030.vdocuments.mx/reader030/viewer/2022032619/55bdb6d8bb61eb51348b4682/html5/thumbnails/52.jpg)
イベントSwift もくもく会 vol.4Swift勉強会 vol.5
今後、開催を予定しています
![Page 53: Swift Study Vol.4](https://reader030.vdocuments.mx/reader030/viewer/2022032619/55bdb6d8bb61eb51348b4682/html5/thumbnails/53.jpg)
グループ
Swift頑張る会 (Facebook)Swift勉強会 (Connpass)
現在2つグループがあります! 興味があったら参加してみてください!
![Page 54: Swift Study Vol.4](https://reader030.vdocuments.mx/reader030/viewer/2022032619/55bdb6d8bb61eb51348b4682/html5/thumbnails/54.jpg)
勉強会資料
過去:今回:
Swift勉強会資料Swift勉強会 vol.4