思路
简单的波浪，让我想起了三角函数。
正余弦函数
所以我们只要先画出静态的三角函数图形，然后让它有平移的视觉效果，也就产生了动画。
实现
- 横坐标的范围为0到视图宽度。
- 为了增强视觉效果，我们需要将显示的三角函数图的范围限定在一个周期内，所以sin(x)，此处x的范围必须是0到2π。所以y = sin(x/(width0.5)M_PI)。
- 根据上述得到了不动的图。为了让函数水平移动就要随着时间增加给sin(x)中的x添加变量distance。
- 将上述逻辑结合在“drawRect:”方法里实现绘制。
代码
#import <UIKit/UIKit.h>
@interface TCWave : UIView
/** 水的颜色 */
@property (nonatomic, strong) UIColor *waterColor;
/** 波浪变化的频率 */
@property (nonatomic) CGFloat refreshFrequency;
/** 振幅 默认 10*/
@property (nonatomic) CGFloat waveHeight;
@end
#import "TCWave.h"
@interface TCWave ()
@property (nonatomic, strong) NSTimer *timer;
@property (nonatomic) CGFloat distance;
@end
@implementation TCWave
- (instancetype)init {
if (self = [super init]) {
_waveHeight = 10;
_waterColor = [UIColor colorWithRed:86/255.0f green:202/255.0f blue:139/255.0f alpha:1];
}
return self;
}
- (instancetype)initWithFrame:(CGRect)frame {
if (self = [super initWithFrame:frame]) {
_waveHeight = 10;
_waterColor = [UIColor colorWithRed:86/255.0f green:202/255.0f blue:139/255.0f alpha:1];
}
return self;
}
- (void)awakeFromNib {
[super awakeFromNib];
_waveHeight = 10;
_waterColor = [UIColor colorWithRed:86/255.0f green:202/255.0f blue:139/255.0f alpha:1];
}
- (void)setRefreshFrequency:(CGFloat)refreshFrequency {
_refreshFrequency = refreshFrequency;
[self.timer invalidate];
self.timer = [NSTimer scheduledTimerWithTimeInterval:refreshFrequency target:self selector:@selector(animateWave) userInfo:nil repeats:YES];
}
-(void)animateWave {
self.distance += 0.1;
[self setNeedsDisplay];
}
- (void)drawRect:(CGRect)rect {
CGContextRef context = UIGraphicsGetCurrentContext();
CGMutablePathRef path = CGPathCreateMutable();
//画水
CGContextSetLineWidth(context, 1);
CGContextSetFillColorWithColor(context, self.waterColor.CGColor);
CGContextSetStrokeColorWithColor(context, self.waterColor.CGColor);
float y = _waveHeight/2;
CGPathMoveToPoint(path, NULL, 0, y);
for(float x=0;x<=rect.size.width;x++){
y = _waveHeight/2 * sin(x/(rect.size.width*0.5)*M_PI + self.distance) + _waveHeight/2;
CGPathAddLineToPoint(path, nil, x, y);
}
CGPathAddLineToPoint(path, nil, rect.size.width, rect.size.height);
CGPathAddLineToPoint(path, nil, 0, rect.size.height);
CGPathAddLineToPoint(path, nil, 0, _waveHeight/2);
CGContextAddPath(context, path);
CGContextFillPath(context);
CGContextDrawPath(context, kCGPathStroke);
CGPathRelease(path);
}
@end
Demo
具体演示工程请点击链接下载，如果觉得有用，请帮我star一下，非常感谢！
TCWave
