圆弧进度

2021-01-28  本文已影响0人  秋叶红90

根据尺寸变换角度

print("tan 45 \(tan((45.0/180.0 * Double.pi)))")
        var l = atan(375.00/82.0)/Double.pi  * 180
        var t:Double = 180 - l*2
        let m = 375.0/tan(t/180.0 * Double.pi)
        let x = m + 82
        print("==== \(l)  \(t)  \(m)  正方形直径  \(x)  \(x/2)")

圆弧展示和动画


import UIKit

class SHHeaderCycleProgressView: UIView {
    let  bgLayer = CAShapeLayer.init()
    let  shapeLayer = CAShapeLayer.init()
    let  gradientLayer = CAGradientLayer.init()
    /*
    // Only override draw() if you perform custom drawing.
    // An empty implementation adversely affects performance during animation.
    override func draw(_ rect: CGRect) {
        // Drawing code
    }
    */
    override func layoutSubviews() {
        super.layoutSubviews()
//        self.layer.cornerRadius = self.bounds.size.height/2
//        self.clipsToBounds = true
        self.backgroundColor = UIColor.clear
        self.addCircleWithColor()
    }
    
    
    func addCircleWithColor(color:UIColor = .yellow) {
        let startAngle:CGFloat = (90 + 24.66906118312093)/180.0*CGFloat.pi
        let endAngle:CGFloat = (90 - 24.66906118312093)/180.0*CGFloat.pi
        let centerP = CGPoint.init(x: self.bounds.size.width/2.0, y: self.bounds.size.height/2.0)
        let circlePath = UIBezierPath.init(arcCenter: centerP, radius: CGFloat(self.bounds.size.width/2.0), startAngle: startAngle, endAngle: endAngle, clockwise: false)
        
        bgLayer.frame = self.bounds;
        bgLayer.fillColor = UIColor.clear.cgColor
        bgLayer.lineWidth = 10
//        RGB(38,38,38)
        bgLayer.strokeColor = UIColor.init(red: 38.0/255.0, green: 38.0/255.0, blue: 38.0/255.0, alpha: 1).cgColor
        bgLayer.strokeStart = 0;
        bgLayer.strokeEnd = 1;
        
        bgLayer.lineCap = .round;
        bgLayer.path = circlePath.cgPath;
        if bgLayer.superlayer == nil {
            
            self.layer.addSublayer(bgLayer)
        }
        
        do{
            shapeLayer.frame = self.bounds;
            shapeLayer.fillColor = UIColor.clear.cgColor
            shapeLayer.lineWidth = 10
    //        RGB(38,38,38)
            shapeLayer.strokeColor = UIColor.red.cgColor
            shapeLayer.strokeStart = 0;
            shapeLayer.strokeEnd = 0.5;
            
            shapeLayer.lineCap = .round;
            shapeLayer.path = circlePath.cgPath;
            if shapeLayer.superlayer == nil {
                self.layer.addSublayer(shapeLayer)
            }
        }
        do{
            let x:CGFloat = (self.bounds.size.width - UIScreen.main.bounds.size.width)/2
            let leftGradientLayer = CAGradientLayer.init()
            
            leftGradientLayer.frame = CGRect.init(x: x, y: 0, width: UIScreen.main.bounds.size.width, height: self.bounds.size.height + 10)
            leftGradientLayer.colors = [UIColor.yellow.cgColor,UIColor.green.cgColor];
            leftGradientLayer.locations = [0,1]
            leftGradientLayer.startPoint = .init(x: 0, y: 1)
            leftGradientLayer.endPoint = .init(x: 1, y: 0)
            self.gradientLayer.addSublayer(leftGradientLayer)
            self.gradientLayer.mask = self.shapeLayer
            self.gradientLayer.frame = self.bounds
            self.layer.addSublayer(self.gradientLayer)

        }
        
        self.animateAm()
    }
    
    
    func animateAm() {
        self.shapeLayer.strokeStart = 0
        self.shapeLayer.strokeEnd = 0
        

        let animation = CABasicAnimation.init(keyPath: "strokeEnd")
        animation.duration = 3.0;   // 持续时间
        animation.fromValue = 0; // 从 0 开始
        animation.toValue = 1;   // 到 1 结束
        // 保持动画结束时的状态
        animation.isRemovedOnCompletion = false;
        animation.fillMode = .forwards;
        // 动画缓慢的进入,中间加速,然后减速的到达目的地。
        animation.timingFunction = CAMediaTimingFunction.init(name: CAMediaTimingFunctionName.easeInEaseOut)

        self.shapeLayer.add(animation, forKey: "")

    }
    
    
}


上一篇 下一篇

猜你喜欢

热点阅读