swift 绘制、动画基础 (CAShapeLayer、CABasicAnimation)

本文通过示例详细介绍了如何使用Swift中的CAShapeLayer进行图形绘制,包括虚线、实心矩形、矩形框、圆角矩形、圆形以及贝塞尔曲线。同时,通过CABasicAnimation展示了动态效果,如线条动画和宽度变化动画。
//MARK: 绘制虚线
        let layer0 = CAShapeLayer()
        layer0.strokeColor = UIColor.green.cgColor
        layer0.lineWidth = 0.5
        //线段宽度10 间距10
        let arr :NSArray = NSArray(array: [10,10])
        //基于线段的起始位置
        layer0.lineDashPhase = 0
        layer0.lineDashPattern = arr as? [NSNumber]
        self.view.layer.addSublayer(layer0)
        //路径
        let mdotteShapePath = CGMutablePath()
        mdotteShapePath.move(to: CGPoint(x:0, y: 30))
        mdotteShapePath.addLine(to: CGPoint(x:UIScreen.main.bounds.size.width, y:30))
        layer0.path = mdotteShapePath

        //MARK: 实心矩形
        let layer = CAShapeLayer()
        layer.frame = CGRect(x:80, y:50, width:150, height:50)
        layer.backgroundColor = UIColor.green.cgColor
        view.layer.addSublayer(layer)

        //MARK: 矩形框
        let layer1 = CAShapeLayer()
        layer1.fillColor = UIColor.clear.cgColor
        layer1.strokeColor = UIColor.green.cgColor
        view.layer.addSublayer(layer1)

        let path1 = UIBezierPath(rect: CGRect(x:80, y:110, width:150, height:50))
        layer1.path = path1.cgPath

        //MARK: 圆角矩形
        let path2 = UIBezierPath(roundedRect: CGRect(x:80, y:170, width:150, height:50), cornerRadius: 50)
        let layer2 = CAShapeLayer()
        layer2.path = path2.cgPath
        layer2.fillColor = UIColor.clear.cgColor
        layer2.strokeColor = UIColor.green.cgColor
        view.layer.addSublayer(layer2)

        //MARK: 圆形
        let radius: CGFloat = 20
        let startAngle: CGFloat = 0.0
        let endAngle: CGFloat = CGFloat(M_PI * 2)
        let path3 = UIBezierPath(arcCenter: view.center, radius: radius, startAngle: startAngle, endAngle: endAngle, clockwise: true)
        let layer3 = CAShapeLayer()
        layer3.path = path3.cgPath
        layer3.fillColor = UIColor.clear.cgColor
        layer3.strokeColor = UIColor.green.cgColor
        view.layer.addSublayer(layer3)

        //MARK: 贝塞尔曲线
        let startPoint = CGPoint(x:20, y:400)
        let endPoint = CGPoint(x:320, y:400)
        let controlPoint = CGPoint(x:170, y:300)
        let controlPoint1 = CGPoint(x:120, y:300)
        let controlPoint2 = CGPoint(x:220, y:500)

       

        //曲线1
        let path10 = UIBezierPath()
        let layer10 = CAShapeLayer()
        path10.move(to: startPoint)
        path10.addQuadCurve(to: endPoint, controlPoint: controlPoint)
        layer10.path = path10.cgPath
        layer10.fillColor = UIColor.clear.cgColor
        layer10.strokeColor = UIColor.black.cgColor
        view.layer.addSublayer(layer10)


        //曲线2
        let path20 = UIBezierPath()
        let layer20 = CAShapeLayer()
        path20.move(to: startPoint)
        path20.addCurve(to: endPoint, controlPoint1: controlPoint1, controlPoint2: controlPoint2)
        layer20.path = path20.cgPath
        layer20.fillColor = UIColor.clear.cgColor
        layer20.strokeColor = UIColor.black.cgColor
        view.layer.addSublayer(layer20)

        //MARK: 动画
        //动画1
        let animation = CABasicAnimation(keyPath: "strokeEnd")
        animation.fromValue = 0
        animation.toValue = 1
        animation.duration = 2
        layer10.add(animation, forKey: "")

        //动画2
        layer20.strokeStart = 0
        layer20.strokeEnd = 1
        let animation21 = CABasicAnimation(keyPath: "strokeStart")
        //起始位置中间 结束为止左端
        animation21.fromValue = 0.5
        animation21.toValue = 0
        animation21.duration = 2
        let animation22 = CABasicAnimation(keyPath: "strokeEnd")
        //起始位置中间 结束为止右端
        animation22.fromValue = 0.5
        animation22.toValue = 1
        animation22.duration = 2
        layer20.add(animation21, forKey: "")
        layer20.add(animation22, forKey: "")

        //动画3
        let animation23 = CABasicAnimation(keyPath: "lineWidth")
        animation23.fromValue = 1
        animation23.toValue = 10
        animation23.duration = 5
        layer1.add(animation23, forKey: "")

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值