波浪效果的实现

波浪效果的实现_第1张图片
y = sin(x)


波浪效果的实现_第2张图片
y = 10sin(x)


波浪效果的实现_第3张图片
y = 10sin(0.03x)


波浪效果的实现_第4张图片
y = 10sin(0.03x + 0.5)


波浪效果的实现_第5张图片
y = 10sin(0.03x + 0.5) + 10


波浪效果的实现_第6张图片
y = 10cos(0.03x + 0.5) + 10


波浪效果的实现_第7张图片
双层波 灰色cos 黑色sin

1.创建layer

_shapeLayer= [CAShapeLayer layer];

_shapeLayer.frame=CGRectMake(0,100,375,150);

[self.view.layeraddSublayer:_shapeLayer];

_shapeLayer2= [CAShapeLayer layer];

_shapeLayer2.frame = CGRectMake(0,100,375,150);

[self.view.layer addSublayer:_shapeLayer2];

2.创建定时器

_displayLink = [CADisplayLink displayLinkWithTarget:selfselector:@selector(drawPath)];

[_displayLink addToRunLoop:[NSRunLoopmainRunLoop] forMode:NSRunLoopCommonModes];

3.drawPath方法

static doublei =0;

CGFloat A =10.f;//A振幅

CGFloat k =0;//y轴偏移

CGFloat ω = 0.03;//角速度ω变大,则波形在X轴上收缩(波形变紧密);角速度ω变小,则波形在X轴上延展(波形变稀疏)。不等于0

CGFloat φ = 0 + i;//初相,x=0时的相位;反映在坐标系上则为图像的左右移动。

//y=Asin(ωx+φ)+k

_path= [UIBezierPath bezierPath];

_path2= [UIBezierPath bezierPath];

[_path moveToPoint:CGPointZero];

[_path2 moveToPoint:CGPointZero];

for(int i =0; i < 376; i ++) {

CGFloat x = i;

CGFloat y = A *sin(ω*x+φ)+k;

CGFloat y2 = A *cos(ω*x+φ)+k;

[_path addLineToPoint:CGPointMake(x, y)];

[_path2 addLineToPoint:CGPointMake(x, y2)];

}

[_path addLineToPoint:CGPointMake(375, -100)];

[_path addLineToPoint:CGPointMake(0, -100)];

_path.lineWidth = 1;

_shapeLayer.path = _path.CGPath;

[_path2 addLineToPoint:CGPointMake(375, -100)];

[_path2 addLineToPoint:CGPointMake(0, -100)];

_path2.lineWidth = 1;

_shapeLayer2.path = _path2.CGPath;

i +=0.1;

if(i >M_PI*2) {

i =0;//防止i越界

}

4.效果图

波浪效果的实现_第8张图片
效果图

玩一个有趣的效果,渐变色:


波浪效果的实现_第9张图片
渐变色

demo已更新代码,这里就不贴代码了

demo

你可能感兴趣的:(波浪效果的实现)