Swift 3 打钩动画

demo.gif

实现思路:自定义view,用贝赛尔曲线绘制三条线段,利用CAShapeLayer做个简单的动画
其中三条线段的位置,我是找设计师要的

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

调用示例

B7676F5A-7496-4BD8-B638-EAC81FF66B4C.png

项目示例

demo.gif

奇鱼旅行app新版已上线,欢迎大家体验,如有建议可留言,谢谢