IOS Animation-贝塞尔曲线与Layer简单篇(一)

时间:2023-03-08 18:31:42
IOS Animation-贝塞尔曲线与Layer简单篇(一)

IOS Animation-贝塞尔曲线与Layer简单篇

swift篇

1.介绍

贝塞尔曲线:

  贝塞尔曲线是计算机图形图像造型的基本工具,是图形造型运用得最多的基本线条之一。它通过控制曲线上的四个点(起始点、终止点以及两个相互分离的中间点)来创造、编辑图形。

  一般的矢量图形软件通过它来精确画出曲线,贝兹曲线由线段与节点组成,节点是可拖动的支点,线段像可伸缩的皮筋,我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。

Layer:

  CALayer(层)是屏幕上的一个矩形区域,在每一个UIView中都包含一个根CALayer,在UIView上的所有视觉效果都是在这个Layer上进行的。Layer有很多种,最常用也是最基本的是CALayer。

  Layer是处理‘绘制’的事情,把它想象成一个画布。View相当于ps中的图片,layer相当于图片view的图层。view是通过layer画出的,view是layer的代理。

2.简单代码编写

1)简单在view上加一层layer。

     func addSubLayer() {
let layer = CAShapeLayer();//定义一个layer
layer.frame = CGRectMake(, , , );//坐标
layer.backgroundColor = UIColor.blueColor().CGColor;//CG颜色
self.view.layer.addSublayer(layer);//在view上添加layer
}

2)通过赛贝尔曲线,画一个矩形在layer上面

     func addBezierWithRect() {
let layer = CAShapeLayer() //新建layer
let path = UIBezierPath.init(rect: CGRectMake(, , , )) //初始化bezier曲线--矩形
layer.path = path.CGPath //在layer上赋予曲线的路径
layer.fillColor = UIColor.clearColor().CGColor //layer的填充颜色
layer.strokeColor = UIColor.blueColor().CGColor //layer的边框颜色
self.view.layer.addSublayer(layer) //添加layer
}

3)画一个圆角的矩形

     func addBezierWithRoundRect() {
let layer = CAShapeLayer()
let path = UIBezierPath.init(roundedRect: CGRectMake(, , , ), cornerRadius: ) //定义圆角矩形
layer.path = path.CGPath
layer.fillColor = UIColor.clearColor().CGColor
layer.strokeColor = UIColor.redColor().CGColor
self.view.layer.addSublayer(layer)
}

4)画一个圆形

     func addBezierWithCircular() {
let layer = CAShapeLayer()
let circularPath = UIBezierPath(arcCenter: CGPoint.init(x: ,y: ), radius: , startAngle: , endAngle: CGFloat(*M_PI), clockwise: true)//定义一个圆形
layer.path = circularPath.CGPath
layer.fillColor = UIColor.clearColor().CGColor
layer.strokeColor = UIColor.greenColor().CGColor self.view.layer.addSublayer(layer)
}

5)画一条曲线

     func addBezierWithCurve() {
let startPoint = CGPoint(x: , y: )//曲线开始位置
let endPoint = CGPoint(x: , y: )//曲线终点位置
let controlPoint = CGPoint(x: , y: )//曲线中间位置 let layer = CAShapeLayer()
let quxianPath = UIBezierPath()
quxianPath.moveToPoint(startPoint) //首先移动到初始点
quxianPath.addQuadCurveToPoint(endPoint, controlPoint: controlPoint) //定义终点点和中间点
layer.path = quxianPath.CGPath
layer.fillColor = UIColor.clearColor().CGColor
layer.strokeColor = UIColor.greenColor().CGColor
self.view.layer.addSublayer(layer)
}

如果想结合动画来用,可以看文章:CAShapeLayer、UIBezierPath与Animation的结合

可以关注本人的公众号,多年经验的原创文章共享给大家。

IOS Animation-贝塞尔曲线与Layer简单篇(一)