上一節很多同學反映寫得太細了，看著有點累。
好吧，從這一節開始，為了節省時間，小牛哥把最主要的內容用程式碼的方式介紹，畢竟程式碼是我們們最好的溝通方式。
正題開始！
這一節大家可以學到：
- 如何動態新增檢視 UIView（哥之前有篇博文介紹了這個《動態新增子檢視 UIView 的正確方法》在這裡可以找到具體的程式碼）
- 怎樣把 UIView 做成圓形 （只須一行程式碼）
- 如何新增滑動手勢和響應方法
- 最後就是如何在動畫中改變檢視的位置
iOS中位移的動畫主要是通過在動畫 block 中改變檢視的 frame 或 center 來實現的。
請大家開啟Xcode， 新建一個 Single View based 的 Swift 專案，把以下的程式碼複製到 ViewController.swift 中。
只要幾十行程式碼，一個好玩的動畫小 app 就做好了！
程式碼小結：以下的程式碼在程式開始建立了一個紫色圓形的UIView， 然後新增上下滑動手勢方法，當你上下滑動螢幕時，圓形的檢視會以動畫的形式上下滑動。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 |
import UIKit class ViewController: UIViewController { //衡量，圓形檢視的大小 let kCircleViewSize:CGFloat = 90.0 //圓形試圖變數 var circleView: UIView! //動畫開始／停止標記 var animationHappening = false override func viewDidLoad() { super.viewDidLoad() //建立圓形檢視 setupCircleView() //新增滑動手勢 setupSwipeActions() } // 前一篇博文提到，在這裡修改子檢視的位置 override func viewDidLayoutSubviews() { // 避免圓形檢視被多次新增 //（只要從navigation controller 或者 modal view 返回， // 又或者旋轉螢幕，這裡就會被呼叫） if(self.circleView.superview == nil) { //把圓形檢視新增到主檢視 self.view.addSubview(self.circleView) } //圓形檢視的位置在主檢視中間 self.circleView.center = self.view.center } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() // Dispose of any resources that can be recreated. } // MARK: - Setup func setupCircleView() { //初始化子檢視 self.circleView = UIView(frame: CGRectMake(0,0,kCircleViewSize,kCircleViewSize)) //把檢視做成圓形，沒錯，就這一行搞定！ //圓角的半徑等於邊長的一半，不就是圓形嘛! self.circleView.layer.cornerRadius = kCircleViewSize/2.0 //圓形檢視顏色 self.circleView.backgroundColor = UIColor.purpleColor() } func setupSwipeActions() { //新增向下滑動功能和響應方法 let swipeDown = UISwipeGestureRecognizer(target: self, action: "swipeOnMainView:") swipeDown.direction = .Down; self.view.addGestureRecognizer(swipeDown); //新增向上滑動功能和響應方法 let swipeUp = UISwipeGestureRecognizer(target: self, action: "swipeOnMainView:") swipeUp.direction = .Up; self.view.addGestureRecognizer(swipeUp); } // MARK: Actions // 上下滑動時以下方法就被執行 func swipeOnMainView(swipe: UISwipeGestureRecognizer) { //防止被一些傻逼在螢幕上亂劃！ //想看看後果是吧，把以下的 return 去掉 //執行後在螢幕上不停地上下滑動就知道了 if(self.animationHappening) { return; } //找出原形檢視的最終位置，如果向下滑動， //位置就為底部，否則為頂部 let frameBegin = self.circleView.frame var frameEnd:CGRect = frameBegin; if(swipe.direction == .Down) { frameEnd = CGRectMake(frameBegin.origin.x, self.view.frame.size.height - kCircleViewSize, kCircleViewSize, kCircleViewSize) } else { frameEnd = CGRectMake(frameBegin.origin.x, 0, kCircleViewSize, kCircleViewSize) } //動畫開始 self.animationHappening = true; //在動畫 block 中修改圓形檢視的位置 UIView.animateWithDuration(0.5, animations: { () -> Void in //改變檢視的frame self.circleView.frame = frameEnd }) { ( finished ) -> Void in //動畫結束 self.animationHappening = false } } } |
- Swift 程式碼下載：http://www.xmartcalc.com/ios-animation/codes/1.2/Animation1.2_Swift.zip
- Ojective-C 程式碼下載：http://www.xmartcalc.com/ios-animation/codes/1.2/Animation1.2_OC.zip