LoadingWave

参考文档
原文作者数学功底相当牛逼,他用一张图片简单实现进度条效果非常不错,这里简单尝试的封装一下,当然很简陋。

示例效果
LoadingWave_第1张图片
QQ20160924-1.png
简单使用
LoadingWave *loadingWave = [[LoadingWave alloc]initWithFrame:CGRectMake(0, 0, 200 , 200)];
[self.view addSubview:loadingWave];
loadingWave.center = self.view.center;
self.loadingWave = loadingWave;

//通过计时器改变其progress
self.progress += 0.1;
    [self.loadingWave setProgress:self.progress];

    if (self.progress > 1.0 ) {
        [self.timer invalidate];
        self.timer = nil;
        return;
    }

封装方法
.h 文件
@interface LoadingWave : UIView
- (instancetype)initWithFrame:(CGRect)frame;
- (void)setProgress:(CGFloat)progress;
- (void)hiddenLoadingWave;
@end

.m 文件

#import "LoadingWave.h"
#import "UIView+Frame.h"

@interface LoadingWave ()

@property (nonatomic,retain) UIImageView *rotationImageView;
@property (nonatomic,retain) UIImageView *waveImageView;
@end

@implementation LoadingWave


- (instancetype)initWithFrame:(CGRect)frame {
    
    self = [super initWithFrame:frame];
    if (self) {
        
        self.frame = frame;
        //旋转视图
        UIImageView *rotationImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"rotation"]];
        rotationImageView.frame = CGRectMake(0, 0, frame.size.width, frame.size.width);
        [self addSubview:rotationImageView];
        
        //波浪视图
        //这边关于bgView的frame设置看似很麻烦,其实是在frame为200时,外圆内圆半径相差18,
        //所以这边需要计算在frame不同时,frame与内圆一致。
        UIView *bgView = [[UIView alloc]initWithFrame:CGRectMake(18 * frame.size.width/200, 18*frame.size.width/200, frame.size.width- 18 * frame.size.width/200 *2 , frame.size.width- 18 * frame.size.width/200 *2 )];
        bgView.layer.cornerRadius = bgView.frame.size.width/2;
        //视图的子视图超出视图部分截掉
        bgView.clipsToBounds = YES;
        [self addSubview:bgView];
        
        
        UIImageView *waveImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"wave"]];
        waveImageView.frame = CGRectMake(0, 0, 750, 300);
        waveImageView.top = bgView.frame.size.height;
        waveImageView.left = - 750;
        [bgView addSubview:waveImageView];
        
        self.waveImageView = waveImageView;
        self.rotationImageView = rotationImageView;
    }
    return self;
    
}

- (void)setProgress:(CGFloat )progress{
    
    [UIView animateWithDuration:2
                     animations:^{
                         
                         //这里最奇怪???
                         //当旋转角度是180度是永远只顺时针旋转。但除2后回归正常
                         _rotationImageView.transform = CGAffineTransformRotate(_rotationImageView.transform, (-M_PI/1.9));
                        
                        //_rotationImageView.layer.transform = CATransform3DRotate(_rotationImageView.layer.transform,  M_PI, 0, 0, 1);
                         
                         _waveImageView.top = self.frame.size.height  * (1- progress) - 20;
                         NSLog(@"%f",progress);
                         if (progress >= 1.0) {
                             _waveImageView.top = -20;
                             return ;
                         }
                         _waveImageView.left = -(750 - progress * 750);
                         
                     }];
}

- (void)hiddenLoadingWave{
    self.hidden = YES;
    [self removeFromSuperview];
    
}

你可能感兴趣的:(LoadingWave)