iOS開源：DoubleWavesAnimation - 雙波浪動畫

JacklynLitt 9年前發布 | 10K 次閱讀 iOS開發移動開發

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

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

一.相關概念解釋

正弦函數: y =Asin（ωx+φ）+C

A 表示振幅，也就是使用這個變量來調整波浪的高度

ω表示周期，也就是使用這個變量來調整在屏幕內顯示的波浪的數量

φ表示波浪橫向的偏移，也就是使用這個變量來調整波浪的流動

C表示波浪縱向的位置，也就是使用這個變量來調整波浪在屏幕中豎直的位置。

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

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

iOS設備的屏幕刷新頻率(FPS)是60Hz，因此CADisplayLink的selector 默認調用周期是每秒60次，這個周期可以通過frameInterval屬性設置， CADisplayLink的selector每秒調用次數=60/ frameInterval。

比如當 frameInterval設為2，每秒調用就變成30次。

關于CADisplayLink ,此處用NSTimer亦可.

(2)CAShapeLayer

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

二.主要代碼

(1)正弦與余弦函數

//創建一個路徑
CGMutablePathRefpath = CGPathCreateMutable();
CGFloat y = currentK;
//將點移動到 x=0,y=currentK的位置
CGPathMoveToPoint(path, nil, 0, y);
for (NSInteger i =0.0f; i

三.相關效果

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

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

2.正弦函數與余弦函數: 相同速度/振幅/周期/震蕩效果*,這就類似淘寶個人信息狀態欄,余弦函數中加π/2即是峰頂與峰底對應效果

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

當速度/振幅/周期等改變時,會產生更多的效果:

3.正弦函數與余弦函數: 不同速度/振幅,相同周期/非震蕩效果,這個效果用起來也很不錯

此處設置為: 正弦與余弦函數參數不相同時,會產生交錯效果;此處自行嘗試更改即可產生不同動畫效果.

正弦函數: 
//設置波浪流動速度
wavesSpeed = 0.02;
//設置振幅
waveA = 12;
//設置周期
waveW = 0.5/30.0
 
余弦函數: 
//設置波浪流動速度
wavesSpeed = 0.04;
//設置振幅
waveA = 13;
//設置周期
waveW = 0.5/30.0;

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

4.正弦函數與余弦函數:

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

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

5.正弦函數與余弦函數: 不同速度/振幅,相同周期/,峰頂與峰底對應效果,可自行開啟震蕩

更改余弦函數公式為:

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

同速度:振幅:周期,峰頂與峰底對應.gif

6.正弦函數與余弦函數: 如果需要讓雙波浪在屏幕下方顯示

更改代碼為:

以第一個波浪為例,第二個同理更改就行.

//第一個波浪
self.firstWare = [[FirstWavesalloc]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);