最终实现的效果为:
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
网友评论