iOS利用 正弦函數 繪制波形圖 以及 波形動畫

基礎:

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;

}

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容