前言
最近在開發ios項目空閑之余，決定練習下uibezierpath進行繪圖和caanimation動畫的使用，制作了一個心跳的動畫,很簡單的示例，下面話不多說了，來一起看看詳細的介紹：
gif示例:
核心代碼
1-首先通過 drawrect 繪制心形view
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
- (void)drawrect:(cgrect)rect { // 間距 cgfloat padding = 4.0; // 半徑(小圓半徑) cgfloat curveradius = (rect.size.width - 2 * padding)/4.0; // 貝塞爾曲線 uibezierpath *heartpath = [uibezierpath bezierpath]; // 起點(圓的第一個點) cgpoint tiplocation = cgpointmake(rect.size.width/2, rect.size.height-padding); // 從起點開始畫 [heartpath movetopoint:tiplocation]; // (左圓的第二個點) cgpoint topleftcurvestart = cgpointmake(padding, rect.size.height/2.4); // 添加二次曲線 [heartpath addquadcurvetopoint:topleftcurvestart controlpoint:cgpointmake(topleftcurvestart.x, topleftcurvestart.y + curveradius)]; // 畫圓 [heartpath addarcwithcenter:cgpointmake(topleftcurvestart.x+curveradius, topleftcurvestart.y) radius:curveradius startangle:m_pi endangle:0 clockwise:yes]; // (左圓的第二個點) cgpoint toprightcurvestart = cgpointmake(topleftcurvestart.x + 2*curveradius, topleftcurvestart.y); // 畫圓 [heartpath addarcwithcenter:cgpointmake(toprightcurvestart.x+curveradius, toprightcurvestart.y) radius:curveradius startangle:m_pi endangle:0 clockwise:yes]; // 右上角控制點 cgpoint toprightcurveend = cgpointmake(topleftcurvestart.x + 4*curveradius, toprightcurvestart.y); // 添加二次曲線 [heartpath addquadcurvetopoint:tiplocation controlpoint:cgpointmake(toprightcurveend.x, toprightcurveend.y+curveradius)]; // 設置填充色 [[uicolor redcolor] setfill]; // 填充 [heartpath fill]; // 設置邊線 heartpath.linewidth = 2; heartpath.linecapstyle = kcglinecapround; heartpath.linejoinstyle = kcglinejoinround; // 設置描邊色 [[uicolor yellowcolor] setstroke]; [heartpath stroke];} |
2-添加心形view到主視圖
|
1
2
3
|
xmheartview *heartview = [[xmheartview alloc] init];heartview.frame = cgrectmake(100, 50, 200, 200);[self.view addsubview:heartview]; |
3-給心形view添加心跳動畫
|
1
2
3
4
5
6
7
8
9
10
11
12
|
// 給心視圖添加心跳動畫 float bigsize = 1.1; cabasicanimation *pulseanimation = [cabasicanimation animationwithkeypath:@"transform.scale"]; pulseanimation.duration = 0.5; pulseanimation.tovalue = [nsnumber numberwithfloat:bigsize]; pulseanimation.timingfunction = [camediatimingfunction functionwithname:kcamediatimingfunctioneaseineaseout]; // 倒轉動畫 pulseanimation.autoreverses = yes; // 設置重復次數為無限大 pulseanimation.repeatcount = flt_max; // 添加動畫到layer [heartview.layer addanimation:pulseanimation forkey:@"transform.scale"]; |
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對服務器之家的支持。
原文鏈接：http://blog.csdn.net/mazy_ma/article/details/55213346
