美文网首页
Swift 3.0笔记 UIBezierPath,UIBasic

Swift 3.0笔记 UIBezierPath,UIBasic

作者: 那些喧嚣 | 来源:发表于2020-03-19 11:03 被阅读0次

获取贝塞尔曲线上的点,在该点上创建UIView

菜鸟网络学习中,学习了网上很多方法,在这里做个笔记,

-func viewWithLayer1() {
        let viewHeight = 200.0
        let viewToLayer = UIView.init(frame: CGRect.init(x: 0, y: 0, width: Int(SCREEN_WIDTH), height: Int(viewHeight)))
        viewToLayer.backgroundColor = UIColor.brown

        self.view.addSubview(viewToLayer)

        let layerHeight = viewHeight*0.2
        let layer = CAShapeLayer()
        let bezier = UIBezierPath()

        //起始的点,一共对应了4个点,最后加上控制点
        bezier.move(to: CGPoint.init(x: 0, y: viewHeight - layerHeight))
        bezier.addLine(to: CGPoint.init(x: 0, y: viewHeight - 1))
        bezier.addLine(to: CGPoint.init(x: SCREEN_WIDTH, y: CGFloat(viewHeight - 1)))
        bezier.addLine(to: CGPoint.init(x: SCREEN_WIDTH, y: CGFloat(viewHeight - layerHeight)))
        //to endPoint: CGPoint, controlPoint: CGPoint   **to:结束的点 controlPoint:控制的点 **
        bezier.addQuadCurve(to: CGPoint.init(x: 0, y: CGFloat(viewHeight - layerHeight)), controlPoint: CGPoint.init(x: SCREEN_WIDTH/2, y: CGFloat(viewHeight - layerHeight - 80)))

        let frame = CAKeyframeAnimation.init(keyPath: "position")
        frame.path = bezier.cgPath
        frame.isRemovedOnCompletion = true

        layer.path = bezier.cgPath
        layer.fillColor = UIColor.black.cgColor
        viewToLayer.layer.addSublayer(layer)

//time:传时间点,范围是0到1,0.5就是中间咯
        let targtPoint = getBezierPoint(time: 0.5, star: CGPoint.init(x: 0, y: viewHeight - layerHeight), end: CGPoint.init(x: SCREEN_WIDTH, y: CGFloat(viewHeight - layerHeight)), control: CGPoint.init(x: SCREEN_WIDTH/2, y: CGFloat(viewHeight - layerHeight - 80)))

        let addView1 = UIView.init(frame: CGRect.init(x: 0, y: 0, width: 100, height: 40))
        addView1.layer.cornerRadius = 15
//获取到贝塞尔曲线上想要的点,设置成中心点
        addView1.center = targtPoint
        addView1.backgroundColor = UIColor.yellow
        viewToLayer.addSubview(addView1)
}

// MARK: - 获取贝塞尔曲线上的点
    func getBezierPoint(time:CGFloat,star:CGPoint,end:CGPoint,control:CGPoint) -> CGPoint {

        let a = pow(1-time, 2) * star.x
        let b = 2*time*(1-time)*control.x
        let c = pow(time, 2)*end.x

        let returnX = a + b + c

        let d = pow(1-time, 2) * star.y
        let e = 2*time*(1-time)*control.y
        let f = pow(time, 2)*end.y

        let returnY = d + e + f

        return CGPoint.init(x:returnX,y:returnY)
    }

画一个很简单的加载的饼图

    var round = CAShapeLayer()
    var roundPath = UIBezierPath()
    var drawTimer:Timer!
    //画饼的起始位置
    var beginAngle = Double.pi*3/2
    //画饼的终点位置
    var endAngle = Double.pi*3/2 + Double.pi*2/10

    override func viewDidLoad() {
        super.viewDidLoad()

        self.view.backgroundColor = UIColor.white
        self.navigationController?.delegate = self
//隔0.2秒执行一次timerAction方法
        drawTimer = Timer.scheduledTimer(timeInterval: 0.2, target: self, selector: #selector(timerAction), userInfo: nil, repeats: true)
        BezierDrawRound()

        // Do any additional setup after loading the view.
    }

 func BezierDrawRound() {
        roundPath.addArc(withCenter: CGPoint.init(x: 0, y: 0), radius: 40, startAngle: CGFloat(beginAngle), endAngle: CGFloat(endAngle), clockwise: true)
        //加一个点,圆点(位置是根据上面的圆心设置:withCenter:)
        roundPath.addLine(to: CGPoint.init(x: 0, y: 0))
        //连接点连线,填充
        roundPath.fill()
        roundPath.close()

        round.frame = CGRect.init(x: self.view.center.x, y: 300, width: 100, height: 100)
        round.lineWidth = 5
        round.path = roundPath.cgPath
        round.fillColor = UIColor.init(red: 0, green: 0, blue: 0, alpha: 0.1).cgColor

        self.view.layer.addSublayer(round)
    }

    // MARK: - 计时器执行方法
    @objc func timerAction() {
        endAngle += Double.pi/10
        if endAngle > beginAngle + Double.pi*2 {
            drawTimer.invalidate()
        }
        BezierDrawRound()
    }

相关文章

网友评论

      本文标题:Swift 3.0笔记 UIBezierPath,UIBasic

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