iOS 波浪效果的实现
iOS 波浪效果的实现
p.p1 { margin: 0; font: 14px Menlo; color: rgba(79, 129, 135, 1); background-color: rgba(255, 255, 255, 1) }
p.p2 { margin: 0; font: 12px Helvetica; background-color: rgba(255, 255, 255, 1); min-height: 14px }
p.p3 { margin: 0; font: 14px Menlo; color: rgba(186, 45, 162, 1); background-color: rgba(255, 255, 255, 1) }
p.p4 { margin: 0; font: 14px Menlo; color: rgba(0, 0, 0, 1); background-color: rgba(255, 255, 255, 1) }
p.p5 { margin: 0; font: 14px Menlo; color: rgba(62, 30, 129, 1); background-color: rgba(255, 255, 255, 1) }
p.p6 { margin: 0; font: 14px Menlo; color: rgba(0, 0, 0, 1); background-color: rgba(255, 255, 255, 1); min-height: 16px }
p.p7 { margin: 0; font: 14px Menlo; color: rgba(112, 61, 170, 1); background-color: rgba(255, 255, 255, 1) }
p.p8 { margin: 0; font: 14px Menlo; color: rgba(0, 132, 0, 1); background-color: rgba(255, 255, 255, 1) }
span.s1 { color: rgba(186, 45, 162, 1) }
span.s2 { color: rgba(0, 0, 0, 1) }
span.s3 { color: rgba(112, 61, 170, 1) }
span.s4 { color: rgba(79, 129, 135, 1) }
span.s5 { color: rgba(62, 30, 129, 1) }
span.s6 { color: rgba(39, 42, 216, 1) }
span.s7 { color: rgba(0, 132, 0, 1) }
span.s8 { color: rgba(120, 73, 42, 1) }
@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越界
}
}