CAShapeLayer:是CALayer的子類，負責視圖的顯示—>CAShapeLayer有一個神奇的屬性path,給它一個path它就能變成你想要的形狀，配合UIBezierPath（貝賽爾曲線），可以隨意畫圖。
要注意的是，這里就不要用 layer.backgroundColor?這個屬性了，而要使用layer.fillColor?和 layer.strokeColor?，前者代表設(shè)置這個 Layer 的填充色，后者代表設(shè)置它的邊框色
1: ?Bezier ?Path ?:每一個連接的直線或者曲線段的集合成為subpath。一個UIBezierPath對象定義一個完整的路徑包括一個或者多個subpaths
微信下拉拍小視頻的那只眼睛很有趣，來模仿一下那個效果吧，它是這樣的
首先你得畫出這只眼睛，這是眼睛包括5個部分組
@property?(strong,?nonatomic)?CAShapeLayer?*eyeFirstLightLayer;
@property?(strong,?nonatomic)?CAShapeLayer?*eyeSecondLightLayer;
@property?(strong,?nonatomic)?CAShapeLayer?*eyeballLayer;
@property?(strong,?nonatomic)?CAShapeLayer?*topEyesocketLayer;
@property?(strong,?nonatomic)?CAShapeLayer?*bottomEyesocketLayer;
然后，還是通過 UIBezierPath 和 CAShapeLayer 這樣的老套路來畫，代碼較多
-?(CAShapeLayer?*)eyeFirstLightLayer?{
if(!_eyeFirstLightLayer)?{
_eyeFirstLightLayer?=?[CAShapeLayer?layer];
CGPoint?center?=?CGPointMake(CGRectGetWidth(self.frame)?/?2,?CGRectGetHeight(self.frame)?/?2);
UIBezierPath?*path?=?[UIBezierPath?bezierPathWithArcCenter:center
radius:CGRectGetWidth(self.frame)?*?0.2
startAngle:(230.f?/?180.f)?*?M_PI
endAngle:(265.f?/?180.f)?*?M_PI
clockwise:YES];
_eyeFirstLightLayer.borderColor?=?[UIColor?blackColor].CGColor;
_eyeFirstLightLayer.lineWidth?=?5.f;
_eyeFirstLightLayer.path?=?path.CGPath;
_eyeFirstLightLayer.fillColor?=?[UIColor?clearColor].CGColor;
_eyeFirstLightLayer.strokeColor?=?[UIColor?whiteColor].CGColor;
}
return_eyeFirstLightLayer;
}
-?(CAShapeLayer?*)eyeSecondLightLayer?{
if(!_eyeSecondLightLayer)?{
_eyeSecondLightLayer?=?[CAShapeLayer?layer];
CGPoint?center?=?CGPointMake(CGRectGetWidth(self.frame)?/?2,?CGRectGetHeight(self.frame)?/?2);
UIBezierPath?*path?=?[UIBezierPath?bezierPathWithArcCenter:center
radius:CGRectGetWidth(self.frame)?*?0.2
startAngle:(211.f?/?180.f)?*?M_PI
endAngle:(220.f?/?180.f)?*?M_PI
clockwise:YES];
_eyeSecondLightLayer.borderColor?=?[UIColor?blackColor].CGColor;
_eyeSecondLightLayer.lineWidth?=?5.f;
_eyeSecondLightLayer.path?=?path.CGPath;
_eyeSecondLightLayer.fillColor?=?[UIColor?clearColor].CGColor;
_eyeSecondLightLayer.strokeColor?=?[UIColor?whiteColor].CGColor;
}
return_eyeSecondLightLayer;
}
-?(CAShapeLayer?*)eyeballLayer?{
if(!_eyeballLayer)?{
_eyeballLayer?=?[CAShapeLayer?layer];
CGPoint?center?=?CGPointMake(CGRectGetWidth(self.frame)?/?2,?CGRectGetHeight(self.frame)?/?2);
UIBezierPath?*path?=?[UIBezierPath?bezierPathWithArcCenter:center
radius:CGRectGetWidth(self.frame)?*?0.3
startAngle:(0.f?/?180.f)?*?M_PI
endAngle:(360.f?/?180.f)?*?M_PI
clockwise:YES];
_eyeballLayer.borderColor?=?[UIColor?blackColor].CGColor;
_eyeballLayer.lineWidth?=?1.f;
_eyeballLayer.path?=?path.CGPath;
_eyeballLayer.fillColor?=?[UIColor?clearColor].CGColor;
_eyeballLayer.strokeColor?=?[UIColor?whiteColor].CGColor;
_eyeballLayer.anchorPoint?=?CGPointMake(0.5,?0.5);
}
return_eyeballLayer;
}
-?(CAShapeLayer?*)topEyesocketLayer?{
if(!_topEyesocketLayer)?{
_topEyesocketLayer?=?[CAShapeLayer?layer];
CGPoint?center?=?CGPointMake(CGRectGetWidth(self.frame)?/?2,?CGRectGetHeight(self.frame)?/?2);
UIBezierPath?*path?=?[UIBezierPath?bezierPath];
[path?moveToPoint:CGPointMake(0,?CGRectGetHeight(self.frame)?/?2)];
[path?addQuadCurveToPoint:CGPointMake(CGRectGetWidth(self.frame),?CGRectGetHeight(self.frame)?/?2)
controlPoint:CGPointMake(CGRectGetWidth(self.frame)?/?2,?center.y?-?center.y?-?20)];
_topEyesocketLayer.borderColor?=?[UIColor?blackColor].CGColor;
_topEyesocketLayer.lineWidth?=?1.f;
_topEyesocketLayer.path?=?path.CGPath;
_topEyesocketLayer.fillColor?=?[UIColor?clearColor].CGColor;
_topEyesocketLayer.strokeColor?=?[UIColor?whiteColor].CGColor;
}
return_topEyesocketLayer;
}
-?(CAShapeLayer?*)bottomEyesocketLayer?{
if(!_bottomEyesocketLayer)?{
_bottomEyesocketLayer?=?[CAShapeLayer?layer];
CGPoint?center?=?CGPointMake(CGRectGetWidth(self.frame)?/?2,?CGRectGetHeight(self.frame)?/?2);
UIBezierPath?*path?=?[UIBezierPath?bezierPath];
[path?moveToPoint:CGPointMake(0,?CGRectGetHeight(self.frame)?/?2)];
[path?addQuadCurveToPoint:CGPointMake(CGRectGetWidth(self.frame),?CGRectGetHeight(self.frame)?/?2)
controlPoint:CGPointMake(CGRectGetWidth(self.frame)?/?2,?center.y?+?center.y?+?20)];
_bottomEyesocketLayer.borderColor?=?[UIColor?blackColor].CGColor;
_bottomEyesocketLayer.lineWidth?=?1.f;
_bottomEyesocketLayer.path?=?path.CGPath;
_bottomEyesocketLayer.fillColor?=?[UIColor?clearColor].CGColor;
_bottomEyesocketLayer.strokeColor?=?[UIColor?whiteColor].CGColor;
}
return_bottomEyesocketLayer;
}
然后更改一下某些屬性的值，方便稍后的動畫
-?(void)setupAnimation?{
self.eyeFirstLightLayer.lineWidth?=?0.f;
self.eyeSecondLightLayer.lineWidth?=?0.f;
self.eyeballLayer.opacity?=?0.f;
_bottomEyesocketLayer.strokeStart?=?0.5f;
_bottomEyesocketLayer.strokeEnd?=?0.5f;
_topEyesocketLayer.strokeStart?=?0.5f;
_topEyesocketLayer.strokeEnd?=?0.5f;
}
最后根據(jù) UIScrollView 的?contentOffset?來控制各種屬性，辦法較笨，但管用。
轉(zhuǎn)自：放肆地使用UIBezierPath和CAShapeLayer畫各種圖形
學無止境，做個記錄
2017-01-12-SXH
