美文网首页
LoadingWave

LoadingWave

作者: wpf_register | 来源:发表于2016-09-24 16:40 被阅读26次

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

    示例效果
    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

          本文链接:https://www.haomeiwen.com/subject/xzcxyttx.html