iOS 仿百度外卖-个人中心(头像波浪效果)

今天带来的是仿百度外卖个人中心的波浪效果,先看下效果图吧

下载地址在这

一,项目里用到了两个类:

一个是CADisplayLink类,我用它取代了NSTimer,首先,它是利用刷帧和屏幕频率一样来重绘渲染页面，也就是说每次屏幕刷新的时候就会调用它的响应方法（屏幕一般一秒刷新60次）在绘图中需要重绘时常用它来代替NSTimer，其次,因为NSTimer调度优先级比较低，并不会准时调用，做动画的话会有卡顿的感觉

另一个是CAShapeLayer类,它属于CALayer的子类,通常结合CGPath来绘制不规则矩形图形.

其优点：

    1.渲染效率高渲染快速。CAShapeLayer使用了硬件加速，绘制同一图形会比用Core Graphics快很多。

    2.高效使用内存。一个CAShapeLayer不需要像普通CALayer一样创建一个寄宿图形，所以无论有多大，都不会占用太多的内存。

    3.不会被图层边界剪裁掉。一个CAShapeLayer可以在边界之外绘制。你的图层路径不会像在使用Core Graphics的普通CALayer一样被剪裁掉。

    4.不会出现像素化。当你给CAShapeLayer做3D变换时，它不像一个有寄宿图的普通图层一样变得像素化。

 二,下面是功能的实现(直接使用就可以)

先自定义类,基于 UIView(WavesView)

////  WavesView.h//  仿百度外卖-个人中心(头像波浪效果)////  Created by Amydom on 16/12/28.//  Copyright © 2016年 Amydom. All rights reserved.//#import <UIKit/UIKit.h>typedef void(^WavesBlock)(CGRect myFrame);@interface WavesView : UIView/** *  浪弯曲度 */@property (nonatomic, assign) CGFloat waveCurvature;/** *  浪速 */@property (nonatomic, assign) CGFloat waveSpeed;/** *  浪高 */@property (nonatomic, assign) CGFloat waveHeight;/** *  实浪颜色 */@property (nonatomic, strong) UIColor *realWaveColor;/** *  遮罩浪颜色 */@property (nonatomic, strong) UIColor *maskWaveColor;@property (nonatomic, copy) WavesBlock waveBlock;@property (nonatomic , assign)CGRect imageFrame;- (void)stopWaveAnimation;- (void)startWaveAnimation;@end

////  WavesView.m//  仿百度外卖-个人中心(头像波浪效果)////  Created by Amydom on 16/12/28.//  Copyright © 2016年 Amydom. All rights reserved.//#import "WavesView.h"@interface WavesView ()/** *  定时器    CADisplayLink：利用刷帧和屏幕频率一样来重绘渲染页面，也就是说每次屏幕刷新的时候就会调用它的响应方法（屏幕一般一秒刷新60次），在绘图中需要重绘时常用它来代替NSTimer，因为NSTimer调度优先级比较低，并不会准时调用，做动画的话会有卡顿的感觉 */@property (nonatomic, strong) CADisplayLink *timer;/** *  实浪动画    CAShapeLayer：CALayer的子类,通常结合CGPath来绘制不规则矩形图形    其优点：    1.渲染效率高渲染快速。CAShapeLayer使用了硬件加速，绘制同一图形会比用Core Graphics快很多。    2.高效使用内存。一个CAShapeLayer不需要像普通CALayer一样创建一个寄宿图形，所以无论有多大，都不会占用太多的内存。    3.不会被图层边界剪裁掉。一个CAShapeLayer可以在边界之外绘制。你的图层路径不会像在使用Core Graphics的普通CALayer一样被剪裁掉。    4.不会出现像素化。当你给CAShapeLayer做3D变换时，它不像一个有寄宿图的普通图层一样变得像素化。 */@property (nonatomic, strong) CAShapeLayer *realWaveLayer;/** *  遮罩浪动画 */@property (nonatomic, strong) CAShapeLayer *maskWaveLayer;/** *  <#Description#> */@property (nonatomic, assign) CGFloat offset;@end@implementation WavesView#pragma mark - 初始化- (instancetype)initWithFrame:(CGRect)frame{    self = [super initWithFrame:frame];    if (self) {        [self setUp];    }    return self;}-(void)setUp{        //初始化    self.waveSpeed = 0.5;    self.waveCurvature = 1.5;    self.waveHeight = 4;    self.realWaveColor = [UIColor whiteColor];    self.maskWaveColor = [[UIColor whiteColor] colorWithAlphaComponent:0.4];        [self.layer addSublayer:self.realWaveLayer];    [self.layer addSublayer:self.maskWaveLayer];        }#pragma mark - lazyload- (CAShapeLayer *)realWaveLayer{        if (!_realWaveLayer) {        _realWaveLayer = [CAShapeLayer layer];        CGRect frame = self.bounds;        frame.origin.y = frame.size.height-self.waveHeight;        frame.size.height = self.waveHeight;        _realWaveLayer.frame = frame;        _realWaveLayer.fillColor = self.realWaveColor.CGColor;    }        return _realWaveLayer;    }- (CAShapeLayer *)maskWaveLayer{        if (!_maskWaveLayer) {         _maskWaveLayer = [CAShapeLayer layer];        CGRect frame = self.bounds;        frame.origin.y = frame.size.height-self.waveHeight;        frame.size.height = self.waveHeight;        _maskWaveLayer.frame = frame;        _maskWaveLayer.fillColor = self.maskWaveColor.CGColor;            }    return _maskWaveLayer;    }- (void)setWaveHeight:(CGFloat)waveHeight{        _waveHeight = waveHeight;    CGRect frame = self.bounds;    frame.origin.y = frame.size.height - self.waveHeight;    frame.size.height = self.waveHeight;    _realWaveLayer.frame =  _maskWaveLayer.frame =  frame;    }#pragma mark - 动画- (void)startWaveAnimation{        self.timer = [CADisplayLink displayLinkWithTarget:self selector:@selector(wave)];    [self.timer addToRunLoop:[NSRunLoop currentRunLoop] forMode:NSRunLoopCommonModes];        }- (void)stopWaveAnimation{        [self.timer invalidate];    self.timer = nil;        }//描述路径，并用CAShapeLayer绘制出来- (void)wave{        self.offset += self.waveSpeed;        //获取宽,高    CGFloat width = CGRectGetWidth(self.frame);    CGFloat height = self.waveHeight;        //真实波浪    CGMutablePathRef realpath = CGPathCreateMutable();    CGPathMoveToPoint(realpath, NULL, 0, height);    CGFloat realY = 0.f;        //遮罩波浪    CGMutablePathRef maskpath = CGPathCreateMutable();    CGPathMoveToPoint(maskpath, NULL, 0, height);    CGFloat maskY = 0.f;        for (CGFloat x = 0.f; x <= width; x++) {                realY = height * sinf(0.01 * self.waveCurvature * x + self.offset * 0.045);        CGPathAddLineToPoint(realpath, NULL, x, realY);        maskY = -realY;        CGPathAddLineToPoint(maskpath, NULL, x, maskY);    }    //变化的中间 Y 值    CGFloat centX = self.bounds.size.width / 2;    CGFloat centY = height * sinf(0.01 * self.waveCurvature * centX + self.offset * 0.045);        if (self.waveBlock) {                //修改头像view的高度        CGRect iconFrame = self.imageFrame;                iconFrame.origin.y = CGRectGetHeight(self.frame)-CGRectGetHeight(self.imageFrame) + centY - self.waveHeight;                self.imageFrame = iconFrame;                self.waveBlock(self.imageFrame);            }    //真实波浪    CGPathAddLineToPoint(realpath, NULL, width, height);    CGPathAddLineToPoint(realpath, NULL, 0, height);    CGPathCloseSubpath(realpath);        //描述路径后利用CAShapeLayer类绘制不规则图形    self.realWaveLayer.path = realpath;    self.realWaveLayer.fillColor = self.realWaveColor.CGColor;    CGPathRelease(realpath);        //遮罩波浪    CGPathAddLineToPoint(maskpath, NULL, width, height);    CGPathAddLineToPoint(maskpath, NULL, 0, height);    CGPathCloseSubpath(maskpath);        //描述路径后利用CAShapeLayer类绘制不规则图形    self.maskWaveLayer.path = maskpath;    self.maskWaveLayer.fillColor = self.maskWaveColor.CGColor;    CGPathRelease(maskpath);        }@end

然后是调用,这里就简单的说明下如何调用(在 viewController 里)

首先创建的头像的 image(我是通过懒加载创建的)

- (UIImageView *)iconImageView{        if (!_iconImageView) {        _iconImageView = [[UIImageView alloc] initWithFrame:CGRectMake(self.WavesView.frame.size.width/2 - 30, 0, 60, 60)];        _iconImageView.layer.borderColor = [UIColor whiteColor].CGColor;        _iconImageView.layer.borderWidth = 2;        _iconImageView.layer.cornerRadius = 30;    }    return _iconImageView;}

然后创建 wavesView,并且把创建好的 image的 frame 传过去

- (void)viewDidLoad {        [super viewDidLoad];    //创建对线    self.WavesView = [[WavesView alloc]initWithFrame:CGRectMake(0, 22, self.view.frame.size.width, 150)];        self.WavesView.backgroundColor =[UIColor redColor];        [self.view addSubview:self.WavesView];        [_WavesView addSubview:self.iconImageView];        //这里把头像的 frame 传入到 wavesView里,让其通过 frame来计算该变量     _WavesView.imageFrame = _iconImageView.frame;    //防止循环引用    __weak typeof(self)weakSelf = self;        _WavesView.waveBlock = ^(CGRect imageFrame){        //修改头像view的frame(时时的通过 block 回调改变的 frame)        weakSelf.iconImageView.frame = imageFrame;            };    //开始执行    [_WavesView startWaveAnimation];    }

到这里,波浪形动画就完成了.....大家没事可以多看看动画的实现,对于里面有些东西我也是比较模糊的状态,但是多看多谢,慢慢的你就会发现收获还是有的...