基礎:
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;
}