效果图
首先你得画出这只眼睛，这是眼睛包括5个部分组成：
1 @property (strong, nonatomic) CAShapeLayer *eyeFirstLightLayer; 2 @property (strong, nonatomic) CAShapeLayer *eyeSecondLightLayer; 3 @property (strong, nonatomic) CAShapeLayer *eyeballLayer; 4 @property (strong, nonatomic) CAShapeLayer *topEyesocketLayer; 5 @property (strong, nonatomic) CAShapeLayer *bottomEyesocketLayer;
然后，还是通过 UIBezierPath 和 CAShapeLayer 这样的老套路来画，代码较多：
1 - (CAShapeLayer *)eyeFirstLightLayer {
2 if (!_eyeFirstLightLayer) {
3 _eyeFirstLightLayer = [CAShapeLayer layer];
4 CGPoint center = CGPointMake(CGRectGetWidth(self.frame) / 2, CGRectGetHeight(self.frame) / 2);
5 UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center
6 radius:CGRectGetWidth(self.frame) * 0.2
7 startAngle:(230.f / 180.f) * M_PI
8 endAngle:(265.f / 180.f) * M_PI
9 clockwise:YES];
10 _eyeFirstLightLayer.borderColor = [UIColor blackColor].CGColor;
11 _eyeFirstLightLayer.lineWidth = 5.f;
12 _eyeFirstLightLayer.path = path.CGPath;
13 _eyeFirstLightLayer.fillColor = [UIColor clearColor].CGColor;
14 _eyeFirstLightLayer.strokeColor = [UIColor whiteColor].CGColor;
15 }
16 return _eyeFirstLightLayer;
17 }
18
19 - (CAShapeLayer *)eyeSecondLightLayer {
20 if (!_eyeSecondLightLayer) {
21 _eyeSecondLightLayer = [CAShapeLayer layer];
22 CGPoint center = CGPointMake(CGRectGetWidth(self.frame) / 2, CGRectGetHeight(self.frame) / 2);
23 UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center
24 radius:CGRectGetWidth(self.frame) * 0.2
25 startAngle:(211.f / 180.f) * M_PI
26 endAngle:(220.f / 180.f) * M_PI
27 clockwise:YES];
28 _eyeSecondLightLayer.borderColor = [UIColor blackColor].CGColor;
29 _eyeSecondLightLayer.lineWidth = 5.f;
30 _eyeSecondLightLayer.path = path.CGPath;
31 _eyeSecondLightLayer.fillColor = [UIColor clearColor].CGColor;
32 _eyeSecondLightLayer.strokeColor = [UIColor whiteColor].CGColor;
33
34 }
35 return _eyeSecondLightLayer;
36 }
37
38 - (CAShapeLayer *)eyeballLayer {
39 if (!_eyeballLayer) {
40 _eyeballLayer = [CAShapeLayer layer];
41 CGPoint center = CGPointMake(CGRectGetWidth(self.frame) / 2, CGRectGetHeight(self.frame) / 2);
42 UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center
43 radius:CGRectGetWidth(self.frame) * 0.3
44 startAngle:(0.f / 180.f) * M_PI
45 endAngle:(360.f / 180.f) * M_PI
46 clockwise:YES];
47 _eyeballLayer.borderColor = [UIColor blackColor].CGColor;
48 _eyeballLayer.lineWidth = 1.f;
49 _eyeballLayer.path = path.CGPath;
50 _eyeballLayer.fillColor = [UIColor clearColor].CGColor;
51 _eyeballLayer.strokeColor = [UIColor whiteColor].CGColor;
52 _eyeballLayer.anchorPoint = CGPointMake(0.5, 0.5);
53
54 }
55 return _eyeballLayer;
56 }
57
58 - (CAShapeLayer *)topEyesocketLayer {
59 if (!_topEyesocketLayer) {
60 _topEyesocketLayer = [CAShapeLayer layer];
61 CGPoint center = CGPointMake(CGRectGetWidth(self.frame) / 2, CGRectGetHeight(self.frame) / 2);
62 UIBezierPath *path = [UIBezierPath bezierPath];
63 [path moveToPoint:CGPointMake(0, CGRectGetHeight(self.frame) / 2)];
64 [path addQuadCurveToPoint:CGPointMake(CGRectGetWidth(self.frame), CGRectGetHeight(self.frame) / 2)
65 controlPoint:CGPointMake(CGRectGetWidth(self.frame) / 2, center.y - center.y - 20)];
66 _topEyesocketLayer.borderColor = [UIColor blackColor].CGColor;
67 _topEyesocketLayer.lineWidth = 1.f;
68 _topEyesocketLayer.path = path.CGPath;
69 _topEyesocketLayer.fillColor = [UIColor clearColor].CGColor;
70 _topEyesocketLayer.strokeColor = [UIColor whiteColor].CGColor;
71 }
72 return _topEyesocketLayer;
73 }
74
75 - (CAShapeLayer *)bottomEyesocketLayer {
76 if (!_bottomEyesocketLayer) {
77 _bottomEyesocketLayer = [CAShapeLayer layer];
78 CGPoint center = CGPointMake(CGRectGetWidth(self.frame) / 2, CGRectGetHeight(self.frame) / 2);
79 UIBezierPath *path = [UIBezierPath bezierPath];
80 [path moveToPoint:CGPointMake(0, CGRectGetHeight(self.frame) / 2)];
81 [path addQuadCurveToPoint:CGPointMake(CGRectGetWidth(self.frame), CGRectGetHeight(self.frame) / 2)
82 controlPoint:CGPointMake(CGRectGetWidth(self.frame) / 2, center.y + center.y + 20)];
83 _bottomEyesocketLayer.borderColor = [UIColor blackColor].CGColor;
84 _bottomEyesocketLayer.lineWidth = 1.f;
85 _bottomEyesocketLayer.path = path.CGPath;
86 _bottomEyesocketLayer.fillColor = [UIColor clearColor].CGColor;
87 _bottomEyesocketLayer.strokeColor = [UIColor whiteColor].CGColor;
88
89 }
90 return _bottomEyesocketLayer;
91 }
然后更改一下某些属性的值，方便稍后的动画：
1 - (void)setupAnimation {
2 self.eyeFirstLightLayer.lineWidth = 0.f;
3 self.eyeSecondLightLayer.lineWidth = 0.f;
4 self.eyeballLayer.opacity = 0.f;
5 _bottomEyesocketLayer.strokeStart = 0.5f;
6 _bottomEyesocketLayer.strokeEnd = 0.5f;
7 _topEyesocketLayer.strokeStart = 0.5f;
8 _topEyesocketLayer.strokeEnd = 0.5f;
9 }
最后根据 UIScrollView 的 contentOffset 来控制各种属性，办法较笨，但管用。
1 - (void)animationWith:(CGFloat)y {
2 CGFloat flag = self.frame.origin.y * 2.f - 20.f;
3 if (y < flag) {
4 if (self.eyeFirstLightLayer.lineWidth < 5.f) {
5 self.eyeFirstLightLayer.lineWidth += 1.f;
6 self.eyeSecondLightLayer.lineWidth += 1.f;
7 }
8 }
9
10 if(y < flag - 20) {
11 if (self.eyeballLayer.opacity <= 1.0f) {
12 self.eyeballLayer.opacity += 0.1f;
13 }
14
15 }
16
17 if (y < flag - 40) {
18 if (self.topEyesocketLayer.strokeEnd < 1.f && self.topEyesocketLayer.strokeStart > 0.f) {
19 self.topEyesocketLayer.strokeEnd += 0.1f;
20 self.topEyesocketLayer.strokeStart -= 0.1f;
21 self.bottomEyesocketLayer.strokeEnd += 0.1f;
22 self.bottomEyesocketLayer.strokeStart -= 0.1f;
23 }
24 }
25
26 if (y > flag - 40) {
27 if (self.topEyesocketLayer.strokeEnd > 0.5f && self.topEyesocketLayer.strokeStart < 0.5f) {
28 self.topEyesocketLayer.strokeEnd -= 0.1f;
29 self.topEyesocketLayer.strokeStart += 0.1f;
30 self.bottomEyesocketLayer.strokeEnd -= 0.1f;
31 self.bottomEyesocketLayer.strokeStart += 0.1f;
32 }
33 }
34
35 if (y > flag - 20) {
36 if (self.eyeballLayer.opacity >= 0.0f) {
37 self.eyeballLayer.opacity -= 0.1f;
38 }
39 }
40
41 if (y > flag) {
42 if (self.eyeFirstLightLayer.lineWidth > 0.f) {
43 self.eyeFirstLightLayer.lineWidth -= 1.f;
44 self.eyeSecondLightLayer.lineWidth -= 1.f;
45 }
46 }
47 }
最后
总之使用 UIbezierPath 和 CAShapeLayer 可以画出你想要的任何形状，没有它做不到，只有你想不到，搞定了它们你就可以轻松定制你想要的任何控件了。
简书地址：http://www.jianshu.com/p/c5cbb5e05075
时间： 2024-11-03 20:57:00