使用CADisplayLink& CAShapeLayer&UIBezierPath实现波浪动画
1、CADisplayLink
CADisplayLink就像是一个定时器,每隔几毫秒刷新一次屏幕。能让我们以和屏幕刷新频率相同的频率去刷新我们绘制到屏幕上的内容。
CADisplayLink的初始化:
_displayLink = [CADisplayLink displayLinkWithTarget:self
selector:@selector(updateContent:)];
[_displayLink addToRunLoop:[NSRunLoop currentRunLoop]
forMode:NSRunLoopCommonModes];
当CADisplayLink注册到runloop以后,屏幕刷新的时候就会调用绑定到它上面的target所拥有的selector方法。停止CADisplayLink的运行非常的简单,只需要调用它的invalidate方法。
NSTimer和CADisplayLink有什么不同?
iOS设备的屏幕每秒会刷新60次,正常情况下CADisplayLink在屏幕每次刷新时都会调用,精确度非常高,并且CADisplayLink的使用场合相对专一,适合做UI的不停重绘,比如动画的连续绘制。
NSTimer的使用范围要广泛很多,可以做单次或者循环处理某个任务,精度相比CADisplayLink要低。
2、UIBezierPath
创建一个Bezier Path对象。
使用方法moveToPoint:去设置初始线段的起点。
添加line或者curve去定义一个或者多个subpath。
修改UIBezierPath对象跟绘图相关的属性。
3、CAShapeLayer
CAShapeLayer是一个通过矢量图形而不是bitmap来绘制的图层子类。CAShapeLayer可以用来绘制所有通过CGPath来表示的形状,上面讲到了可以用UIBezierPath来创建任何你想要的路径,使用CAShapeLayer的属性path配合UIBezierPath创建的路径,就可以呈现出我们想要的形状。
一个小demo,创建出来火柴人形状的图形
- (void)viewDidLoad {
[super viewDidLoad];
UIBezierPath *path = [[UIBezierPath alloc] init];
[path moveToPoint:CGPointMake(175, 100)];
[path addArcWithCenter:CGPointMake(150, 100) radius:25 startAngle:0 endAngle:2*M_PI clockwise:YES];
[path moveToPoint:CGPointMake(150, 125)];
[path addLineToPoint:CGPointMake(150, 175)];
[path addLineToPoint:CGPointMake(125, 225)];
[path moveToPoint:CGPointMake(150, 175)];
[path addLineToPoint:CGPointMake(175, 225)];
[path moveToPoint:CGPointMake(100, 150)];
[path addLineToPoint:CGPointMake(200, 150)];
//create shape layer
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.strokeColor = [UIColor colorWithRed:147/255.0 green:231/255.0 blue:182/255.0 alpha:1].CGColor;
shapeLayer.fillColor = [UIColor clearColor].CGColor;
shapeLayer.lineWidth = 5;
shapeLayer.lineJoin = kCALineJoinRound;
shapeLayer.lineCap = kCALineCapRound;
shapeLayer.path = path.CGPath;
//add it to our view
[self.view.layer addSublayer:shapeLayer];
}