iOS超简单创建波浪动画和进度动画

第一次接触波浪效果来自于拉钩的个人详情页，觉得它的效果不错，便自己使用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即可。可以在view上添加子控件，添加了几个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