美文网首页
圆弧进度

圆弧进度

作者: 秋叶红90 | 来源:发表于2021-01-28 15:58 被阅读0次

根据尺寸变换角度

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: "")

    }
    
    
}


相关文章

  • 圆弧进度

    根据尺寸变换角度 圆弧展示和动画

  • 自定义 View 实战 04 - 圆形进度条

    圆形进度条分析: 圆 圆弧 进度值 所以这里我们先用 drawCircle画出圆,再使用drawArc画出圆弧(这...

  • iOS创建渐变色圆环

    需求 思路 用贝塞尔曲线来画圆淡黄色的一个圆弧,和表示进度的一条圆弧分开来画渐变色:找到进度圆弧的起点坐标和终点坐...

  • 自定义圆形进度条

    原理就是画一个圆弧,然后用内圆去覆盖圆弧实心的地方,然后写一个监听去时时更新进度条的进度.分为外圆,内圆,文字进度...

  • 圆弧进度条

    已经很久没有写文章了,这次来说说环形进度条吧。 如上图所示,与设计稿还原度99%,本来想忽悠设计师用echars的...

  • 绘图相关小Demo

    扇形进度指示器 SimpleProgress 优酷播放按钮 步骤 绘制圆弧,绘制竖线,绘制三角 竖线圆弧添加str...

  • 2019-05-09

    圆形进度条,网上代码一大片,就不多说了 现在要实现的是进度圆弧,设置圆弧的起始点颜色和终点颜色 而不是设置半圆的起...

  • iOS 的颜色渐变圆弧

    iOS 的颜色渐变 实现一个圆弧进度条主要分为三步 一、画圆弧这里用的贝赛尔曲线,就是这个东西:UIBezierP...

  • iOS 半圆弧进度条

    1.效果图 2.代码 .h .m 使用

  • Swift - 简单圆弧进度条实现

    Step 0.在重写视图控件draw方法实现

网友评论

      本文标题:圆弧进度

      本文链接:https://www.haomeiwen.com/subject/gpfxtltx.html