【移動應用開發(fā)技術(shù)】iOS如何使用UIBezierPath+CAAnimation實現(xiàn)路徑動畫效果

效果圖如下：/upload/information/20200623/126/120817.gif核心代碼1-首先通過drawRect繪制心形路徑-

(void)drawRect:(CGRect)rect

{

//

Drawing

code

//

初始化UIBezierPath

UIBezierPath

*path

=

[UIBezierPath

bezierPath];

//

首先設(shè)置一個起始點

CGPoint

startPoint

=

CGPointMake(rect.size.width/2,

120);

//

以起始點為路徑的起點

[path

moveToPoint:startPoint];

//

設(shè)置一個終點

CGPoint

endPoint

=

CGPointMake(rect.size.width/2,

rect.size.height-40);

//

設(shè)置第一個控制點

CGPoint

controlPoint1

=

CGPointMake(100,

20);

//

設(shè)置第二個控制點

CGPoint

controlPoint2

=

CGPointMake(0,

180);

//

添加三次貝塞爾曲線

[path

addCurveToPoint:endPoint

controlPoint1:controlPoint1

controlPoint2:controlPoint2];

//

設(shè)置另一個起始點

[path

moveToPoint:endPoint];

//

設(shè)置第三個控制點

CGPoint

controlPoint3

=

CGPointMake(rect.size.width-100,

20);

//

設(shè)置第四個控制點

CGPoint

controlPoint4

=

CGPointMake(rect.size.width,

180);

//

添加三次貝塞爾曲線

[path

addCurveToPoint:startPoint

controlPoint1:controlPoint4

controlPoint2:controlPoint3];

//

設(shè)置線寬

path.lineWidth

=

3;

//

設(shè)置線斷面類型

path.lineCapStyle

=

kCGLineCapRound;

//

設(shè)置連接類型

path.lineJoinStyle

=

kCGLineJoinRound;

//

設(shè)置畫筆顏色

[[UIColor

redColor]

set];

[path

stroke];

}2-添加心形路徑View到主視圖

HeartView

*heart

=

[[HeartView

alloc]

init];

heart.frame

=

CGRectMake(0,

0,

Screen_Width,

Screen_Height-Screen_Height);

[self.view

addSubview:heart];3-給動畫視圖(紅色圓形視圖)添加軌跡路徑動畫

CAKeyframeAnimation

*animation

=

[CAKeyframeAnimation

animationWithKeyPath:@"position"];

//

設(shè)置動畫的路徑為心形路徑

animation.path

=

self.path.CGPath;

//

動畫時間間隔

animation.duration

=

3.0f;

//

重復次數(shù)為最大值

animation.repeatCount

=

FLT_MAX;

animation.removedOnCompletion

=

NO;

animation.fillMode

=

kCAF