50天iOS挑战(Swift) - 第2天：手势操控弹性按钮
50天，每天一个Swift语言的iOS练手项目，覆盖iOS开发的主要知识。贵在坚持，重在思考
文章列表：http://www.jianshu.com/nb/13566182
Github项目：https://github.com/Minecodecraft/50DaysOfSwift
简介
本项目为制作一个可手势操作的按钮，支持修改颜色、手势放大缩小、点击切换等操作，并对按钮添加弹性正反馈。
主要知识点: Animation、Layer、Button、UIGestureRecongnizer
GIF
过程
1、 界面UI
首先是对iOS图层基础使用的练习。使用代码设计背景，这里用到了CAGradientLayer来创建渐变图层。
let backgroundLayer = CAGradientLayer()
backgroundLayer.colors = [UIColor.yellow.cgColor, UIColor.white.cgColor]
backgroundLayer.startPoint = CGPoint(x: 0.5, y: 0)
backgroundLayer.endPoint = CGPoint(x: 0.5, y: 1)
backgroundLayer.frame = self.view.bounds
self.view.layer.addSublayer(backgroundLayer)
添加子图层使用layer属性的addSublayer()方法
2、 手势操作
这里简单介绍手势操作对应的类，具体使用方法后面专开文章讲解。
- 点击手势：UITapGestureRecognizer
- 长按手势：UILongPressGestureRecognizer
- 拖拽手势：UIPanGestureRecognizer
- 捏合手势：UIPinchGestureRecognizer
- 旋转手势：UIRotationGestureRecognizer
- 滑动手势：UISwipeGestureRecognizer
其中捏合、旋转手势需要遵守UIGestureRecognizerDelegate代理类
3、 响应手势的动画
- 控件旋转抖动
通过设置动画过程来实现
let animation = CAKeyframeAnimation(keyPath: "transform.translation.x")
// 周期
animation.duration = 0.08
animation.repeatCount = 2
// 抖动幅度
animation.values = [0, -self.mainButton.frame.width/4, self.mainButton.frame.width/4, 0]
// 恢复原样
animation.autoreverses = true
// 设置抖动中心
self.mainButton.layer.add(animation, forKey: "rotation.x")
- 控件抖动
控件抖动通过设置动画过程来实现：
let animation = CABasicAnimation(keyPath: "transform.rotation.z")
// 周期
animation.duration = 0.08
animation.repeatCount = 4
// 抖动角度
animation.fromValue = (-M_1_PI)
animation.toValue = (M_1_PI)
// 恢复原样
animation.autoreverses = true
// 设置抖动中心
self.mainButton.layer.anchorPoint = CGPoint(x: 0.5, y: 0.5)
self.mainButton.layer.add(animation, forKey: "rotation.z")
- 控件拖动
控件拖动通过获取点击起点和位移终点，并计算相对位移量实现。
注意，translation函数是获取起点，而location函数是获取终点。起初仿照油管上一个作者的做法利用location来实现，会导致开始单击时出现一个跳变的位置。所以拖动位置的计算是要用起点计算相对位移的方式来实现的。
// 获取坐标并修改
let movePoint = panGes.translation(in: self.view)
var curPoint = self.mainButton.center
curPoint.x += movePoint.x
curPoint.y += movePoint.y
self.mainButton.center = curPoint
- 控件旋转
添加手势
let rotationGes = UIRotationGestureRecognizer(target: self, action: #selector(rotationAction(_:)))
rotationGes.delegate = self
self.mainButton.addGestureRecognizer(rotationGes)
添加手势后处理：
let rotationR = rotationGes.rotation
self.mainButton.transform = self.mainButton.transform.rotated(by: rotationR)
即可完成旋转操作
- 控件缩放
控件缩放则是利用手势监视器的比例属性来进行比例变化，从而变化大小，代码很简单。
let pinchScale = pinchGes.scale
self.mainButton.transform = self.mainButton.transform.scaledBy(x: pinchScale, y: pinchScale);
一点小小的补充
1.默认情况是不能同时进行旋转和缩放操作的，但是这样又很炫。让UIGestureRecognizerDelegate的对应方法返回真，即可允许同时响应多个手势。
func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool {
return true
}
2.项目源码地址 GitHub，欢迎大家前来支持，希望可以随手留个Star。多谢~
