码迷,mamicode.com
首页 > 微信 > 详细

0126——动画(类似微信下拉眼睛)

时间:2016-01-26 21:58:23      阅读:422      评论:0      收藏:0      [点我收藏+]

标签:

效果图

技术分享

首先你得画出这只眼睛,这是眼睛包括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

0126——动画(类似微信下拉眼睛)

标签:

原文地址:http://www.cnblogs.com/damonWq/p/5161587.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!