iOS 雙波浪動畫 – 類似淘寶個人資訊狀態列,京東金融等

發表於2017-01-12

類似淘寶個人資訊狀態列,京東金融等雙波浪動畫

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

一.相關概念解釋

正弦函式: y =Asin（ωx+φ）+C
A 表示振幅，也就是使用這個變數來調整波浪的高度
ω表示週期，也就是使用這個變數來調整在螢幕內顯示的波浪的數量
φ表示波浪橫向的偏移，也就是使用這個變數來調整波浪的流動
C表示波浪縱向的位置，也就是使用這個變數來調整波浪在螢幕中豎直的位置。

(1)利用CADisplayLink,進行UI的重新整理.

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

1 2	@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)正弦與餘弦函式

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

//建立一個路徑

CGMutablePathRef path = 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;

正弦函式:

//設定波浪流動速度

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;

//如果需要正弦函式的峰頂和餘弦函式的峰底對應,可以替換成下方公式均可

//y = waveA * cos(waveW*i + offsetX+M_PI_2)+currentK;

//y = waveA * sin(-(waveW*i + offsetX))+currentK;

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

6.正弦函式與餘弦函式:如果需要讓雙波浪在螢幕下方顯示
更改程式碼為:
以第一個波浪為例,第二個同理更改就行.

//第一個波浪
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);

//第一個波浪