UIBezierPathStudyDemo

import UIKit
import XCPlayground

//创建view
let myView = UIView(frame:CGRectMake(0, 0, 300, 200))
//实时显示TimeLine
XCPlaygroundPage.currentPage.liveView = myView
myView.backgroundColor = UIColor.whiteColor()


/************ 打开相应的注释, 就会自动显示在Timeline里面了*******/

/***********************基础使用****************************/
// 创建layer
let myLayer = CAShapeLayer()
myLayer.frame = CGRectMake(0, 0
    , 100, 50)
//myLayer.backgroundColor = UIColor.yellowColor().CGColor

//创建贝塞尔曲线
//画正方形
let path = UIBezierPath(rect: CGRectMake(50, 10, 50, 50))
//圆角长方形
let path2 = UIBezierPath(roundedRect: CGRectMake(50, 10, 80, 50), cornerRadius: 25)


//画圆
let radius:CGFloat = 30.0;
let startAngle:CGFloat = 0.0;
let endAngle:CGFloat = CGFloat(M_PI * 2)

let path3 = UIBezierPath(arcCenter: myView.center, radius: radius, startAngle: startAngle, endAngle: endAngle, clockwise: true)

//赋值path绘图案
myLayer.path = path3.CGPath;
//layer填充颜色
myLayer.fillColor = UIColor.redColor().CGColor

//myLayer.fillColor = UIColor.clearColor().CGColor
//layer描边颜色
myLayer.strokeColor = UIColor.whiteColor().CGColor
//添加layerd到view
myView.layer.addSublayer(myLayer)

/***********************基础使用****************************/

/*
/***************通过控制点画贝塞尔曲线********************/
//开始点
let startPoint   = CGPointMake(50, 100)
//结束点
let endPoint     = CGPointMake(250, 100)
//中间控制点
//let controlPoint = CGPointMake(150, 40)
let controlPoint = CGPointMake(116, 40)
let controlPoint2 = CGPointMake(182, 180)
//红色标示正方形begin
let layer1             = CALayer()
layer1.frame           = CGRectMake(startPoint.x, startPoint.y, 5, 5)
layer1.backgroundColor = UIColor.redColor().CGColor
let layer2             = CALayer()
layer2.frame           = CGRectMake(endPoint.x, endPoint.y, 5, 5)
layer2.backgroundColor = UIColor.redColor().CGColor
let layer3             = CALayer()
layer3.frame           = CGRectMake(controlPoint.x, controlPoint.y, 5, 5)
layer3.backgroundColor = UIColor.redColor().CGColor
let layer4             = CALayer()
layer4.frame           = CGRectMake(controlPoint2.x - 2.5, controlPoint2.y - 5, 5, 5)
layer4.backgroundColor = UIColor.redColor().CGColor
//红色标示正方形end
//初始化
let path  = UIBezierPath()
let layer = CAShapeLayer()
//设置开始点
path.moveToPoint(startPoint)
//画线路径 参数:(结束点, 控制点)
//path.addQuadCurveToPoint(endPoint, controlPoint: controlPoint)
//多个控制点
path.addCurveToPoint(endPoint, controlPoint1: controlPoint, controlPoint2: controlPoint2)
layer.path        = path.CGPath
layer.fillColor   = UIColor.clearColor().CGColor
layer.strokeColor = UIColor.blackColor().CGColor
myView.layer.addSublayer(layer)
myView.layer.addSublayer(layer1)
myView.layer.addSublayer(layer2)
myView.layer.addSublayer(layer3)
myView.layer.addSublayer(layer4)
/***************通过控制点画贝塞尔曲线********************/
*/

/*
/***********************添加动画****************************/
private func animation1() {
    let animation = CABasicAnimation(keyPath: "strokeEnd")
    animation.fromValue = 0
    animation.toValue = 1
    animation.duration = 2
    layer.addAnimation(animation, forKey: "")
}
private func animation2() {
    layer.strokeStart = 0.5
    layer.strokeEnd = 0.5
    
    let animation = CABasicAnimation(keyPath: "strokeStart")
    animation.fromValue = 0.5
    animation.toValue = 0
    animation.duration = 2
    
    let animation2 = CABasicAnimation(keyPath: "strokeEnd")
    animation2.fromValue = 0.5
    animation2.toValue = 1
    animation2.duration = 2
    
    layer.addAnimation(animation, forKey: "")
    layer.addAnimation(animation2, forKey: "")
}
private func animation3() {
    let animation = CABasicAnimation(keyPath: "lineWidth")
    animation.fromValue = 1
    animation.toValue = 10
    animation.duration = 2
    layer.addAnimation(animation, forKey: "")
}
//animation1()
animation2()
animation3()
/***********************添加动画****************************/
*/

/*
/******************画不标准图形**********************/
let finalSize = CGSizeMake(CGRectGetWidth(myView.frame), 200)
let layerHeight = finalSize.height * 0.2
let layer = CAShapeLayer()
let bezier = UIBezierPath()
//左上角点
bezier.moveToPoint(CGPointMake(0, finalSize.height - layerHeight))
//画线到左下角
bezier.addLineToPoint(CGPointMake(0, finalSize.height - 1))
//画线到右下角
bezier.addLineToPoint(CGPointMake(finalSize.width, finalSize.height-1))
//画线到右上角
bezier.addLineToPoint(CGPointMake(finalSize.width, finalSize.height - layerHeight))
//从右上角画贝塞尔曲线到左上角
let controlP = CGPointMake(finalSize.width * 0.5, finalSize.height - layerHeight * 2)
bezier.addQuadCurveToPoint(CGPointMake(0, finalSize.height - layerHeight), controlPoint: controlP)
layer.path = bezier.CGPath
layer.fillColor = UIColor.redColor().CGColor
myView.layer.addSublayer(layer)
/******************画不标准图形**********************/
*/


/*
/******************画微信眼睛**********************/
//first
let eyeFirstLightLayer = CAShapeLayer()
let centerPoint        = CGPointMake(CGRectGetWidth(myView.frame) * 0.5, CGRectGetHeight(myView.frame) * 0.5)
let startAngle         = CGFloat(230.0 / 180.0 * M_PI)
let endAngle           = CGFloat(265.0 / 180.0 * M_PI)
let path = UIBezierPath(arcCenter: centerPoint, radius: CGRectGetWidth(myView.frame) * 0.1, startAngle:startAngle, endAngle: endAngle, clockwise: true)
eyeFirstLightLayer.borderColor = UIColor.blackColor().CGColor
eyeFirstLightLayer.lineWidth   = 5.0
eyeFirstLightLayer.path        = path.CGPath
eyeFirstLightLayer.fillColor   = UIColor.clearColor().CGColor
eyeFirstLightLayer.strokeColor = UIColor.darkGrayColor().CGColor
myView.layer.addSublayer(eyeFirstLightLayer)
//second
let eyeSecondLightLayer = CAShapeLayer()
let centerPoint2        = CGPointMake(CGRectGetWidth(myView.frame) * 0.5, CGRectGetHeight(myView.frame) * 0.5)
let startAngle2         = CGFloat(211.0 / 180.0 * M_PI)
let endAngle2           = CGFloat(220.0 / 180.0 * M_PI)
let path2 = UIBezierPath(arcCenter: centerPoint2, radius: CGRectGetWidth(myView.frame) * 0.1, startAngle:startAngle2, endAngle: endAngle2, clockwise: true)
eyeSecondLightLayer.borderColor = UIColor.blackColor().CGColor
eyeSecondLightLayer.lineWidth   = 5.0
eyeSecondLightLayer.path        = path2.CGPath
eyeSecondLightLayer.fillColor   = UIColor.clearColor().CGColor
eyeSecondLightLayer.strokeColor = UIColor.darkGrayColor().CGColor
myView.layer.addSublayer(eyeSecondLightLayer)
//ball
let eyeBallLayer    = CAShapeLayer()
let centerPointBall = CGPointMake(CGRectGetWidth(myView.frame) * 0.5, CGRectGetHeight(myView.frame) * 0.5)
let startAngleBall = CGFloat(0 / 180.0 * M_PI)
let endAngleBall   = CGFloat(360.0 / 180.0 * M_PI)
let pathBall = UIBezierPath(arcCenter: centerPointBall, radius: CGRectGetWidth(myView.frame) * 0.15, startAngle:startAngleBall, endAngle: endAngleBall, clockwise: true)
eyeBallLayer.borderColor = UIColor.blackColor().CGColor
eyeBallLayer.lineWidth   = 1.0
eyeBallLayer.path        = pathBall.CGPath
eyeBallLayer.fillColor   = UIColor.clearColor().CGColor
eyeBallLayer.strokeColor = UIColor.darkGrayColor().CGColor
eyeBallLayer.anchorPoint = CGPointMake(0.5, 0.5)
myView.layer.addSublayer(eyeBallLayer)
//topEye
let topEyeLayer       = CAShapeLayer()
let centerPointTopEye = CGPointMake(CGRectGetWidth(myView.frame) * 0.5, CGRectGetHeight(myView.frame) * 0.5)
let startAngleTopEye = CGFloat(0 / 180.0 * M_PI)
let endAngleTopEye   = CGFloat(360.0 / 180.0 * M_PI)
let pathTopEye = UIBezierPath()
pathTopEye.moveToPoint(CGPointMake(0, CGRectGetHeight(myView.frame) * 0.5))
pathTopEye.addQuadCurveToPoint(CGPointMake(CGRectGetWidth(myView.frame), CGRectGetHeight(myView.frame) * 0.5), controlPoint: CGPointMake(CGRectGetWidth(myView.frame) * 0.5, centerPointTopEye.y - centerPointTopEye.y - 20))
topEyeLayer.borderColor = UIColor.blackColor().CGColor
topEyeLayer.lineWidth   = 1.0
topEyeLayer.path        = pathTopEye.CGPath
topEyeLayer.fillColor   = UIColor.clearColor().CGColor
topEyeLayer.strokeColor = UIColor.darkGrayColor().CGColor
myView.layer.addSublayer(topEyeLayer)
//BottomEye
let bottomEyeLayer       = CAShapeLayer()
let centerPointBottomEye = CGPointMake(CGRectGetWidth(myView.frame) * 0.5, CGRectGetHeight(myView.frame) * 0.5)
let startAngleBottomEye = CGFloat(0 / 180.0 * M_PI)
let endAnglebottomEye   = CGFloat(360.0 / 180.0 * M_PI)
let pathBottomEye = UIBezierPath()
pathBottomEye.moveToPoint(CGPointMake(0, CGRectGetHeight(myView.frame) * 0.5))
pathBottomEye.addQuadCurveToPoint(CGPointMake(CGRectGetWidth(myView.frame), CGRectGetHeight(myView.frame) * 0.5), controlPoint: CGPointMake(CGRectGetWidth(myView.frame) * 0.5, centerPointBottomEye.y * 2 + 20))
bottomEyeLayer.borderColor = UIColor.blackColor().CGColor
bottomEyeLayer.lineWidth   = 1.0
bottomEyeLayer.path        = pathBottomEye.CGPath
bottomEyeLayer.fillColor   = UIColor.clearColor().CGColor
bottomEyeLayer.strokeColor = UIColor.darkGrayColor().CGColor
myView.layer.addSublayer(bottomEyeLayer)
// 动画
private func setupAnimation(){
    eyeFirstLightLayer.lineWidth  = 0.0
    eyeSecondLightLayer.lineWidth = 0.0
    eyeBallLayer.opacity          = 0.0
    bottomEyeLayer.strokeStart    = 0.5
    bottomEyeLayer.strokeEnd      = 0.5
    topEyeLayer.strokeStart       = 0.5
    topEyeLayer.strokeEnd         = 0.5
}
private func eyeAnimation1() {
    let animation = CABasicAnimation(keyPath: "lineWidth")
    animation.fromValue = 0.0
    animation.toValue   = 5.0
    animation.duration  = 2
    
    let animation2 = CABasicAnimation(keyPath: "lineWidth")
    animation2.fromValue = 0.0
    animation2.toValue   = 5.0
    animation2.duration  = 2
    
    let animation3 = CABasicAnimation(keyPath: "opacity")
    animation3.fromValue = 0.0
    animation3.toValue   = 5.0
    animation3.duration  = 5
    eyeFirstLightLayer.addAnimation(animation, forKey: "")
    eyeSecondLightLayer.addAnimation(animation2, forKey: "")
    eyeBallLayer.addAnimation(animation3, forKey: "")
    eyeFirstLightLayer.lineWidth  = 5.0
    eyeSecondLightLayer.lineWidth = 5.0
    eyeBallLayer.opacity          = 1.0
}
private func topEyeLayerAnimation() {
    let animation = CABasicAnimation(keyPath: "strokeStart")
    animation.fromValue = 0.5
    animation.toValue   = 0
    animation.duration  = 2
    
    let animation2 = CABasicAnimation(keyPath: "strokeEnd")
    animation2.fromValue = 0.5
    animation2.toValue   = 1
    animation2.duration  = 2
    
    topEyeLayer.addAnimation(animation, forKey: "")
    topEyeLayer.addAnimation(animation2, forKey: "")
    topEyeLayer.strokeStart    = 0
    topEyeLayer.strokeEnd      = 1
}
private func eyeBottomAnimation() {
    let animation = CABasicAnimation(keyPath: "strokeStart")
    animation.fromValue = 0.5
    animation.toValue   = 0
    animation.duration  = 2
    
    let animation2 = CABasicAnimation(keyPath: "strokeEnd")
    animation2.fromValue = 0.5
    animation2.toValue   = 1
    animation2.duration  = 2
    
    bottomEyeLayer.addAnimation(animation, forKey: "")
    bottomEyeLayer.addAnimation(animation2, forKey: "")
    bottomEyeLayer.strokeStart    = 0
    bottomEyeLayer.strokeEnd      = 1
}
//初始化
setupAnimation()
//中间圆动画
eyeAnimation1()
//眼睛上部分动画
topEyeLayerAnimation()
//眼睛下部分动画
eyeBottomAnimation()
/******************画微信眼睛**********************/
*/