Swift Study Vol.4
0 likes1,988 views
厂飞颈蹿迟勉强会 Vol.4の資料 - PDFから資料内リンクに飛べます Original: hayate1996.github.io/swift-animation-presentation http://swiftstarter.connpass.com/event/15102/
More Related Content
Similar to Swift Study Vol.4 (20)
Recently uploaded (13)
![ElasticsearchでSPLADEする [Search Engineering Tech Talk 2025 Winter]](https://cdn.slidesharecdn.com/ss_thumbnails/searchtech-250228102455-ddc5ce09-thumbnail.jpg?width=560&fit=bounds)
Swift Study Vol.4
- 1. Swift Study vol.4 Created by Nagamine Hiromasa @web_chiro
- 5. Agenda 1. 基本的なアニメーション 2. UIKitアニメーション 3. CoreAnimation 4. Gestureを組み合わせる 5. まとめ
- 6. 必要な物 1. Mac 2. Xcode 6.3.1 3. インターネット環境
- 11. 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
- 12. 拡大?缩小 // 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 // アニメーションビューの初期化
- 13. 拡大?缩小
- 14. 消失 // 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()
- 15. 消失
- 16. 移动 // 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()
- 17. 移动
- 18. アフィン変換 回転や上下反転するアニメーションは アフィン変換(CGAffineTransformクラス)を利用します CGAffineTransformScale (倍加) CGAffineTransformRotate (回転) CGAffineTransformInvert (上下反転) CGAffineTransformConcat (組み合わせ) CGAffineTransformTranslate (移动量)
- 19. 回転 // アニメーション 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) }
- 20. 回転
- 21. SAMPLE 拡大 -Large Sample Answer 回転 -Rotate Sample Answer
- 25. 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
- 34. 前回使った資料 厂飞颈蹿迟勉强会vol.1 資料 Qiita - 厂飞颈蹿迟でビューを操作する
- 35. 解答 課題1 初級 課題1 中級
- 38. ジェスチャーを実装するには
- 39. 処理の流れ
- 40. ジェスチャーの追加 スワイプ用のジェスチャーを生成します。 Selectorクラスを使って呼び出すメソッドを指定します。 // スワイプジェスチャーの生成。ジェスチャーイベント発生時に"callSwipeLeftAnimation"関数をコール var swipeGestureRecognizerLeft = UISwipeGestureRecognizer(target: self, action: // 左方向のスワイプを設定する swipeGestureRecognizerLeft.direction = .Left // rectビューにスワイプジェスチャーを追加 rect.addGestureRecognizer(swipeGestureRecognizerLeft)
- 41. ジェスチャーアクションの追加 スワイプすると発生する処理をViewControllerに実装します ここでは、"leftSwipeGesture"というメソッドを定義します func leftSwipeGesture(){ // rectビューの中心が(100, 100)の位置になるようにビューを移动する self.rect.center = CGPointMake(100, 100) }
- 43. 資料 Qiita - Swiftでジェスチャーの追加 GitHub - Gesture Sample Basic
- 49. 解答 課題2 初級 課題2 中級
- 50. まとめ
- 51. 少し告知