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

lkgw5676 8年前發布 | 8K 次閱讀 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次。

(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<=WavesWidth; i++) {
    //正弦函數波浪公式
    y = waveA * sin(waveW * i+ offsetX)+currentK;
   //第二個View中:使用余弦函數波浪公式
   //y = waveA * cos(waveW * i+ offsetX)+currentK;
    //將點連成線
    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);

三.相關效果

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

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

2.正弦函數與余弦函數: 相同速度/振幅/周期/震蕩效果*,這就類似淘寶個人信息狀態欄

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

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

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

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

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

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