類似淘寶個人信息狀態(tài)欄,京東金融等雙波浪動畫

主要方法:通過自定義View,利用正弦函數(shù)與余弦函數(shù)的效果.

一.相關(guān)概念解釋

正弦函數(shù): y =Asin（ωx+φ）+C
A 表示振幅，也就是使用這個變量來調(diào)整波浪的高度
ω表示周期，也就是使用這個變量來調(diào)整在屏幕內(nèi)顯示的波浪的數(shù)量
φ表示波浪橫向的偏移，也就是使用這個變量來調(diào)整波浪的流動
C表示波浪縱向的位置，也就是使用這個變量來調(diào)整波浪在屏幕中豎直的位置。

(1)利用CADisplayLink,進(jìn)行UI的刷新.

@property (nonatomic,strong)CADisplayLink *wavesDisplayLink;
@property (nonatomic,strong)CAShapeLayer *firstWavesLayer;

iOS設(shè)備的屏幕刷新頻率(FPS)是60Hz，因此CADisplayLink的selector 默認(rèn)調(diào)用周期是每秒60次，這個周期可以通過frameInterval屬性設(shè)置， CADisplayLink的selector每秒調(diào)用次數(shù)=60/ frameInterval。
比如當(dāng) frameInterval設(shè)為2，每秒調(diào)用就變成30次。

關(guān)于CADisplayLink,此處用NSTimer亦可.

(2)CAShapeLayer
CAShapeLayer 的對象是一個本身沒有形狀，他的形狀來源于你給定的Path，它依附于path,所以必須給定path，即使path不完整也會自動收尾相接，strokeStart以及stroleEnd代表著這個path中所占的百分比（可以使用storkeStart和stroleEnd來做曲線進(jìn)度的動畫).

二.主要代碼

(1)正弦與余弦函數(shù)

//創(chuàng)建一個路徑
CGMutablePathRef path = CGPathCreateMutable();
CGFloat y = currentK;
//將點(diǎn)移動到 x=0,y=currentK的位置
CGPathMoveToPoint(path, nil, 0, y);
for (NSInteger i =0.0f; i<=WavesWidth; i++) {
    //正弦函數(shù)波浪公式
    y = waveA * sin(waveW * i+ offsetX)+currentK;
   //第二個View中:使用余弦函數(shù)波浪公式
   //y = waveA * cos(waveW * i+ offsetX)+currentK;
    //將點(diǎn)連成線
    CGPathAddLineToPoint(path, nil, i, y);
}

CGPathAddLineToPoint(path, nil, WavesWidth, 0);
CGPathAddLineToPoint(path, nil, 0, 0);

CGPathCloseSubpath(path);
self.firstWavesLayer.path = path;
//使用layer 而沒用CurrentContext
CGPathRelease(path);

三.相關(guān)效果

1.正弦函數(shù)與余弦函數(shù):相同速度/振幅/周期/非震蕩效果

相同速度:振幅:周期:非震蕩.gif

相同速度:振幅:周期:震蕩.gif

當(dāng)速度/振幅/周期等改變時,會產(chǎn)生更多的效果:

3.正弦函數(shù)與余弦函數(shù):不同速度/振幅,相同周期/非震蕩效果,這個效果用起來也很不錯
此處設(shè)置為:正弦與余弦函數(shù)參數(shù)不相同時,會產(chǎn)生交錯效果;此處自行嘗試更改即可產(chǎn)生不同動畫效果.

正弦函數(shù): 
//設(shè)置波浪流動速度
wavesSpeed = 0.02;
//設(shè)置振幅
waveA = 12;
//設(shè)置周期
waveW = 0.5/30.0

余弦函數(shù): 
//設(shè)置波浪流動速度
wavesSpeed = 0.04;
//設(shè)置振幅
waveA = 13;
//設(shè)置周期
waveW = 0.5/30.0;

不同速度:振幅,相同周期非震蕩.gif

不同速度/振幅,相同周期/震蕩效果

不同速度:振幅,相同周期:震蕩.gif

5.正弦函數(shù)與余弦函數(shù):不同速度/振幅,相同周期/,峰頂與峰底對應(yīng)效果,可自行開啟震蕩
更改余弦函數(shù)公式為:

//如果需要正弦函數(shù)的峰頂和余弦函數(shù)的峰底對應(yīng),可以替換成下方公式均可
//y = waveA * cos(waveW*i + offsetX+M_PI_2)+currentK;  
//y = waveA * sin(-(waveW*i + offsetX))+currentK;

同速度:振幅:周期,峰頂與峰底對應(yīng).gif

6.正弦函數(shù)與余弦函數(shù):如果需要讓雙波浪在屏幕下方顯示
更改代碼為:
以第一個波浪為例,第二個同理更改就行.

//第一個波浪
self.firstWare = [[FirstWaves alloc]initWithFrame:CGRectMake(0, self.view.frame.size.height-200, self.view.frame.size.width, 220)];

//波浪公式下方更改
CGPathAddLineToPoint(path, nil, WavesWidth, self.frame.size.height);
CGPathAddLineToPoint(path, nil, 0, self.frame.size.height);

屏幕下方顯示.png

四.Demo地址

歡迎star : https://github.com/FTC-Chen/DoubleWavesAnimation

五.參考資料

1.http://blog.csdn.net/u010123208/article/details/51227035
2.http://www.tuicool.com/articles/meMVR3

有任何問題請私信或者留言,或者有更好的實(shí)現(xiàn)方法,也請告訴我.