Swift中用UIBezierPath、CAShapeLayer

// MARK:  加载小圆圈
    func addLoadingAnimation() {
        if self.gradientLayer != nil {
            self.gradientLayer?.removeFromSuperlayer()
            self.gradientLayer = nil
        }
        // 形状
        let lineWidth: CGFloat = 2
        let middleColor = UIColorFromRGB(rgbValue: 0xcceaff)
        let circleLayer = CAShapeLayer.init()
        circleLayer.lineWidth = lineWidth;
//        circleLayer.frame = self.translateTypeView.bounds
        circleLayer.fillColor = UIColor.clear.cgColor
        circleLayer.strokeColor = UIColor.black.cgColor
        
        // 曲线
//        let circlePath = UIBezierPath.init(arcCenter: CGPoint(x: self.translateTypeView.width / 2, y: self.translateTypeView.height / 2), radius: self.translateTypeView.height / 2, startAngle: CGFloat(-Double.pi / 2), endAngle: CGFloat(Double.pi * 2), clockwise: true) // 有毛边
        let circlePath = UIBezierPath.init(ovalIn: self.translateTypeView.bounds)
        circleLayer.path = circlePath.cgPath
        
        // 渐变
        self.gradientLayer = CALayer.init()
        // 渐变1
        let gradient = CAGradientLayer.init()
        gradient.frame = CGRect(x: -lineWidth * 2, y: -lineWidth * 2, width: self.translateTypeView.width / 2 + lineWidth * 2, height: self.translateTypeView.height + lineWidth*3)
        gradient.colors = [COLOR_HIGHT_LIGHT_SYSTEM.cgColor, middleColor.cgColor]
//        gradient.locations = [NSNumber(value: 0.1), NSNumber(value:1.0)] // 设置比例
        gradient.startPoint = CGPoint(x: 0.0, y: 0.0)
        gradient.endPoint = CGPoint(x: 0.0, y: 1.0)
        gradient.shadowPath = circlePath.cgPath
        
        // 渐变1
        let gradient2 = CAGradientLayer.init()
        gradient2.frame = CGRect(x: self.translateTypeView.width / 2, y: -lineWidth * 2, width: self.translateTypeView.width / 2 + lineWidth * 2, height: self.translateTypeView.height + lineWidth*3)
        gradient2.colors = [UIColor.white.cgColor, middleColor.cgColor]
//        gradient2.locations = [NSNumber(value: 0.1), NSNumber(value:1.0)]
        gradient2.startPoint = CGPoint(x: 0.0, y: 0.0)
        gradient2.endPoint = CGPoint(x: 0.0, y: 1.0)
        gradient2.shadowPath = circlePath.cgPath
        
        gradientLayer!.addSublayer(gradient)
        gradientLayer!.addSublayer(gradient2)
        gradientLayer!.mask = circleLayer
        
        // CABasicAnimation strokeEnd动画
        let pathAnimation = CABasicAnimation()
        pathAnimation.keyPath = "strokeEnd"
        pathAnimation.duration = 1.0
        pathAnimation.fillMode = kCAFillModeForwards
        pathAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
        pathAnimation.fromValue = 0.0
        pathAnimation.toValue = 1.0
        pathAnimation.repeatCount = 1
        circleLayer.add(pathAnimation, forKey: "strokeEndAnimationcircle")
        
        // 旋转z
        let rotateAnima = CABasicAnimation.init(keyPath: "transform.rotation.z")
        rotateAnima.duration = 1.0
        rotateAnima.repeatCount = HUGE
        rotateAnima.fromValue = NSNumber(value: 0.0)
        rotateAnima.toValue = NSNumber(value: Double.pi * 2)
        rotateAnima.beginTime = CACurrentMediaTime() + 3.0 / 4.0
        
        gradientLayer!.add(rotateAnima, forKey: "rotateAnimationcircle")
        gradientLayer!.frame = self.translateTypeView.bounds  // 一定要设置frame，不然anchorPoint(锚点--旋转中心点始终是（0,0）)
        self.translateTypeView.layer.addSublayer(gradientLayer!)
    }

对勾

 // MARK: 对勾
    func addRightSymbolAnimation() {
        if self.rightSymbolLayer != nil {
            self.rightSymbolLayer?.removeFromSuperlayer()
            self.rightSymbolLayer = nil
        }
        // 形状
        let lineWidth: CGFloat = 1
        self.rightSymbolLayer = CAShapeLayer.init()
        rightSymbolLayer!.lineWidth = lineWidth;
        //        circleLayer.frame = self.translateTypeView.bounds
        rightSymbolLayer!.fillColor = UIColor.clear.cgColor
        rightSymbolLayer!.strokeColor = COLOR_HIGHT_LIGHT_SYSTEM.cgColor
        
        // 曲线
//        let bezierPath = UIBezierPath.init(arcCenter: CGPoint(x: self.translateTypeView.width / 2, y: self.translateTypeView.height / 2), radius: self.translateTypeView.width / 2, startAngle: 0, endAngle: CGFloat(Double.pi * 2), clockwise: true)  // 画圈
        
        let bezierPath = UIBezierPath.init()
        // 对拐角和终点的处理
        bezierPath.lineCapStyle = CGLineCap.round  // 圆角
        bezierPath.lineJoinStyle = CGLineJoin.round
        
        // 画直线
        bezierPath.move(to: CGPoint(x: self.translateTypeView.width / 5, y: self.translateTypeView.width / 2))
        bezierPath.addLine(to: CGPoint(x: self.translateTypeView.width / 5.0 * 2.0, y: self.translateTypeView.width / 4.0 * 3))
        // 画斜线
        bezierPath.addLine(to: CGPoint(x: self.translateTypeView.width / 8.0 * 6, y: self.translateTypeView.width / 4.0 + 4))
        
        rightSymbolLayer!.path = bezierPath.cgPath
        
        // 动画设置
        // CABasicAnimation strokeEnd动画
        let pathAnimation = CABasicAnimation()
        pathAnimation.keyPath = "strokeEnd"
        pathAnimation.duration = 0.5
        pathAnimation.fillMode = kCAFillModeForwards
        pathAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
        pathAnimation.fromValue = 0.0
        pathAnimation.toValue = 1.0
        pathAnimation.repeatCount = 1
        rightSymbolLayer!.add(pathAnimation, forKey: "strokeEndAnimationcircle")
        
        self.translateTypeView.layer.addSublayer(rightSymbolLayer!)
    }

圆圈效果图
20190425162525638.png