上一节很多同学反映写得太细了，看着有点累。
好吧，从这一节开始，为了节省时间，小牛哥把最主要的内容用代码的方式介绍，毕竟代码是咱们最好的沟通方式。
正题开始！
这一节大家可以学到：
- 如何动态添加视图 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
