demo.gif
實現(xiàn)思路:自定義view,用貝賽爾曲線繪制三條線段,利用CAShapeLayer做個簡單的動畫
其中三條線段的位置,我是找設(shè)計師要的
F5433F607DBBD30B98BA32E75740B0B6.jpg
代碼很簡單
public var lineLayer = CAShapeLayer()
class CheckboxControl: UIView {
let lineWidth : CGFloat = 3.0
var lineColor : UIColor!
override func awakeFromNib() {
super.awakeFromNib()
self.layer.cornerRadius = 3.0
lineColor = UIColor.white
}
open func show() {
lineLayer = self.checkmarkLayerWithColor()
self.layer.addSublayer(lineLayer)
lineLayer.strokeStart = 0
lineLayer.strokeEnd = 0
CATransaction.begin()
CATransaction.setCompletionBlock {
lineLayer.strokeStart = 0
lineLayer.strokeEnd = 1
}
CATransaction.commit()
}
open func hide() {
CATransaction.begin()
CATransaction.setCompletionBlock {
lineLayer.strokeStart = 1
lineLayer.strokeEnd = 1
}
CATransaction.commit()
}
func checkmarkLayerWithColor()-> CAShapeLayer{
let ret = CAShapeLayer()
ret.strokeColor = lineColor.cgColor
ret.fillColor = UIColor.clear.cgColor
ret.lineCap = kCALineCapRound
ret.lineJoin = kCALineCapRound
ret.lineWidth = lineWidth;
ret.path = self.checkMarkPath().cgPath
return ret
}
func checkMarkPath()->UIBezierPath{
let path = UIBezierPath()
path.move(to: self.startPoint())
path.addLine(to: self.middlePoint())
path.addLine(to: self.endPoint())
return path
}
func startPoint()-> CGPoint{
return CGPoint.init(x: 27, y: 12)
}
func middlePoint()-> CGPoint{
return CGPoint.init(x: 35, y: 21)
}
func endPoint()-> CGPoint{
return CGPoint.init(x: 48, y: 7)
}
}
調(diào)用示例
B7676F5A-7496-4BD8-B638-EAC81FF66B4C.png
項目示例
demo.gif
奇魚旅行app新版已上線,歡迎大家體驗,如有建議可留言,謝謝
