iOS 功能拓展按钮

最终实现的效果为:

checkbox.gif

因为最近做项目的时候要做一个拓展选项功能，当时想弄成
`tabbar`形式，中间弄一个拓展功能，类似于微博那种，但是要弄
成这样就得把结构修改了，然后就想自定义一个了。

进入正题

动画的开始看到+按钮，点击的时候周围会出现两个圆一闪而逝，然后内部的+开始旋转，vertical方向的线条多旋转了M_PI_2，因为是各自动画，所以horizontal，vertical分别有自己的shapeLayer。

这里有个值得提的就是，必须自身有frame，才可以设置锚点，有时候可能会这样做：

let shapeLayer = CAShapeLayer()
let path = UIBezierPath()
//path 绘制代码
shapeLayer.path = path.cgPath

这样效果是可以出来，但是可以去看一下，Layer.frame是没有的，position也就没有，旋转轴就没办法控制了。

所以这里我是设置layer.frame，然后path基于layer去绘制。

//垂直直线
self.verticalLayer = CAShapeLayer.init()
        
//设置frame才能设置旋转点
self.verticalLayer.frame = CGRect.init(x: self.frame.size.width / 2 - 2, y: 10, width: 4, height: self.frame.size.width - 20)
        
let verticalPath = UIBezierPath.init()
        
verticalPath.move(to: CGPoint.init(x: 2,y: 0))
        
verticalPath.addLine(to: CGPoint.init(x: 2, y: self.frame.size.width - 20))
        
self.verticalLayer.path = verticalPath.cgPath
        
self.verticalLayer.strokeColor = UIColor.white.cgColor
        
self.verticalLayer.cornerRadius = 2
        
self.verticalLayer.lineWidth = 4
        
self.verticalLayer.masksToBounds = true
        
self.layer.addSublayer(self.verticalLayer)
        
//水平直线
self.horizontalLayer = CAShapeLayer()
        
horizontalLayer.frame = CGRect.init(x: 10, y: self.frame.size.width / 2 - 2, width: self.frame.size.width - 20, height: 4)
        
let horizontalPath = UIBezierPath.init()
        
horizontalPath.move(to: CGPoint.init(x: 0, y: 2))
        
horizontalPath.addLine(to: CGPoint.init(x: self.frame.size.width - 20, y: 2))
        
self.horizontalLayer.path = horizontalPath.cgPath
        
self.horizontalLayer.strokeColor = UIColor.white.cgColor
        
self.horizontalLayer.lineWidth = 4
        
self.horizontalLayer.cornerRadius = 2
        
self.horizontalLayer.masksToBounds = true
        
self.layer.addSublayer(self.horizontalLayer)

圆的代码基本上是相似的。

回到动画上来

点击的时候会显示周围两个圆圈显示然后消失

self.outsideAnimation = CAKeyframeAnimation.init(keyPath: "opacity")
        
self.outsideAnimation.values = [0,0.5,0.0]
        
self.outsideAnimation.keyTimes = [0,0.4,1]
        
self.outsideAnimation.autoreverses = false
        
self.outsideAnimation.duration = 0.5
        
self.outsideAnimation.timingFunctions = [CAMediaTimingFunction.init(name: kCAMediaTimingFunctionEaseOut),CAMediaTimingFunction.init(name: kCAMediaTimingFunctionDefault)]
        
self.outsideAnimation.fillMode = kCAFillModeForwards
        
self.outsideAnimation.calculationMode = kCAAnimationLinear
        
self.outsideAnimation.isRemovedOnCompletion = false

然后就执行了直线的旋转动画，如果同时添加直线的动画可能会同时在执行了，那怎么区分了，可以设置CAAnimationDelegate但是：

func animationDidStop(_ anim: CAAnimation, finished flag: Bool) {
}

anim是一个深拷贝，所以没法用self.animation == anim去区分，我这里是直接kvc区分的(大家有其他方法请告诉我):

//设置垂直动画的代理为本身以及Value
self.verticalAnimation.delegate = self
self.verticalAnimation.setValue("verticalExpandAnimation", forKey: "identifier")
self.verticalShrinkAnimation.delegate = self
self.verticalShrinkAnimation.setValue("verticalShrinkAnimation", forKey: "identifier")
//外圈圆动画
self.outsideAnimation.delegate = self
self.outsideAnimation.setValue("outsideCircleExpandAnimation", forKey: "identifier")
//内圈圆
self.insideCircleAnimation.delegate = self
self.insideCircleAnimation.setValue("insideCircleExpandAnimation", forKey: "identifier")
self.insideCircleShrinkAnimation.delegate = self
self.insideCircleShrinkAnimation.setValue("InsideshrinkAnimation", forKey: "identifier")

然后代理里面就可以直接区别开了:

switch anim.value(forKey: "identifier") as! String{
  
}

直线的动画是旋转，使用BasicAnimation就行：

//垂直线动画
self.verticalAnimation = CABasicAnimation.init(keyPath: "transform.rotation.z")
        
self.verticalAnimation.fromValue = angle(value: 0)
        
self.verticalAnimation.toValue = angle(value: 450.0)
        
self.verticalAnimation.repeatCount = 0.0
        
self.verticalAnimation.autoreverses = false
        
self.verticalAnimation.duration = 1
        
self.verticalAnimation.fillMode = kCAFillModeForwards
        
self.verticalAnimation.isRemovedOnCompletion = false
//水平线动画
self.horizontalAnimation = CABasicAnimation.init(keyPath: "transform.rotation.z")
        
self.horizontalAnimation.fromValue = angle(value: 0)
        
self.horizontalAnimation.toValue = angle(value: 360.0)
        
self.horizontalAnimation.repeatCount = 0.0
        
self.horizontalAnimation.autoreverses = false
        
self.horizontalAnimation.duration = 0.75
        
self.horizontalAnimation.fillMode = kCAFillModeForwards
        
self.horizontalAnimation.isRemovedOnCompletion = false

直线动画完成之后，圆就会扩大到整个屏幕，这个改变只需要对layer.path做动画就行:

self.insideCircleAnimation = CAKeyframeAnimation.init(keyPath: "path")
self.insideCircleAnimation.values = [
  UIBezierPath.init(arcCenter: CGPoint.init(x: self.insideCircleLayer.frame.size.width / 2, y:self.insideCircleLayer.frame.size.width / 2), radius: self.insideCircleLayer.frame.size.width / 2, startAngle: 0, endAngle: CGFloat(M_PI * 2), clockwise: true).cgPath,
  UIBezierPath.init(arcCenter: CGPoint.init(x: self.insideCircleLayer.frame.size.width / 2, y:self.insideCircleLayer.frame.size.width / 2), radius: self.insideCircleLayer.frame.size.width / 2 - 3, startAngle: 0, endAngle: CGFloat(M_PI * 2), clockwise: true).cgPath,
  UIBezierPath.init(arcCenter: CGPoint.init(x: self.insideCircleLayer.frame.size.width / 2, y:self.insideCircleLayer.frame.size.width / 2), radius: 4500, startAngle: 0, endAngle: CGFloat(M_PI * 2), clockwise: true).cgPath]

self.insideCircleAnimation.keyTimes = [0,0.4,1]
        
self.insideCircleAnimation.autoreverses = false
        
self.insideCircleAnimation.duration = 1
        
self.insideCircleAnimation.timingFunctions = [CAMediaTimingFunction.init(name: kCAMediaTimingFunctionEaseOut),CAMediaTimingFunction.init(name: kCAMediaTimingFunctionDefault)]
        
self.insideCircleAnimation.fillMode = kCAFillModeForwards
        
self.insideCircleAnimation.calculationMode = kCAAnimationLinear
        
self.insideCircleAnimation.isRemovedOnCompletion = false

最后的path我将半径设置为了4500，这个值其实只需要设置覆盖到全屏幕就行。

这就是前半部分的所有动画，然后就要执行后半部分的动画了。

全部展开后，看到一条线，然后类似于画布似的展开，这个其实也是path属性的动画，选项的出现和关闭按钮的绘制，可以发现，关闭按钮的左右直线也是不同步的，所以里面的线也是两个layer绘制出来的，绘制一般都是直线，所以这里我是改变了view.transform：

//设置旋转
self.closeView.transform = self.closeView.transform.rotated(by: CGFloat(angle(value: 45.0)))

线条的消失和绘制是对strokeEnd做动画,因为要有时间差，所以动画分为两个，duration不一样。

self.closeLeftLoadAnimation=CABasicAnimation.init(keyPath:"strokeEnd")

self.closeLeftLoadAnimation.fromValue=0.0

self.closeLeftLoadAnimation.toValue=1.0

self.closeLeftLoadAnimation.duration=0.5

self.closeLeftLoadAnimation.isRemovedOnCompletion=false

self.closeLeftLoadAnimation.autoreverses=false

self.closeLeftLoadAnimation.fillMode=kCAFillModeForwards

//RightLayerAnimation

self.closeRightLoadAnimation = CABasicAnimation.init(keyPath: "strokeEnd")

self.closeRightLoadAnimation.fromValue = 0.0
        
self.closeRightLoadAnimation.toValue = 1.0
        
self.closeRightLoadAnimation.duration = 0.75
        
self.closeRightLoadAnimation.isRemovedOnCompletion = false
        
self.closeRightLoadAnimation.autoreverses = false
        
self.closeRightLoadAnimation.fillMode = kCAFillModeForwards

对于strokeEnd和strokeStart属性我是这样理解的。

它们的范围都是[0,1]
`strokeEnd`代表当前描绘终点的位置比上终点位置的百分比，所以值从[0,1]就是绘制出来的过程。
`strokeStart`代表当前描绘开始点位置比上终点位置的百分比,所以值从[0,1]就是消失的过程。

选中之后消失的动画就全部这些动画的反向了，动画的顺序问题我还是使用kvc去区分的，整个控件就完成啦。

使用

let boxView = MXCheckBoxView.init
(items :["some items",""],parentView: self.view)

self.boxView.delegate = self

self.boxView.show()

实现这个代理方法之后，会在点击之后调用代理(关闭不会回调)

protocolMXCheckBoxViewDelegate{

func checkBox(checkBoxView :MXCheckBoxView,didSelect row :Int)

}

完整代码

地址：GitHub