第一次接觸波浪效果來自于拉鉤的個人詳情頁，覺得它的效果不錯，便自己使用Objective-C實現了一下，先看拉鉤的效果和實現的效果：

拉鉤的效果

自己實現的效果，默認設置+減小波動振幅

首先新建項目，將WaveView拖入到項目中。推薦使用Cocoapods導入，如果使用 pod search waveview 搜索不到，在終端輸入 rm ~/Library/Caches/CocoaPods/search_index.json 后重新執行 pod search waveview 即可。

將WaveView拖進項目

導入wave.h文件，項目中有兩個類，創建View視圖使用類 WaveView,創建ProgressView進度動畫視圖使用類WaveProgressView。兩個類均支持xib創建。cocoapods導入需要使用 #import <wave.h> 。

創建view的demo，直接將xib中view的class 設置為WaveView,然后正常使用該view即可?？梢栽趘iew上添加子控件，添加了幾個button用于設置這個View的演示屬性。 第一個Button用于切換波動圖層的數量，第二個Button設置波動的振幅大小，第三個Button設置隨機Color，第四個Button設置View的類型，View創建出來默認是WaveViewTypeDefault類型，即View的波動在上方，其他類型還有：WaveViewTypeBottom，WaveViewTypeLeft，WaveViewTypeRight。

為了演示使用xib創建，推薦使用代碼創建，更簡潔方便

設置該View的基本屬性，可以不設置，使用默認設置。

@interface WaveViewController ()
@property (weak, nonatomic) IBOutlet WaveView *waveView;
@end
@implementation WaveViewController
// 演示設置波動是單層波動還是雙層波動效果
- (IBAction)showDoubleWave:(id)sender {
    self.waveView.isDouble = !self.waveView.isDouble;   
}
// 演示設置波動高度的代碼
- (IBAction)changeWaveAmplitude:(id)sender {
    self.waveView.waveAmplitude += 20;
    if(self.waveView.waveAmplitude >= 100) {
        self.waveView.waveAmplitude = 5;
    }   
}
// 演示設置顏色的代碼
- (IBAction)changeColor:(id)sender {
    self.waveView.firsetWaveColor = [self getRandomColor];
    self.waveView.secondWaveColor = [self getRandomColor];   
}
- (UIColor *)getRandomColor {
    int red = arc4random_uniform(256);
    int green = arc4random_uniform(256);
    int blue = arc4random_uniform(256);
    return [UIColor colorWithRed:red / 256.0 green:green / 256.0 blue:blue / 256.0 alpha:1];   
}
// 演示設置view類型的代碼
- (IBAction)changeWaveType:(id)sender {
    // 類型應該直接設置為：WaveViewTypeDefault,WaveViewTypeBottom,WaveViewTypeLeft,WaveViewTypeRight
    self.waveView.waveViewType = (self.waveView.waveViewType + 1) % 4;
    }
}
@end

顯示效果如下：

默認樣式

改變顏色與類型

進度動畫創建也同樣地簡單。
導入wave.h文件，直接創建類WaveProgressView的對象,就會得到一個配制好的進度控件.

WaveProgressView *progress = [[WaveProgressView alloc] initWithFrame:self.showView.bounds];
[self.showView addSubview:progress];
self.progress = progress;

默認樣式

修改樣式

然后可以對該控件進行定制：如設置波動顏色，設置空間類型，是否顯示進度的百分比及顏色等等。

可設置屬性：
1. 波動前波浪的顏色: firstWaveColor;
2. 波動后波浪的顏色: secondWaveColor;
3. 波動進度： percent； 這個屬性的區間為 0 - 1；
4. 是否顯示百分比： showPercent；BOOL類型
5. 設置百分比顏色： percentColor;
6. 設置是否顯示雙層波浪： isDouble; BOOL類型。
7. 設置圓形樣式或方形樣式: isCircle; BOOL類型。

演示效果：

WaveView的部分效果

WaveProgressView的部分效果

Github項目演示Demo：
Github 如果您覺得不錯請star，謝謝??

使用中有問題歡迎和我交流，我的wechat：RobotDarwin