水波纹-OC-iOS

简介

使用iOS原生CoreGraphic框架完成,主要内容就是在给定的路径上绘制出图形,水波纹的实现是按照三角函数的sin函数来实现的,利用sin函数计算出大量的点,然后做颜色填充。

实现方法

首先一个波纹需要一个layer来进行渲染,越底层的波纹要越早绘制,本Demo只实现了双波纹交错。
水波纹基本属性:

不需要对外暴露的属性

1
2
3
4
5
6
7
8
@interface WaterRippleView(){
float _currentLinePointY;
}
@property (nonatomic, strong)CADisplayLink *rippleDisplayLink;//苹果的垂直同步
@property (nonatomic, strong)CAShapeLayer *mainRippleLayer;//主波图层
@property (nonatomic, strong)CAShapeLayer *minorRippleLayer;//次波图层
@property (nonatomic, assign)CGFloat rippleWidth;//波浪宽度
@end

可以对外暴露的属性

1
2
3
4
5
6
7
@property (nonatomic, strong)UIColor *mainRippleColor;//主波填充颜色
@property (nonatomic, strong)UIColor *minorRippleColor;//次波填充颜色
@property (nonatomic, assign)CGFloat mainRippleoffsetX;//主波偏移量
@property (nonatomic, assign)CGFloat minorRippleoffsetX;//次波偏移量
@property (nonatomic, assign)CGFloat rippleSpeed;//波浪速度
@property (nonatomic, assign)CGFloat ripplePosition;//波浪Y轴位置
@property (nonatomic, assign)float rippleAmplitude;//波浪振幅

各属性的默认值设置

1
2
3
4
5
6
7
8
self.mainRippleColor = [UIColor colorWithRed:255/255.0f green:127/255.0f blue:80/255.0f alpha:1];
self.minorRippleColor = [UIColor whiteColor];
self.mainRippleoffsetX = 1;
self.minorRippleoffsetX = 2;
self.rippleSpeed = .5f;
self.rippleWidth = frame.size.width;
self.ripplePosition = frame.size.height-10.0f;
self.rippleAmplitude = 5;

对外暴露的方法

1
2
3
4
//设置frame 主波填充颜色 次波填充颜色
- (instancetype)initWithFrame:(CGRect)frame mainRippleColor:(UIColor *)mainRippleColor minorRippleColor:(UIColor *)minorRippleColor;
//设置frame 主波填充颜色 次波填充颜色 主波偏移量 次波偏移量 波浪速度 波浪Y轴位置 波浪振幅
- (instancetype)initWithFrame:(CGRect)frame mainRippleColor:(UIColor *)mainRippleColor minorRippleColor:(UIColor *)minorRippleColor mainRippleoffsetX:(float)mainRippleoffsetX minorRippleoffsetX:(float)minorRippleoffsetX rippleSpeed:(float)rippleSpeed ripplePosition:(float)ripplePosition rippleAmplitude:(float)rippleAmplitude;

在view中需要绘制图形时,要在自带的dramRect:方法中编写相关代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
- (void)drawRect:(CGRect)rect {
/*
*创建两个layer
*/
self.mainRippleLayer = [CAShapeLayer layer];
self.mainRippleLayer.fillColor = self.mainRippleColor.CGColor;
[self.layer addSublayer:self.mainRippleLayer];
self.minorRippleLayer = [CAShapeLayer layer];
self.minorRippleLayer.fillColor = self.minorRippleColor.CGColor;
[self.layer addSublayer:self.minorRippleLayer];
self.rippleDisplayLink = [CADisplayLink displayLinkWithTarget:self
selector:@selector(getCurrentRipple)];
[self.rippleDisplayLink addToRunLoop:[NSRunLoop mainRunLoop]
forMode:NSRunLoopCommonModes];
}

下面是绘制代码:
主波

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
- (void)drawMainRipple{
self.mainRippleoffsetX += self.rippleSpeed;
CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, nil, 0, self.ripplePosition);
CGFloat y = 0.f;
for (float x = 0.f; x <= self.rippleWidth ; x++) {
y = self.rippleAmplitude * sin(1.2 * M_PI/ self.rippleWidth * x - self.mainRippleoffsetX *M_PI/180) + self.ripplePosition;
CGPathAddLineToPoint(path, nil, x, y);
}
CGPathAddLineToPoint(path, nil, self.rippleWidth, self.frame.size.height);
CGPathAddLineToPoint(path, nil, 0, self.frame.size.height);
CGPathCloseSubpath(path);
self.mainRippleLayer.path = path;
CGPathRelease(path);
}

次波

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
- (void)drawMinorRipple{
self.minorRippleoffsetX += self.rippleSpeed+0.1f;
CGMutablePathRef minorRipple = CGPathCreateMutable();
CGPathMoveToPoint(minorRipple, nil, 0, self.ripplePosition);
CGFloat y = 0.f;
for (float x = 0.f; x <= self.rippleWidth ; x++) {
y = self.rippleAmplitude * sin(1.2 * M_PI/ self.rippleWidth * x - self.minorRippleoffsetX*M_PI/360 ) + self.ripplePosition;
CGPathAddLineToPoint(minorRipple, nil, x, y);
}
CGPathAddLineToPoint(minorRipple, nil, self.rippleWidth, self.frame.size.height);
CGPathAddLineToPoint(minorRipple, nil, 0, self.frame.size.height);
CGPathCloseSubpath(minorRipple);
self.minorRippleLayer.path = minorRipple;
CGPathRelease(minorRipple);
}

实现效果

水波纹Gif

最后

本Demo的git库地址:https://git.oschina.net/LiynXu/waterripple.git
欢迎访问