有好长时间没有写简书了，最近遇到一个效果，水波纹。让我想起了高中的三角函数 y=Asin（ωx+φ）+h 。接下来我就用代码来实现一下效果。
主要步骤如下：
1.我们先考虑静态三角函数。如何把静态的三角函数绘制出来。
先将一个一个点绘制出来，然后每个点联系起来，当2个点足够近的时候，曲线就能显示出来。
具体代码如下：
CGMutablePathRef path = CGPathCreateMutable();//创建路径。
CGPathMoveToPoint(path,nil,0,self.ripplePosition);//设置初时位置
CGFloaty =0.f;
//通过for循环来绘制（x，y）点 。因为这些点足够近，看上去就是曲线了。
for(floatx =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.bgView.frame.size.height);
CGPathAddLineToPoint(path,nil,0,self.bgView.frame.size.height);
CGPathCloseSubpath(path);
self.waveShapeLayer.path = path;
CGPathRelease(path);
第一步完成了，一条静态的三角函数曲线画出来了。
2.我们需要曲线动起来，也就是说，我们不断改变x的值，就能让曲线偏移了。这里我们使用CADisplayLink而不是计时器来驱动动画，因为CADisplayLink触发的时机是每隔一帧运行一次，而NSTimer不是很精确，会有阻塞的情况，照成动画卡顿的现象。
下面是代码部分。
- (void)viewDidLoad {
[super viewDidLoad];
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 = 2.0f;
self.rippleWidth = self.bgView.frame.size.width;
self.ripplePosition = self.bgView.frame.size.height-40.0f;
self.rippleAmplitude = 5;
[self wave];
}
self.waveDisplayLink= [CADisplayLinkdisplayLinkWithTarget:selfselector:@selector(getCurrentWave)];
[self.waveDisplayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];
#pragma mark 定时器
- (void)getCurrentWave{
self.mainRippleoffsetX += self.rippleSpeed;
CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path,nil,0,self.ripplePosition);
CGFloaty =0.f;
for(floatx =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.bgView.frame.size.height);
CGPathAddLineToPoint(path,nil,0,self.bgView.frame.size.height);
CGPathCloseSubpath(path);
self.waveShapeLayer.path = path;
CGPathRelease(path);
}
以上就是实现一条水波纹，我们要是想多加几条水波纹，就多创建CAShapeLayer ，让y=Asin（ωx+φ）+h 中的A和ω，φ系数不一样就可以了。
以上实现水波纹效果，如有疑问，请留言。勿忘，特记。
