50天iOS挑战(Swift) - 第2天：手势操控弹性按钮

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、 响应手势的动画

1. 控件旋转抖动
   通过设置动画过程来实现

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")

2. 控件抖动
   控件抖动通过设置动画过程来实现：

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")

3. 控件拖动
   控件拖动通过获取点击起点和位移终点，并计算相对位移量实现。
   注意，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

4. 控件旋转

添加手势
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)

即可完成旋转操作

5. 控件缩放
   控件缩放则是利用手势监视器的比例属性来进行比例变化，从而变化大小，代码很简单。

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。多谢~