iOS 波浪效果的实现

iOS 波浪效果的实现

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #4f8187; background-color: #ffffff }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; background-color: #ffffff; min-height: 14.0px }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #ba2da2; background-color: #ffffff }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #000000; background-color: #ffffff }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #3e1e81; background-color: #ffffff }
p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #000000; background-color: #ffffff; min-height: 16.0px }
p.p7 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #703daa; background-color: #ffffff }
p.p8 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #008400; background-color: #ffffff }
span.s1 { color: #ba2da2 }
span.s2 { color: #000000 }
span.s3 { color: #703daa }
span.s4 { color: #4f8187 }
span.s5 { color: #3e1e81 }
span.s6 { color: #272ad8 }
span.s7 { color: #008400 }
span.s8 { color: #78492a }

@interface ViewController ()

@property (strong, nonatomic) CADisplayLink *displayLink;

@property (strong, nonatomic) CAShapeLayer *shapeLayer;

@property (strong, nonatomic) UIBezierPath *path;

@property (strong, nonatomic) CAShapeLayer *shapeLayer2;

@property (strong, nonatomic) UIBezierPath *path2;

@end

@implementation ViewController

- (void)viewDidLoad {

[super viewDidLoad];

_shapeLayer = [CAShapeLayer layer];

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

[self.view.layer addSublayer:_shapeLayer];

_shapeLayer2 = [CAShapeLayer layer];

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

[self.view.layer addSublayer:_shapeLayer2];

_shapeLayer.fillColor = [[UIColor yellowColor] colorWithAlphaComponent:0.3].CGColor;

_shapeLayer2.fillColor = [[UIColor blueColor] colorWithAlphaComponent:0.3].CGColor;

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

[_displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];

}

- (void)drawPath {

static double i = 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越界

}

}