基础:
y = a*sin(bx + c) + d;
a:表示 a*sin(bx + c) 的最大值和最小值a -a
b: sin(x) 正弦图像 一个波浪宽度为π,也就是说
一个波浪宽度= π/b
c:正数,向左平移c个单位;负数,向右平移c个单位
d:正弦图像向上平移
关键点1:注意iOS开发的x、y轴,和普通坐标系是不一样的。
关键点2:波形动画用到的属性 c,c表示弦水平方向左右平移。
关键点3:贝塞尔曲线的闭合,贝塞尔曲线的闭合默认首末两点连接,所以在绘制波形图时,要注意手动设置首点和末点,否则可能导致闭合不准确,颜色填充不是向下填充!
//一个简单的波形图样例 贝塞尔曲线的创建和CAShapeLayer的创建只需要一次 再次进入循环是重置贝塞尔曲线和重新设置layer的path即可
- (void)viewDidLoad {
[superview DidLoad];
path= [UIBezierPath bezierPath];
refreshLink= [CADisplayLink displayLinkWithTarget:selfselector:@selector(runloop)];
[refreshLink addToRunLoop: [NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];
}
- (void)runloop{
static CGFloat p =0;
[path removeAllPoints];//重置path
if(layer==nil) {//第一次创建CAShapeLayer
layer= [CAShapeLayer layer];
layer.strokeColor= [UIColor greenColor].CGColor;
layer.fillColor= [UIColor greenColor].CGColor;
[self.view.layer addSublayer:layer];
}
for(inti=0; i<=200; i++) {//绘制正弦图像,runloop运行一次,则绘制一次完整的正弦图
CGFloaty =10*sin(i*M_PI/100+p)+100;//每循环一次p值都会改变来达到x轴平移的目的
if(i==0) {
[path moveToPoint:CGPointMake(0,150)];//手动设置首点
[pathaddLineToPoint:CGPointMake(i, y)];
}elseif(i==200){
[path addLineToPoint:CGPointMake(200,150)];//手动设置末点
}else{
[path addLineToPoint:CGPointMake(i, y)];
}
}
[path closePath];
layer.path=path.CGPath;
p+=0.2;
}
网友评论